Hexo的SEO优化之修改主题中描述的显示

57 阅读 0 评论 38 点赞

我是靠谱客的博主舒适西牛，最近开发中收集的这篇文章主要介绍Hexo的SEO优化之修改主题中描述的显示，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本帖首发于现代人博客内容可能有后期变动，欢迎前往阅读最新内容，与博主互动~

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

需求与实现思路

其实我的需求是这两点：

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

* front-matter就是你写hexo文章中用----包裹的那部分，包括title（标题）、date（时间）等，当然也有我们的描述（description）。
同时每篇文章的描述部分应该作为这个网页中meta标签的description的值（这个有的模板自带这个功能，若测试有这个则无需修改），即若我的文章描述为阿巴阿巴阿巴则应该对应有如下meta标签：
```
<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。

观察这个截取的代码：

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，为啥这么说呢

<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

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

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

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

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

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

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

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

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

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

if page.description
  //操作
else
 //草走

就可以了，那么我们就可以改为：

    if page.description
      meta(name='description', content=page.description)
    else
      meta(name='description', content=config.description)

就可以啦！

修改post.pug

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

    .post-content
      != page.content

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

    .post-content
      //添加描述
      != page.description
      != page.content

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

TL;DR: 总结

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

head.pug

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

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

改为：

  if page.description
    meta(name='description', content=page.description)
  else
    meta(name='description', content=config.description)

post.pug

  .post-content
    != page.content

改为：

  .post-content
    //添加描述
    != page.description
    != page.content

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

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

感想

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

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

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

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