Hexo + NexT 博客优化(修改)记录

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

一、样式修改

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

分类横向展示

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

.category-list-item { 
margin: 5px 10px;
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
}

设置 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

二、功能添加

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

添加 Disqus 评论

教程:Hexo 添加 Disqus 评论

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


也可以使用 Gitalk

教程:

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

添加 Algolia 搜索

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

注意事项:

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

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

可参考教程:

缺点:

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

可能遇到的问题:

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

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

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

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

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

三、外部设置

自定义域名加密为 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

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

如果 sitemap 不能读取,也可以设置 atom.xml

四、其他可能遇到的问题

  • 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 搜索引擎优化
Depp Wang wechat
个人公众号