vuepress-theme-vdoing
vuepress-theme-vdoing copied to clipboard
【需求】:希望增加文章摘要默认文字数以及图片样式
两周前开始入坑vuepress-vdoing,没想到很快百度就有了收录,但是文章简介的地方看起来就有点尴尬了,如下图:
于是想到应该每篇文章没有摘要内容所致!
现在文章摘要是通过more标签为每篇文章自定义,这样会带来一个问题是,不同的文章摘要长短不一,图片的样式也不统一,使得文章区域就显得不够好看。
因此建议:有一个总开关控制,如果true,那么就默认取文章前n个(或支持自定义)字作为摘要描述,默认取对应文章首图作为图片,如果文章内没有图片,则会有几张默认图片随机展示。
取原来WordPress示例如下,图片统一大小在左,摘要再右:
这种统一风格的样式在百度收录之后显得也比较好看:
同感, 这个功能很有必要, 最近我也换成了vdoing,没有自动提取摘要功能让我很苦恼。之前用的jekyll会自动提取文章的前200个字符,vdoing如果能加上配置就完美了。
jekyll主题提取摘要的样式:
提取摘要的方式:
<div class="post-content-preview">
{% if post.lang == 'en' %}
{{ post.content | strip_html | truncate:300 }}
{% else %}
{{ post.content | strip_html | truncate:200 }}
{% endif %}
</div>
其实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其实已经有了

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