Hexo配置NexT主题教程

首发于羽毛工作室官方博客——和有趣的人做尽有趣的事!

总之拖了这么久,《阿里云OSS部署Hexo教程》的后续终于来了。今天说说NexT主题的配置问题。

开宗明义:一方面是为了自己Mark自己的骚操作,以免后面迁移的时候忘了当初是怎么配置的。另一方面是自己在折腾的过程中,确实踩了一些坑。就很希望有一个教程,能让我无脑照做(可惜没有)。

所以如果你喜欢现在这个博客的风格,想做个一模一样的。无脑照此教程做,肯定没问题的。

关于版本号

image-20210215235329098

NexT:8.2.0 | Hexo:5.3.0

版本不同,对应的设置参数或多或少有些差异。所以无脑照做的前提是和我的版本号相同哦。

查询方法,在Blog文件夹内执行Git Bash Here 输入:

$ hexo v

考虑到未来看到此文的你,手中的版本可能更高,且不愿降级,所以授之以鱼的同时,也会授之以渔。

查询版本中无NexT项

可能你会发现为什么我查询并没有显示next主题logo,更没有next版本。

首先你要安装一个next主题

1、前往NexT主题制作团队的Github主页,去下载代码Zip压缩包。

image-20210216103416503

2、下载后你会得到一个【markdown-here-master.zip】文件,右键解压到当前目录同名文件夹后,重命名为【next】注意全部小写。

image-20210216103733911

3、将重命名后的【next】文件夹(注意小写),拖拽到blog文件夹下的【themes】文件夹中,这个文件夹是用来存放Hexo主题的。

image-20210216104353681

这个时候再查询一下,还是没有(因为还需要在站点配置文件中启用主题)不用担心,继续按照本教程往下做就行,后面会介绍到如何启用。

需要用到的工具有哪些?

1、Hexo官方配置文档

用于修改【站点配置文件】时打开这个网页参考。

2、NexT官方使用文档

用于修改【主题配置文件】时打开这个网页参考。

在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。

为了描述方便,在以下说明中,将前者称为 【站点配置文件】, 后者称为 【主题配置文件】。

【NexT官方使用文档中的原文】

Ps:我习惯用 sublime text3 来编辑代码。推荐一下,你可以很轻松的下载并使用,有汉化插件。当然,你也可以使用系统自带的记事本打开。

除了两份参考文档之外,如果你像我一样英文水平不高,你还需要另外一个神器

3、网易有道词典PC版

【屏幕划词】和【划词翻译】这两个功能一定要打开才有意义。

image-20210216003325644

作用在于,不管是【站点配置文件】还是【主题配置文件】中,都有很多作者注释,向你解释这些代码对应的功能。只不过是英文的,通过有道词典的划词搜索,哪怕你的英文水平有限,也能轻易看懂他们,只需要哪里不会点哪里。

image-20210216003613525

好了,万事俱备。我们可以开始进行配置了。

下面的内容,我会按照:目前在修改的配置文件-修改的目的-修改后的代码片段,的顺序来讲述。

代码片段方便你可以通过Ctrl+F查找代码关键词,定位到所修改文件对应的位置,进行修改。

一、修改站点配置文件

image-20210216002107767

1、填写博客中的基本信息

image-20210216105016765

参考Hexo文档中的说明,我们需要给博客设定主标题以及副标题、作者名称、语言、时区等,你可以参考以下我的设置。

# Site
title: 羽毛工作室
subtitle: '和有趣的人做尽有趣的事'
description: '羽毛工作室官方博客'
keywords:
author: 主理人:楚屹轩
language: zh-CN
timezone: 'Asia/Shanghai'

2、缩短文章链接长度

image-20210216110228103

默认的链接格式为:年份/月份/日期/文章标题/ 实际使用中,由于中文字符会进行转码,导致链接很长。所以这部分,我们主要就是修改链接格式,改为:年份/月份/日期/时-分-秒/ 以此避免出现中文字符。可以参考我的配置。

# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: http://blog.t-ssm.com #这里需要改成你自己的域名
root: /
permalink: :year/:month/:day/:hour-:minute-:second/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

Point:注意查找替换blog.t-ssm.com 为 你自己的域名

3、启用NexT主题

在站点配置文件大概100行前后的位置,找到 theme 属性,冒号后面加个空格,然后输入 next 即可(注意小写)

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

至此,主题便启用了。遇到问题或想了解与主题配置相关的高级设置。可以参考【NexT文档-启用主题说明】

二、修改主题配置文件

image-20210216002212918

1、设定主题风格

NexT提供了4种风格样式供我们选择。我个人偏好最经典且极简的Muse风格。你可以4种都体验以下。选择哪个风格,就删除掉对应风格名所在行前面的# 可以参考我的配置:

# Schemes
scheme: Muse
# scheme: Mist
# scheme: Pisces
# scheme: Gemini

2、博客主标题上方的logo

image-20210216112303188

选配项,你可以不设置。就算设置了,在手机端访问时,也会被隐藏。可以参考我的配置:

# Custom Logo (Warning: Do not support scheme Mist)主页logo
custom_logo: /uploads/logo.png

顺便一提,后面我们还会遇到 引用图片地址 的类似设置。【/uploads/logo.png】 对应的本地blog文件夹中位置是 【\blog\themes\next\source\uploads\logo.png】 其中【uploads】文件夹,和【logo.png】文件,都需要自己创建。

image-20210216112541229

3、版权信息声明

image-20210216113241793

网上有一大堆教程说,需要插件,需要改这个改那个,特别繁琐。其实根本不用,都是历史遗留问题。最新版本的NexT主题已经集成了大部分我们需要的功能。如果你需要版权声明,可以参考我的配置。

# Creative Commons 4.0 International License.
# See: https://creativecommons.org/about/cclicenses/
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
creative_commons:
  license: by-nc-sa
  sidebar: true #侧边栏中的版权标识
  post: true #每篇文章底部都显示版权信息
  language:

版权声明文本是可以修改的,我进行了一些编辑调整,后面会介绍到。

4、设置导航栏菜单

image-20210216113700512

我选择了最极简的功能,全站只设置【标签】功能,来进行文章分类。而没有用自带的【分类】功能,因为二者明显是冲突且重复的,同时启用反而会造成读者混乱。【归档】功能是按照时间线对文章进行排序,来展示站点全部文章目录。这些功能对我而言已经足够了。就算后续需要一个【页面】我也会选择自制H5单页挂在侧边栏的链接里,或者通过置顶谋篇文章的方式,这样配置过程最简单,用户体验也更友好。你可以参考我的配置

menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  #categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: false

启用哪个功能,就删除对应行前面的 # 更多设置方法,可以参考【NexT文档-菜单设置】

5、侧边栏设置

我习惯在右侧显示侧边栏,默认是左边。配置如下

sidebar:
  # Sidebar Position.
  # position: left
  position: right

默认自动折叠侧边栏,但是对我而言,侧边栏中的展示内容,补足了菜单栏中的不足。所以我选择尽可能永远显示。你也可以修改display属性的值为其他,我选择的是【always】配置如下

# Sidebar Display (only for Muse | Mist), available values:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically.
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  totally remove sidebar including sidebar toggle.
  display: always

设置侧边栏的头像,一般为作者的头像,和博客的logo有区别。

image-20210216120502546

可以是方形或圆形,还可以选择鼠标停留时,魔性的转动(我觉得有点闹心),你可以参考我的配置。

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /uploads/avatar.jpg #头像图片地址 
  # If true, the avatar will be dispalyed in circle.圆形选true 方形选false
  rounded: true
  # If true, the avatar will be rotated with the cursor.魔性转动,打开选true
  rotated: false

侧边栏外链,可以指向谋篇文章,或某个网址。这里我用来展示其他发布渠道。你可以参考我的配置。我没有使用fa-logo 觉得闹心。你可以自行设置。参考【NexT文档-侧边社交链接】

social:
  喜马拉雅FM: https://www.ximalaya.com/zhubo/11891282/ 
  新浪微博: https://weibo.com/6106797403
  今日头条: https://www.toutiao.com/c/user/token/MS4wLjABAAAAEdNrlthCzrTIwGgNkKQ1XDW2BNdhCuJvez-WTKNSVso/
  微信公众号: https://mp.weixin.qq.com/s/-hUYR2dOofvEP0COu4e5Tw
  知乎: https://www.zhihu.com/people/xuan-xuan-hen-you-qu
  简书: https://www.jianshu.com/u/d5a0632b1a40

Point:链接需要换成自己的。前面的描述也可以修改。例如 【显示名称: 链接地址】冒号后面有个空格。

image-20210216121331394

和外链样式不同的是友链。默认显示为【友情链接】我将其修改为【赞助商链接】。fa图标也修改了,你可以参考我的配置

# Blog rolls
links_settings:
  icon: fa fa-link
  title: 赞助商链接
  # Available values: block | inline
  layout: block

links:
  羽毛工作室官网: https://www.t-ssm.com/ 

增加友链的方法和外链类似。一行一个例如 【显示名称: 友链地址】冒号后面有个空格。

6、开启打赏功能

image-20210216122145352

一个比较鸡肋的功能,因为没人会打赏,如果为了赚钱的话,建议放个广告赚点展现量。可以百度搜索以下hexo中如何挂广告,我是没什么兴趣,会降低整体的颜值。选择开启打赏功能,是当时在纠结要不要输出一些付费文章,但静态博客很难做到加密访问,自制远不如去成熟的知识付费平台输出。

所以想到了这个有趣的玩法,先尝后买的感觉,付费内容免费读,先体验再买单。如果觉得不值1块钱,不支付即可,就当无理由退款了。至少比在线乞讨咖啡更有格调。哈哈哈

你可以参考我的配置。

reward_settings:
  # If true, a donate button will be displayed in every article by default.
  enable: true
  animation: false
  comment: Q:如果阅读本文需要付费,你是否愿意为此支付1元?

reward:
  wechatpay: /images/wechatpay.png
  alipay: /images/alipay.png

wechatpay属性为微信支付收款码。alipay则是支付宝收款码。在对应的图片地址放入图片即可。

按钮文本默认是【赞赏】我修改成了【我愿意资助创作者】修改方法后面会介绍到。

7、关注我的其他发布渠道

image-20210216123550141

博客没有主动推送消息的功能,RSS订阅的话,读者使用门槛比较高,我没有开启。考虑到有些读者还是希望能订阅到本站的更新,所以关联了一些主流的社媒平台。你可以参考我的配置。

# Subscribe through Telegram Channel, Twitter, etc.
# Usage: `Key: permalink || icon` (Font Awesome)
follow_me:
  微博: https://weibo.com/u/6106797403 || fab fa-weibo
  知乎: https://www.zhihu.com/people/xuan-xuan-hen-you-qu || fab fa-zhihu
  微信: https://mp.weixin.qq.com/s/-hUYR2dOofvEP0COu4e5Tw || fab fa-weixin

8、返回顶部按钮显示阅读进度

image-20210216122039205

一眼就爱上的功能,逼格满满且实用,你可以参考我的配置。

back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: true

9、关闭动画效果

主题中的渐出展开等js特效,确实比较炫酷。但是操作延迟也比较高,容易形成一种页面卡顿的错觉。看久了会审美疲劳,我选择关闭。毕竟实用才是最重要的。如果你有同感,可以参考我的配置

motion:
  enable: false
  async: false

至此,所有的配置都结束了,恭喜!

等等... 之前提到的修改【版权声明文本】以及【打赏按钮文本】还没介绍

三、自定义文本内容

image-20210216125408562

需要打开主题文件夹下的【languages】文件夹,找到【zh-CN.yml】文件并修改。

选择哪个语言文档,取决于你在本教程中【一、修改站点配置文件】第一步【填写博客中的基本信息】中所键入的language属性值。如果你是完全按照我的配置来,那么应该是 zh-CN 也就是对应着【zh-CN.yml】

Hexo 在生成的时候将使用属性名称查找对应的语言翻译,并提取显示文本。这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml{language} 为你所使用的语言)。

也就是说,整个博客中,所有你能看到的中文。都可以通过这个语言文档,进行修改。你可以参考我的配置

license_content: "本博客所有文章,均在可信时间戳认证机构完成确权,采用 %s 许可协议。转载请注明出处,侵权必究!商业性使用请联系主理人购买授权许可。"
donate: 我愿意资助创作者

Point:另外我把所有的【日志】改为了【文章】这样翻译我认为更人性,你也可以像我一样,用Ctrl+H 进行批量替换。

写在最后的话

这套配置,除了极简还是极简。没有使用任何插件,避免了安装插件可能会遇到的问题,以及插件间不兼容的问题。只是单纯的修改2个配置文件及1个语言文档。相信在站点迁移的时候,我会感谢自己。

关于没有进行任何seo优化,因为完全没必要。通过百度或Google搜索关键词进入博客的用户少之又少。就算不做seo优化,仍然可以通过,把文章同步发在知乎或简书,实现相同的目的,只需要一个外链引流到自己的博客地址即可,何必费时费力折腾seo呢。而且本身就是要发在其他社媒才有流量嘛。

关于搜索功能,我也没用,配置麻烦不说,这完全就是一个只能感动自己的功能。谁会在你的博客内搜索而不是用搜索引擎搜索呢。如果只是为了快速索引文章。那么做好文章分类,甚至自己编排一个文章目录,用户体验会更好。而且我始终认为。博客的文章,就是需要定期归档与整理的,这样才真正意义上免去内容沉积的问题,为读者创造最好的阅读体验。

甚至只要做好定期整理,删减汇编内容,还可以解决静态博客的通病,文章多了后渲染缓慢的问题。

有时间可以再详细写写,自己在运营层面的一些思考。总之,这套配置短时间内,是不可能改变了。

毕竟博客的意义还是在于不断创作内容,而不是折腾博客框架与配置。

推荐阅读更多精彩内容