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

前言：

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

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

一、文首显示文章描述

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

这就使得本就信息栏更加复杂，而且如果文章确实需要一个简介，在正文处又要再写一次，不仅重复而且不美观。所以可以想办法把 description 从信息栏移到正文开头，恰好作为简介使用，而且还能优化 SEO，一举两得。调整 description 的位置需要修改 next/layout/_macro/post.swig：

{#################}
{## 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 部分：

{#################}
{### 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，当然也可以按自己的喜好来：

title: 例文
date: 2020-02-02 12:12:12
unfinished: true
description: 简介 / 未完待续

然后修改 next/layout/_macro/post.swig：

{% 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 %}