不知道是不是主题的问题，发现所有的文章页面meta标签的description都是默认的博客简介，这样可不利于seo（虽然也不一定收录我但是强迫症还是要改一下），再加上之前描述部分显示在首页中需要手动添加一个才能截断，有的人妥协于此，也有的人选择使用自动提取或者其他方式，这里选择修改模板中的相应设置来实现更优雅的书写体验。

文章有一点点长 你如果只想要结论可以直接去看总结部分！
把description显示到正文反而要改的地方还挺多的，后续也有一点小问题，如果你懒得折腾，这里不建议改了。。毕竟我也是在瞎试中试出来的……技术有限orz

需求与实现思路

其实我的需求是这两点：

  • 我想更优雅的写描述，但是根据模板和hexo的现有设置，我如果选择在Markdown的front-matter中使用description他能在首页显示，但是又不在文章内显示。而我想要他即在文章内显示又在首页显示，目前想使用这种情况，必然需要<!--more-->标签中断。

    * front-matter就是你写hexo文章中用——包裹的那部分，包括title（标题）、date（时间）等，当然也有我们的描述（description）。

  • 同时每篇文章的描述部分应该作为这个网页中meta标签的description的值（这个有的模板自带这个功能，若测试有这个则无需修改），即若我的文章描述为阿巴阿巴阿巴则应该对应有如下meta标签：

    1
    <meta name="description" content="阿巴阿巴阿巴">

    如何实现他呢，经过我一些搜索了解，hexo的网页生成是基于模板的，而这种模板并非直接用html和css而是经过了一层预先处理以提高速度、简洁语法，赋予动态性。而我使用的主题所使用的模板就是基于jade语言的，其实直接看的话，他可以近似看为简化版的html。因此我们对他进行修改应该就能实现类似的效果。

观察Jade模板

观察一下主题的文件结构：

（如果你是其他主题，则参考找到自己对应文件就行啦）

  • /maupassant/
    • /languages/
    • /layout/
      • /_partial/
        • head.pug
        • footer.pug
        • ……等文件
      • /_widget/
      • post.pug
      • ……等文件
    • source

我门可以看到，以我们的文章页面为例，他大致上是由：头——head.pug，内容——post.pug, 尾——footer.pug（以及侧边栏、评论等，这里因为无需修改不多提），构成的。

而我们要修改实现两个效果：

  • front-matter中的description作为我们当前网页的meta标签的description的值；
  • 同时也作为文章的一部分。

那么我们就只需要修改head.pug和post.pug就可以啦~

按照这个思路，我们先来看meta标签的部分。

我们找到/themes/manupassant/layout/_partial/head.pug。

观察这个截取的代码：

1
2
3
4
5
6
7
head
    meta(http-equiv='content-type', content='text/html; charset=utf-8')
    meta(content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0', name='viewport')
    meta(content='yes', name='apple-mobile-web-app-capable')
    meta(content='black-translucent', name='apple-mobile-web-app-status-bar-style')
    meta(content='telephone=no', name='format-detection')
    meta(name='description', content=config.description)

是不是很眼熟？其实他确实是简化版的html，为啥这么说呢
1
2
3
4
5
6
7
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta name="description" content="阿巴阿巴阿巴">

是吧，其实就是简化版的咯~

修改Jade模板

修改head.pug

有了上面的认识，那么我们可以很清晰的对应出来我们想要修改的部分：

1
meta(name='description', content=config.description)

是的，我们可以直觉上理解config.description就是从配置文件中获取页面描述，那么我们改成从文章的front-matter获取不就行了么，那么这个如何表达呢？

由于head部分没有对这里做太多的调用，我们不是很好看出（其实也能看出），但是从我们的post.pug中可以看到这么一段：

1
2
block title
  title= page.title + ' | ' + config.title

这个page.title应该就是我们这个文章的标题部分，config则是网站的标题，那么我们推测一下page.description是不是我们想要的的东西呢，替换过后经过测试，确实是的！ 那么这一部分我们就修改完啦~

？？其实并没有因为你会发现这样的话，没有描述的页面怎么办呢，总不能为空吧？

我们先前其实提到过，这类模板引擎大多都增加了动态性，也就是我们可以做判断，有描述就用，没有就用配置文件的不就行了。

那么怎么弄呢？观察pug文件中的其他部分我们发现他的语法其实就只是：

1
2
3
4
if page.description
  //操作
else
 //草走

就可以了，那么我们就可以改为：
1
2
3
4
if page.description
  meta(name='description', content=page.description)
else
  meta(name='description', content=config.description)

就可以啦！

修改post.pug

接下来来到post.pug，我们想让文章正文也有这个描述，看下内容：

1
2
.post-content
  != page.content

我们结合一下网页源码（利用审查工具），发现文章正文包裹的标签就是这个post-content，那么下面的page.content应该就是我们的正文了，按照一样的格式，我们给他前面加个page.description就行咯：
1
2
3
4
.post-content
  //添加描述
  != page.description
  != page.content

这样我们两部分就都修改好了。

TL;DR: 总结

我们总结一下我们需要修改两个文件：你主题文件夹中layout里的post.pug以及layout/_partial/里的head.pug。

  • head.pug

    （如果你的模板默认会把description放到meta标签里这里你不需要修改）

    1
    meta(name='description', content=config.description)

    改为：

    1
    2
    3
    4
    if page.description
      meta(name='description', content=page.description)
    else
      meta(name='description', content=config.description)

  • post.pug

    1
    2
    .post-content
      != page.content

    改为：

    1
    2
    3
    4
    .post-content
      //添加描述
      != page.description
      != page.content

    修改完以后写描述直接在markdown的前面加一项description就行了，例如：

    1
    2
    3
    4
    5
    6
    ---
    title: Hexo的SEO优化之修改模板中描述的显示与其他
    date: 2021-02-07 22:50:19
    toc: true
    description: 阿巴阿巴阿巴
    ---

感想

其实这个文章就是完整记录了我研究这玩意的过程，说真的其实写这么久弄的时候还挺顺利，不过我还是建议读文档能学到更多，没必要向我这样瞎猜（hhhhh）但是记录下来这样一个过程也挺有意思的.

因为发现这个问题确实是个问题后搜到了解决办法并不多（有的甚至还说你即用<!--more-->截断也用description啥的，或则绕了一个圈子实现了类似的效果。）所以我想了一下这个应该是能改出来的，并且这个情况可能只是存在于部分模板上。

不过这个改法实际上存在一些问题：首先它让你的格式变得有点僵硬了，比如要写个description，这玩意必须要显示到文章里（其实可以通过增加一个配置项来实现是否显示，但是感觉这样又有些臃肿，看后面的想法吧）。其次就是这样的话你的描述并不能很好的换行，或者说目前看好像不能换行？（如果可以的话给我说……）

ok差不多就结束了吧，拜拜，希望能帮到你。

补充：记得修改search.xml

今天（2021年2月9日）改博客搜索的时候发现如果你使用了hexo-generator-search插件作为本体搜索，那么默认description并不会被检索到，于是又手动改了一下。

首先进入
node_modules\hexo-generator-search\templates\search.xml

1
2
3
4
{% if content %}
   <content type="html"><![CDATA[{{post.content | noControlChars | safe }}]]></content>
{% endif %}

改为
1
2
3
{% if content %}
  <content type="html"><![CDATA[{{ post.description }}{{post.content | noControlChars | safe }}]]></content>
{% endif %}

然后重启重新生成等等就能搜到了。
如果你用的是hexo-generator-searchab则你需要修改

node_modules\hexo-generator-searchdb\templates\search.xml对应部分为

1
2
3
4
5
6
{%- for article in articles %}
<entry>
  <title>{{ article.title }}</title>
  <url>{{ article.url }}</url>
  <content><![CDATA[{{ article.description}}{{ article.content | safe }}]]></content>
  {%- if article.categories %}

并且你还需要在node_modules\hexo-generator-searchdb\lib\database.js里添加
1
2
3
if(article.description){
    data.description = article.description;
  }

最好添加到第6行即title的上面，我也不知道为啥但是就这样可以.jpg。
总感觉这样改越改越麻烦了……