由 IIssNan 开发的 NexT 已经停止维护&＃xff0c;我们采用的是社区维护版的 NexT v6 and v7&＃xff0c;但原版的中文说明文档是编得极好的&＃xff0c;是重要的参考来源^1。
不过由于社区版的和原版已经产生了较大区别&＃xff0c;还是更推荐看社区版的说明文档^2。
本文一般是通过修改 主题配置文件 _config.yml来实现各种配置&＃xff0c;这种情况下不需要重新渲染发布等操作&＃xff0c;修改完后直接保存再刷新网页即可看到效果。
主题设置
Scheme 是 NexT提供的一种特性&＃xff0c;借助于 Scheme&＃xff0c;NexT为你提供多种不同的外观。同时&＃xff0c;几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT支持三种 Scheme&＃xff0c;他们是&＃xff1a;
Muse→ 默认 Scheme&＃xff0c;这是 NexT最初的版本&＃xff0c;黑白主调&＃xff0c;大量留白Mist→ Muse 的紧凑版本&＃xff0c;整洁有序的单栏外观Pisces→ 双栏 Scheme&＃xff0c;小家碧玉似的清新Gemini→ 看起来像Pisces&＃xff0c;但是不同文章直接用块隔开&＃xff0c;看起来更舒服
个人比较推荐 Gemini &＃xff0c;其次Mist。
Scheme 的切换通过更改 主题配置文件&＃xff0c;搜索 scheme 关键字。 你会看到有四行 scheme 的配置&＃xff0c;将你需用启用的 scheme 前面注释 # 去除即可。
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
菜单设置
可以看到目前为止我们的主题菜单中只有两个默认的选项Home和Archive&＃xff0c;我们还可以添加tag、about、category等选项^3。
我们先在HexoBlogthemesnext下找到 主题配置文件 _config.yml中找到Menu Settings。
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
# Usage: &＃96;Key: /link/ || icon&＃96;
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
# Value before &＃96;||&＃96; delimeter is the target link.
# Value after &＃96;||&＃96; delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.
# External url should start with http:// or https://
menu:home: / || home#about: /about/ || user#tags: /tags/ || tags#categories: /categories/ || tharchives: /archives/ || archive#schedule: /schedule/ || calendar#sitemap: /sitemap.xml || sitemap#commonweal: /404/ || heartbeat# Enable / Disable menu icons / item badges.
menu_settings:icons: truebadges: false
阅读注释&＃xff0c;我们可以知道Menu Settings中的Usage采用Key: /link/ || icon的格式。
Key是菜单项 (home, archives, etc.)&＃xff0c;我们可以通过HexoBlogthemesnextlanguages中的zh-CN.yml文件查看menu中是否有对应项的翻译。
例如若该文件中有tags项&＃xff0c;那么博客中对应处就会显示对应翻译标签&＃xff0c;若没有则会采用原单词tags&＃xff0c;当然你也可以自行修改。
/link/在 || 之前&＃xff0c;指网站中该菜单项的链接。icon 在 || 之后&＃xff0c;指该菜单项的图标&＃xff0c;对应 Font Awesome 中图标的名字。
而 icons: true可用于控制是否显示图标&＃xff0c;你可以设置成 false 来去掉图标。
而 badges就是显示该菜单项内子类的数目。
在菜单图标开启的情况下&＃xff0c;如果菜单项与菜单未匹配&＃xff08;没有设置或者无效的 Font Awesome 图标名字&＃xff09; 的情况下&＃xff0c;NexT 将会使用 ? 作为图标。
添加标签项
我们先把 tags 前的注释符 # 删了。
menu:home: / || home#about: /about/ || usertags: /tags/ || tags#categories: /categories/ || tharchives: /archives/ || archive#schedule: /schedule/ || calendar#sitemap: /sitemap.xml || sitemap#commonweal: /404/ || heartbeat
然后创建一个tags页面&＃xff1a;在HexoBlog目录下右键打开Git Bush&＃xff0c;输入hexo new page tags&＃xff1a;
theigrams&＃64;Theigrams MINGW64 /c/D/Hexo/Blog
$ hexo new page tags
INFO Created: C:DHexoBlogsourcetagsindex.md
这时候你的source/下会生成 tags/index.md 文件&＃xff0c;我们将其打开&＃xff0c;然后在最后面加上两行&＃xff1a;
type: "tags"
comments: false
这时候你要为你的文章打上标签就可以在文章的头部写上&＃xff1a;
添加分类和自我介绍
同上&＃xff0c;先把 categories about 前的注释符 # 删了&＃xff0c;然后创建页面
hexo new page categories
hexo new page about
打开categories/index.md 和 about/index.md 文件&＃xff0c;在最下面加上分别两行&＃xff1a;
type: "categories"
comments: false
type: "about"
comments: false
这时候你就可以给你的文章归类存档了&＃xff0c;使用方式就是在你的文章的头部加上&＃xff1a;
设置预览摘要
这个博客目前已经像模像样了&＃xff0c;但仍有一点不足&＃xff0c;那就是首页将文章所有的内容都显示出来了。
这时候可以启用预览摘要模式&＃xff0c;在主题配置文件 中找到auto_excerpt属性&＃xff0c;将false设置为true &＃xff0c;将length设置为想要预览到的字数&＃xff0c;如下图所示&＃xff1a;
# Automatically Excerpt (Not recommend).
# Use in the post to control excerpt accurately.
auto_excerpt:enable: truelength: 300
正如注释所说&＃xff0c;这样的预览效果不是很好&＃xff0c;推荐的方法是自己选择在要折叠处输入^4
这样子就好看多了
设置侧边栏
设置侧边栏位置
可以通过修改 主题配置文件 中的 sidebar 字段来控制侧栏的行为。
侧栏的设置包括两个部分&＃xff0c;其一是侧栏的位置 position&＃xff0c; 其二是侧栏显示的时机 Display&＃xff08;但该选项对Gemini 样式无效&＃xff09;^5
sidebar:# Sidebar Position, available values: left | right (only for Pisces | Gemini).position: left#position: right# Manual define the sidebar width. If commented, will be default for:# Muse | Mist: 320# Pisces | Gemini: 240#width: 300# Sidebar Display, available values (only for Muse | Mist):# - 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: post# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).offset: 12# Enable sidebar on narrow view (only for Muse | Mist).onmobile: false# Click any blank part of the page to close sidebar (only for Muse | Mist).dimmer: false
设置侧边栏社交链接
搜索关键字 social&＃xff0c;然后添加社交站点名称与地址即可。
social:GitHub: https://github.com/Theigrams || githubE-Mail: mailto:15091060&＃64;buaa.edu.cn || envelope知乎: https://www.zhihu.com/people/zj_theigrams || quoraCSDN: https://blog.csdn.net/qq_36790747 || codiepie
明明在Font Awesome上找到了知乎图标&＃xff0c;但不知道为啥就是在博客中加载不出来&＃xff0c;
没办法就只好用 quora 的图标来代替了。
同样的&＃xff0c;也没找到 CSDN 的图标&＃xff0c;只好找了个相似的代替。
设置头像
默认设置侧边栏是不显示头像的&＃xff0c;不过我们可以编辑 主题配置文件 来添加头像&＃xff0c; 查找字段 avatar
# Sidebar Avatar
avatar:# In theme directory (source/images): /images/avatar.gif# In site directory (source/uploads): /uploads/avatar.gif# You can also use other linking images.url: /images/head_img.gif# If true, the avatar would be dispalyed in circle.rounded: false# The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.opacity: 1# If true, the avatar would be rotated with the cursor.rotated: false
将照片存在目录 HexoBlogthemesnextsourceimages下&＃xff0c;然后取消 url的注释&＃xff0c;并在后面填入照片的路径。
rounded选项决定照片框是圆还是方的。
opacity 调节头像的不透明度。
rotated 设置鼠标移动到头像上时是否旋转。
显示当前浏览进度
搜索关键字 scrollpercent &＃xff0c;把 false 改为 true&＃xff0c;即可在右下角显示浏览进度&＃xff0c;并单击可返回顶部。
back2top:enable: true# Back to top in sidebar.sidebar: false# Scroll percent label in b2t button.scrollpercent: true
把 sidebar 改成 true 可以把该部分移到左边目录下。
设置代码高亮主题
NexT使用 Tomorrow Theme 作为代码高亮&＃xff0c;共有5款主题供你选择。
NexT默认使用的是 白色的 normal 主题&＃xff0c;可选的值有 normal&＃xff0c;night&＃xff0c; night blue&＃xff0c; night bright&＃xff0c; night eighties&＃xff1a;
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night bright
更改 highlight_theme 字段&＃xff0c;将其值设定成你所喜爱的高亮主题。
添加背景动画
搜索Canvas-nest 定位到这个位置&＃xff0c;我们先把 enable: false 改成 enable: true
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest:enable: trueonmobile: true # display on mobile or notcolor: "148,0,211" # RGB values, use &＃39;,&＃39; to separateopacity: 0.5 # the opacity of line: 0~1zIndex: -1 # z-index property of the backgroundcount: 150 # the number of lines
然后点进第二行的Github链接&＃xff0c;根据说明文档安装 canvas-nest.js。
color: 线条颜色, 默认: &＃39;0,0,0&＃39; &＃xff1b;三个数字分别为(R,G,B)&＃xff0c;注意用,分割opacity: 线条透明度&＃xff08;0~1&＃xff09;, 默认: 0.5 count: 线条的总数量, 默认: 99 zIndex: 背景的z-index属性&＃xff0c;css属性用于控制所在层的位置, 默认: -1
之后刷新网页应该就能看到效果。
我选择的颜色是深紫罗兰色&＃xff0c;透明度还是调成 0.5 防止干扰正常阅读博客。
参考网页
[1] https://theme-next.iissnan.com/getting-started.html
[2] https://theme-next.org/docs/getting-started/
[3] 关于HEXO搭建个人博客的点点滴滴
[4] Hexo的Next主题详细配置
[5] Hexo搭建的GitHub博客之优化
京公网安备 11010802041100号