Hexo 博客主题 Next 自定义参考

2019-10-06 笔记本

最近制作了一款新主题:「Cards」,就是现在你们看到我博客使用的主题!


前言

如果按照上期的预期,大家现在应该已经可以发布自己的文章了,可是感觉还是有那么一点不尽人意。好像这不是我 exactly want ,这貌似违背了我们 “As I like” 的初衷。所以这期就教大家一些个性化设置,不一定要完全按着这里来,我只是指出一些可以自定义的地方,和我是如何修改的,具体怎么来还是要看大家的喜好。

提示 :本文大部分需要修改的文本格式比较偏,Windows 用户可以用 notepad++ ,Mac / Linux 用户可以使用 vim 编辑 这个教程 ,以免出错,具体使用可以自行搜索 。

大致步骤:

  1. 修改博客名字、说明等
  2. 安装主题
  3. 选择样式
  4. 添加 关于/about 页面
  5. 添加 标签/tags 页面
  6. 添加 分类/categories 页面
  7. 添加 404 页面
  8. 设置文章折叠
  9. 头像 (我没有添加)
  10. 社交账号
  11. 友情链接
  12. 背景图片
  13. 动态背景
  14. 各版块透明度
  15. 评论插件
  16. 博客加密插件
  17. 顶置插件
  18. 版权声明
  19. 替换掉标签前的“#”
  20. 添加博客统计功能
  21. 站内搜索功能

这些只是我想到的,排序逻辑可能比较凌乱,欢迎留言建议

可能还有许多很好的美化,也可以留言告诉我们

修改博客名称,修饰等

打开 博客根目录 下的 _config.yml (以下简称为博客配置博客配置文件)

其中:

title : 博客名称

subtitle:副标题

description:介绍

keywords:关键词

author:作者

language:博客语言

这些根据自己修改就好

安装主题

Hexo 正因为其有很高的可玩性才大受追捧,其中主题就是很重要的一块,大家可以去 Hexo-themes 官网 寻找自己喜欢的主题。我用的是 nexT 主题,这是 Hexo 主题中获赞数最多的,自定义程度很高,有很大的可玩性。所以之后的配置教程都是以 nexT 为例,其他主题的也可类比。

你可以在 GitHub 上下载 nexT 的主题配置文件,将其解压到 /themes 这个文件夹下

你也可以将 Git Bash 定位到 /themes 这个文件夹,然后 Git clone 主题配置文件,具体命令在主题的 GitHub 主页或 Readme 中应该会有。

然后在博客配置文件中,将 theme 设置为你的配置名称,即可

选择样式

nexT 自带 4 个样式,分别是 Muse , Mist , Pisces , Gemini

去掉前面的注释符“#”选用,按自己喜好选即可。

新建 About 页面

在博客根目录运行 Git Bash ,输入:

hexo new page "about"

即可新建 About 页面,可以放博主的自我介绍等。

然后在 /themes/next/_config.yml (以下简称主题配置主题配置文件)

about 前的注释符删掉。

新建 tags,categories,404 页面

类似 新建 about 页面操作,不再赘述。

其中 404 页面可以换成腾讯公益 404 (弘扬社会正能量?) 。

设置文章折叠

nexT 默认所有文章都会在主页预览全部,如果文章长的话很不美观,易用性也会降低,我们可以在 主题配置 中设置找到 auto_exccerpt 里把 enable 调成 true 即可

其中:length 是指默认预览的长度 (我直接全部折叠了)

设置头像

准备一张头像的图片,命名为avatar.jpg,然后,将图片放在/themes/next/source/images/文件夹下

然后修改 主题配置文件 找到 avatar 选项

url 设为:/images/avatar.jpg

社交账号

在主题配置中的 social 下:

可自行添加。

social icon :图标,详见:FontAwesome

友情链接

在主题配置的 links 下:

links 下按 title: website 的格式即可

背景图片

themes/next/source/css/main.styl 里搜索 Custom 在下面添加:

body {
background: url(); //可以是本地目录,也可以说在线链接。
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}

动态背景

nexT 默认就带了许多动态背景,大家按喜好设置即可。由于我本身就有不是纯色的背景,就只添加了 canvas_nest ,不然可能太眼花缭乱,而且易读性会下降。

设置各版块透明度

费了许多心思设置好了背景,结果被主板的背景挡住?这里就需要修改版块的透明度了。

由于我使用的 Schemes : Pisces 的,你们根据你选择的样式需定位目录

  1. 文章部分

    在文件 /themes/next/source/css/_schemes/Pisces/_layout.styl.content-wrap 的标签下

    background : 后修改为 rgba(255,255,255,0.x)

  2. 菜单栏

    在文件 /themes/next/source/css/_schemes/Pisces/_layout.styl.header-inner 的标签下

  3. 根目录

    在文件 /themes/next/source/css/_schemes/Pisces/_layout.styl.sidebar 的标签下

  4. 侧边栏

    在文件 /themes/next/source/css/_schemes/Pisces/_sidebar.styl.sidebar-inner 的标签下

评论插件

博主之前使用的是 Gitalk ,后来由于不是所有人都有 GitHub 账号,还是不需要账号的就可以评论的 valine 好用一点,管理也方便。nexT 自带许多评论插件,大家可以自行斟酌,我就以 valine 为例。

valine 是基于 leancloud 的评论插件,leancloud 的开发版 (免费) 已经完全够我们用了,去官网注册后,新建一个应用。

然后在「应用 - 设置 - 应用keys」里将 AppID 和 AppKey 复制到主题配置的相应位置

并将 enable 调成 ture

其中:

placeholder 为在评论框中的话

avator 是头像,详情参照官网。

verify 是验证

notify 通知 (要在 leancloud 里另外设置)

pagesize 是每页评论数

guest_info 是评论者需要填写的信息

comment_count 是评论统计

博客加密插件

hexo 已经自带了加密插件,在博客配置下中启用

然后在你需要加密的 post 的头文件中添加:

password: 12345
abstract: Welcome to my blog . Enter password to read .
message: Welcome to my blog . Enter password to read .

插件官方 GitHub

顶置插件

安装新的库:(Git Bash)

$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

然后在你需要顶置的 post 的头文件中添加:

top: 100 //随便一个数字,数字越大优先级越高

添加顶置标签

themes/next/layout/_macro/post.swig 文件里定位到 <div class="post-meta"> 标签下,插入:

{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color=7D26CD>置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}

Done .

版权声明

nexT 主题自带,在主题配置中搜索 creative_commons

在需要的地方调成 true 即可。

替换标签前的“#”

默认的标签前面是一个#号,我们把它改成标签的符号:

修改模板/themes/next/layout/_macro/post.swig,搜索rel="tag">,将第一个字段替换成<i class="fa fa-tag"></i>

注意不要全部替换,否则后面的标签内容就显示不了了。

博客统计

详见 ChrAlpha - Cloudflare Worker 配合 Google Analytics 管理网站流量

站内搜索

博客根目录下输入: (Git Bash)

$ npm install hexo-generator-searchdb --save

然后在博客配置中加入

search:
path: search.xml
field: post
format: html
limit: 10000

最后在主题配置中,搜索 local_search ,将 enable 改为 true

Done !

RSS 订阅

  1. 安装插件 (Hexo 根目录下):

    npm install hexo-generator-feed
  2. 根目录配置文件中加入:

    plugin:
    - hexo-generator-feed
    feed:
    type: atom
    path: atom.xml
    limit: 20
  3. 主题配置中添加:

rss: /atom.xml
  1. 重新 Generate 即可。

尾巴

其实这些内容不能算是我的,我只是看了许多许多教程后总结一下而已。所以还是要感谢互联网上那些热与分享的 朋友们。

我一个人的想法肯定不全,希望路过也可以留言分享一下。

本文作者:ChrAlpha

文章默认使用 CC BY-NC-SA 4.0 协议进行许可,使用时请注意遵守协议。

本文链接: https://blog.ichr.me/post/hexo-theme-next-diy-configuration/

笔记本

评论

您所在的地区可能无法访问 Disqus 评论系统,请切换网络环境再尝试。