Hexo框架(五):将SEO描述作为简介

前言:

本篇设置基于NEXT主题7.7.2版本!!注意:目前我已经更新至最新版本,目前采用了全新的配置方式,这里的主题配置文件,均指hexo/source/_data目录下的next.yml文件,你可以点击这里查看:关于博客主题持续更新的问题和我的新配置方式

此外,由于对于要修改源码的配置方式,目前我均已放弃。

一、文首显示文章描述

在给博客做 SEO 优化时,通常会给每一篇文章都加一个描述 description 属性,这样能更方便地使得文章被搜索引擎检索到。不过 description 会和正文的 ReadMore 冲突,也就是不论正文在哪里划分 `` 标签,只要设置了 description 就会导致首页显示的文章缩略内容是 description,并且点击阅读全文后,这个 description 会作为一个文章信息的形式展示而非正文:

image-20200331214810342

这就使得本就信息栏更加复杂,而且如果文章确实需要一个简介,在正文处又要再写一次,不仅重复而且不美观。所以可以想办法把 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 ###}
{#################}

......

由于比较复杂,我截了一个图,如果版本相同的话,你可以按照代码行来缩小查找范围:

image-20200331215221802

把这段 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>

同样的我也截了一个图,作为参考:

image-20200331215457003

这样,首页的描述前就会自动加上高亮的“简介:”开头了:

image-20200331215549012

正文内的描述也会有同样效果:

image-20200331214646275

自动切换“简介”和“未完待续”

如果一篇文章尚未完成,想要在文首提示一些信息,可能会这么做:

image-20200331215718604

但是显得不够简洁,简介就应该是针对一篇已完成的文章。因此,可以利用自定义文章头部属性的方式进行适配。首先在未完成的文章头部属性中增加一个自定义属性 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 %}

image-20200331220001483

这样,如果文章具有 unfinished: true 属性,则会显示“未完待续”,完成文章后删掉这个属性,即可正常显示“简介”了。

image-20200331220102305

完成后的文章:

image-20200331220134638

参考资料

Hexo博客DIY:SEO描述作为简介并添加LaTeX提示

------ 本文结束  感谢阅读 ------