Hexo + NexT 博客优化（修改）记录

有问题建议先看官方文档，和 issue

样式修改

注意：重新部署后，样式若没更新，清除浏览器缓存

分类横向展示

原来纵向展示个人不太喜欢，就改为横向扩展

themes\next\source\css\_common\component\pages\categories.styl 中修改：

.category-list-item { 
  margin: 5px 10px; 
  display: inline-block; // 新增
}

display: inline-block：可以不换行，让其他元素元素显示在旁边；并且可以设置高度。w3schools: CSS Layout - display: inline-block

设置图片居中

Mist 主题： themes\next\source\css\_schemes\Mist\_posts-expanded.styl 中修改

.post-body img { margin: auto; } // 0 - > auto

_schemes：方案
图片链接格式不为 ![]() 时，需要用 <p></p> 包裹，此时图片才有间距

设置字体大小

themes\next\source\css\_custom\custom.styl 中新增：

// 正文字体的大小
$font-size-base = 15px // 原 14 px

_custom\custom.styl 为全局自定义样式
如果未生效，在 themes\next\source\css\_variables\base.styl 中修改

更改内容区域的宽度（已还原）

themes\next\source\css\_custom\custom.styl 中新增：

// 修改成你期望的宽度
$content-desktop = 800px // 原 700px

// 当视窗超过 1600px 后的宽度
$content-desktop-large = 1000px // 原 900px

如果未生效，在 themes\next\source\css\_variables\base.styl 中修改

更改 h1 h2 字体大小

在 themes\next\source\css\_custom\custom.styl 中新增：

// Custom styles.
// 新增
h1 {
  font-size: 2em; // 2em = 32px
}

h2 {
  font-size: 1.5em; // 1.5em = 24px, 1em = 16px
}

em: use the default size of the device，即根据正文字体的大小决定

设置 h2 下划线

themes\next\source\css\_common\component\post\post-expand.styl 中修改

.posts-expand .post-body {
  ...
  // 新增
  h1, h2 {
    padding-bottom: .3em;
    border-bottom: 1px solid #eaecef;
  }
  ...
}

也可以在 themes\next\source\css\_schemes\Mist\_posts-expanded.styl 修改？
只为文章内容中的 h1 h2 标题添加下划线

修改 h1 h2 h3 h4 间距

在 themes\next\source\css\_custom\custom.styl 中新增：

h1, h2, h3, h4, h5, h6 {
    margin: 10px 0 20px;
}

URL 中文改为英文

文章标题块添加 english-tile，站点配置文件修改 permalink

站点配置文件设置 tag_map、category_map

归档页（archive）重设每页大小

站点配置文件添加以下配置：

archive_generator:
  enabled: true
  per_page: 100
  yearly: true
  monthly: true
  daily: false
  order_by: -date

功能添加

底部添加版权声明、微信公众号图片、分享按钮

添加 Disqus 评论

教程：Hexo 添加 Disqus 评论

缺点：只能科学上网后才能评论

也可以使用 Gitalk，教程：

缺点：发布文章后需要页面点击初始化；issue 不美观

添加 Algolia 搜索

export HEXO_ALGOLIA_INDEXING_KEY=*** # 使用 export 临时设置一个环境变量
echo $HEXO_ALGOLIA_INDEXING_KEY      # 查看环境变量是否设置成功

注意事项：

hexo-algolia 和 hexo-algoliasearch 不要同时使用
使用 hexo-algolia 时，如果你删除了文章，需要更新 Algolia 里面的链接，需要使用 hexo algolia --flush true 命令

hexo-algolia 模块的作用：将博客文章链接发送给自己的 Algolia 账户。搜索原理：输入关键字，调用 Algolia 提供接口，返回相应文章链接

可参考教程：

缺点：

新增文章后需要运行 hexo algolia 将当前文章发送到 Algolia
删除文章后还能搜索到，需要再次去 Algolia 删除？可使用 hexo algolia --flush true 命令更新

可能遇到的问题：

每次运行 hexo algolia 都需要设置环境变量，解决方式：直接「永久」设置环境变量

macOS「永久」设置环境变量：

默认为 bash，修改 .bash_profile
如果为 oh-my-zsh，修改 .zshrc
打印环境变量命令：printenv

添加文章阅读次数统计、网站访问次数统计

可参考文章：Hexo 添加不蒜子和 LeanCloud 统计

外部设置

使用 GitHub Actions 实现 Hexo 博客自动部署

自定义域名加密为 HTTPS

直接利用 cloudfire 加密网站

访问域名时，需要先由 DNS 服务来将域名解析为 ip 地址

DNS 服务器负责域名解析，需要先将域名的 DNS 服务器修改为 cloudfire 的服务器，由 cloudfiere 的 DNS 服务器负责域名解析，在 cloudfire 中设置规则，如：将 depp.wang 解析到 deppwang.gihub.io

在项目 GitHub Pages 中设置：访问 deppwang.gihub.io 重定向到 depp.wang，访问 depp.wang 时，cloudfiere 的 DNS 服务器又将 depp.wang 指向到 deppwang.github.io，最终访问的还是 deppwang.github.io。ping depp.wang 会发现是 github 节点，如果 ip 地址为 cloudfiere 节点，那是因为 cloudfiere 设置了代理。

DNS：Domain Name System 域名系统

可参考文章：科普-为自己的博客免费加上小绿锁

提交到 Google 搜索引擎

一般不主动提交 url 给 Google 搜索引擎，Google 也可以凭借强大的爬虫（蜘蛛）抓取你网址的 url，但为了让谷歌更好更快的抓取你的文章，还是给他提供一个参考，一个站点地图（sitemap.xml）

先在 Search Console 验证你拥有网站的所有权，可以使用 HTML 文件、HTML 标记等方式验证。将 HTML 文件添加到网站中。每个用户拥有自己的 HTML 文件，如果网站有多个管理员，每个管理员的 HTML 文件不同。

如果使用 HTML 文件验证失败，HTML 文件添加 layout: false

layout: false
---
google-site-verification: googlec27ee4754ff2e800.html

使用 hexo-generator-sitemap 包生成站点地图，hexo-generator-sitemap 包的作用：

每次 hexo g 时，根据 _post 的文章生成站点地图：sitemap.xml。插件默认根据最近修改时间生成 sitemap 中的 <lastmod>，如果使用 hexo-action，需要添加 sitemap 模板（/source/sitemap_template.xml），使用文章的 date

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  {% for post in posts %}
  <url>
    <loc>{{ post.permalink | uriencode }}</loc>
    {% if post.date %}
    <lastmod>{{ post.date.toISOString().substring(0, 10) }}</lastmod>
    {% endif %}
  </url>
  {% endfor %}
</urlset>
# _config.yml
sitemap:
  template: ./source/sitemap_template.xml

正常来说，当添加了 sitemap，Google 将定期抓取你设置的 sitemap

站点地图抓取时间不更新解释：[How To] Solve Search Console “Sitemap could not be read” Error

sitemap 的 <lastmod> 应该对应 deppwang.github.io 的 html 文件的最近修改时间，sitemap 的最新文章的 url 的 lastmod 是对的，但其他 url 的时间不一定是对的。因为 Hexo 每次发布基本上都会更新所有文章 og:updated_time 改变。所以 GCS 是否因为文章时间对应不上而不抓取？或者因为网站权重太低？

如果 sitemap 不能读取，也可以设置 atom.xml：https://github.com/hexojs/hexo-generator-sitemap/issues/92

其他可能遇到的问题

Google 不收录网址的问题，博客源文件每次被覆盖的问题

头像下网址描述不显示问题

可能是你在 主题配置文件 中开起了 SEO，SEO 覆盖掉了原来的代码

seo: true

目测开启没有什么效果，可以关闭解决。也可以修改源代码

思路：找到不显示字样的 class，IDEA 打开文件，全局搜索 class，找到代码位置，进行修改

修改文件位置

/next/layout/_macro/sidebar.swig
theme.signature` 修改为 `config.description
<p class="site-description motion-element" itemprop="description">{{ config.description }}</p>

SEO: Search engine optimization 搜索引擎优化