vuepress-theme-vdoing icon indicating copy to clipboard operation
vuepress-theme-vdoing copied to clipboard

【需求】:希望增加文章摘要默认文字数以及图片样式

Open eryajf opened this issue 3 years ago • 2 comments

两周前开始入坑vuepress-vdoing,没想到很快百度就有了收录,但是文章简介的地方看起来就有点尴尬了,如下图:

EC3B55A62930F45D4CCB722B1A4E9A4D

于是想到应该每篇文章没有摘要内容所致!

现在文章摘要是通过more标签为每篇文章自定义,这样会带来一个问题是,不同的文章摘要长短不一,图片的样式也不统一,使得文章区域就显得不够好看。

因此建议:有一个总开关控制,如果true,那么就默认取文章前n个(或支持自定义)字作为摘要描述,默认取对应文章首图作为图片,如果文章内没有图片,则会有几张默认图片随机展示。

取原来WordPress示例如下,图片统一大小在左,摘要再右:

1A5B92993938D50CECE1742E1D897B35

这种统一风格的样式在百度收录之后显得也比较好看:

5454408D51B94D4286E2DF55AADE1944

eryajf avatar Jul 01 '21 14:07 eryajf

同感, 这个功能很有必要, 最近我也换成了vdoing,没有自动提取摘要功能让我很苦恼。之前用的jekyll会自动提取文章的前200个字符,vdoing如果能加上配置就完美了。

jekyll主题提取摘要的样式: image

提取摘要的方式:

<div class="post-content-preview">
	{% if post.lang == 'en' %}
		{{ post.content | strip_html | truncate:300 }}
	{% else %}
		{{ post.content | strip_html | truncate:200 }}
	{% endif %}
</div>

sumcai avatar Nov 28 '21 02:11 sumcai

其实vuepress有自定义摘要的功能,在frontformatter里面写

---
title: Netty高级进阶之基于Netty的Websocket开发网页聊天室
date: 2022-04-27 02:12:26
permalink: /post/develop-web-chat-room-with-netty-websocket.html
meta:
  - name: keywords
    content: netty websocket
  - name: description
    content: 本通过实战演练,学习了如何基于Netty的websocket开发一个网页聊天室。
---

然后查看html其实已经有了

image

http://terwergreen.com/post/develop-web-chat-room-with-netty-websocket.html

terwer avatar Apr 29 '22 05:04 terwer