本篇设置基于 NEXT 主题 7.7.2 版本!!注意:目前我已经更新至最新版本,目前采用了全新的配置方式,这里的主题配置文件,均指 hexo/source/_data 目录下的 next.yml 文件,你可以点击这里查看: 关于博客主题持续更新的问题和我的新配置方式
此外,由于对于要修改源码的配置方式,目前我均已放弃。
一、文首显示文章描述
在给博客做 SEO 优化时,通常会给每一篇文章都加一个描述 description 属性,这样能更方便地使得文章被搜索引擎检索到。不过 description 会和正文的 ReadMore
冲突,也就是不论正文在哪里划分 `` 标签,只要设置了 description 就会导致首页显示的文章缩略内容是 description,并且点击阅读全文后,这个 description 会作为一个文章信息的形式展示而非正文:
这就使得本就信息栏更加复杂,而且如果文章确实需要一个简介,在正文处又要再写一次,不仅重复而且不美观。所以可以想办法把 description 从信息栏移到正文开头,恰好作为简介使用,而且还能优化 SEO,一举两得。调整 description 的位置需要修改 next/layout/_macro/post.swig
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| {#################} {## POST HEADER ##} {#################} {% if not headlessPost %} <header class="post-header">
{### 中间隔了很长一大段 ###}
......
{### 一直到 Post Header 的最下面 ###}
{#################} {## Description ##} {#################} {% if post.description and (not theme.excerpt_description or not is_index) %} <div class="post-description">{# #}{{ post.description }}{# #}</div> {% endif %}
</header> {% endif %}
{#################} {### POST BODY ###} {#################}
......
|
由于比较复杂,我截了一个图,如果版本相同的话,你可以按照代码行来缩小查找范围:
把这段 Description 的代码复制下来,然后把这里删掉,找到下面 Post Body 部分:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
| {#################} {### POST BODY ###} {#################} <div class="post-body{% if theme.han %} han-init-context{% endif %}{% if post.direction && post.direction.toLowerCase() === 'rtl' %} rtl{% endif %}" itemprop="articleBody">
......
{% if is_index %} {% if post.description and theme.excerpt_description %}
{### 这里是首页文章列表的描述 ###} {### 在描述前面加一个高亮的“简介:”开头 ###} <span style="color: #EB6D39">简介:</span>{{ post.description }}
......
{% endif %}
......
{% else %}
{### 这里是正文内的描述 ###} {### 在描述前面加一个高亮的“简介:”开头 ###}
{#################} {## Description ##} {#################} {### 把 Description 显示在正文内 ###} {% if post.description and (not theme.excerpt_description or not is_index) %} <div class="post-description">{# #}<span style="color: #EB6D39">简介:</span>{{ post.description }}{# #}</div> {% endif %}
{### 下面就是正文内容 ###} {{ post.content }} {% endif %} </div>
|
同样的我也截了一个图,作为参考:
这样,首页的描述前就会自动加上高亮的“简介:”开头了:
正文内的描述也会有同样效果:
自动切换“简介”和“未完待续”
如果一篇文章尚未完成,想要在文首提示一些信息,可能会这么做:
但是显得不够简洁,简介就应该是针对一篇已完成的文章。因此,可以利用自定义文章头部属性的方式进行适配。首先在未完成的文章头部属性中增加一个自定义属性 unfinished: true
,当然也可以按自己的喜好来:
1 2 3 4
| title: 例文 date: 2020-02-02 12:12:12 unfinished: true description: 简介 / 未完待续
|
然后修改 next/layout/_macro/post.swig
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
| {% if is_index %}
{####################################} {### 首页文章列表中显示的简介/未完待续 ###} {####################################} {% if post.description and theme.excerpt_description %} <span style="color: #EB6D39">{# #}{% if post.unfinished %} 未完待续: {% else %} 简介: {% endif %}{# #}</span>{{ post.description }}
......
{% else %}
{#################################} {### 正文文首中显示的简介/未完待续 ###} {#################################} {% if post.description and (not theme.excerpt_description or not is_index) %} <div class="post-description">{# #}<span style="color: #EB6D39">{# #}{% if post.unfinished %} 未完待续: {% else %} 简介: {% endif %}{# #}</span>{{ post.description }}{# #}</div> {% endif %}
......
{% endif %}
|
这样,如果文章具有 unfinished: true
属性,则会显示“未完待续”,完成文章后删掉这个属性,即可正常显示“简介”了。
完成后的文章:
参考资料
Hexo 博客 DIY:SEO 描述作为简介并添加 LaTeX 提示
文章作者: ConstOwn
文章链接: https://blog.juanertu.com/archives/e8460ade.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 你真是一个美好的人类!
相关推荐
2022-02-10
使用GitHub Actions 实现自动化部署和部署到服务器
2020-05-20
Hexo博客添加emoji表情支持
2020-05-20
给文章标题添加一个emoji表情
最新文章
mac OS 配置前端开发环境
使用GitHub Actions 实现自动化部署和部署到服务器
img标签访问图片返回403 forbidden的解决方法
Vue基于html2canvas实现HTML页面生成为图片并下载的功能及清晰度优化
那些你总是要用却又死活记不住的css属性