前面已经搭建好了个人博客,接下来就是装饰一下自己的网站,毕竟是属于自己的地盘,还是想让它精美一些,一方面自己能看着舒服,给自己坚持写博客添加一些动力;另一方面,精美的博客界面是给读者的第一印象,好的界面可以吸引更多的人访问,下面介绍 NexT 主题(GitHub 评分最高)
一、安装 NexT 主题
-
有两种方式可以进行安装,一种是安装稳定版本(已经不再维护),一种是安装最新版本,这里我们安装最新版本,执行下面的命令:
$ cd your-local-blog-site $ git clone https://github.com/theme-next/hexo-theme-next themes/next
完成以后,打开
/themes
文件夹,可以看到其中有next
文件夹,这样主题就安装成功了
二、启用主题
首先说明,现在有两个配置文件,名称都是
_config.yml
;其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。为了描述方便,在以下说明中,将前者称为 站点配置文件, 后者称为 主题配置文件。
打开 站点配置文件, 找到
theme
字段,并将其值更改为next
-
验证:
hexo clean # 清除缓存 hexo g hexo s # 可以看到: Hexo is running at http://localhost:4000 . Press Ctrl+C to stop. # 打开对应的网址,就可以看到主题已经变成 next 了
-
推送到远程:【后面的操作,只要是推送到远程仓库,都可以执行下面的命令】
hexo clean # 清除缓存,选做 hexo g -d
这样就可以在自己的站点看到安装好的 next 主题了【有可能需要登上半分钟,并清除浏览器缓存】
三、远程仓库上备份本地文件【可选】
因为站点实际上是部署在本地的,现在在 GitHub 上只有一些静态文件,一旦本地文件丢失挥着损坏,就要重新搭建网站,甚至文章也会丢失,为了在这种情况发生的情况下能够快速恢复本地站点,可以在 GitHub 上新建分支,用于备份本地文件
-
假设之前我们的本地站点文件夹为
blog
,在其他合适的位置新建文件夹hexo
,将GitHub远程仓库复制到本地git clone your-repo hexo
-
删除除了版本控制
.git
之外的所有文件cd hexo rm -r *
将
blog
文件夹下的所有文件复制到hexo
文件夹-
如果使用的主题是从Github克隆的,那么使用命令删除它的Git文件(以next主题为例),否则无法将主题文件
push
rm -r themes/next/.git*
-
配置 GitHub
-
创建新分支
hexo
git checkout -b hexo
-
推送到
hexo
分支git add . # 保存到暂存区 git commit -m "创建 hexo 分支" git push --set-upstream origin hexo
-
现在原来的
blog
文件夹就可以删除了,当然最好先修改名字备份一下,否则出现意外就不好了
-
-
以后的更新操作:
-
更新到
master/main
分支,用来更新站点hexo g -d
-
备份到
hexo
分支,更新远程仓库的本地备份git add . git commit -m "备注" git push
-
四、优化 NexT 主题
-
首先说一下调试问题,可以使用下面的命令查看本地修改的效果
hexo clean hexo g hexo s
其次,下面的修改都是修改主题配置文件
1) 修改 Schemes
-
有四种可以选择,选择自己喜欢的即可
# Schemes scheme: Muse #scheme: Mist #scheme: Pisces #scheme: Gemini
2) 设置站点 icon
- 下载地址:iconfont
- 将下载的 icon 放置在
/themes/next/source/img/
文件夹中 - 修改主题配置文件中
favicon
中的内容,如果是直接替换原来的文件则不需要修改
3) 设置菜单栏
-
编辑主题配置文件,修改
menu
中的内容,将想要展示的内容取消注释menu: home: / archives: /archives #about: /about categories: /categories tags: /tags #commonweal: /404.html
-
手动创建页面
# 在站点的根目录 # 下面分别创建 about categories tags 页面 hexo new page about hexo new page categories hexo new page tags
-
修改
type
创建页面之后,在
source/
目录中可以看到新创建的页面-
修改其中的
index.md
文件,增加:# 下面是 tags 页面的,categories 页面则是 categories type: tags
这样修改之后,可以在本地运行并验证一下,可以看到本地的博客菜单栏中,可以显示添加的页面
-
添加公益404,方法跟上面一样,只不过在
index.md
文件中添加下面的代码:<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8;"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="robots" content="all" /> <meta name="robots" content="index,follow"/> <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css"> </head> <body> <script type="text/plain" src="http://www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="/" homePageName="回到我的主页"> </script> <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script> <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script> </body> </html>
4) 配置回到顶部按钮
- 修改主题配置文件,将back2top的enable设置为true即可,边栏和滚动百分比可以按照需求自行添加。
5) 设置已读进度条
- 将
reading_progress
的enable设置为true即可,位置颜色和高度都可以调整
6) 边角的 GitHub banner
-
在主题配置文件中修改
github_banner
字段github_banner: enable: true permalink: https://github.com/code-wd title: Follow me on GitHub
7) 设置头像
- 编辑主题配置文件,修改字段
avatar
,值设置成头像的地址;通常图片放在/themes/source/images/
中 - 其中可以设置头像的形状,以及旋转动画
8)设置社交界面
- 编辑主题配置文件,修改
social
字段,将想要展示的部分去除注释 - 在
social_icons
中可以进行相关设置
9) 设置语言
- 打开
themes/next/languages/
可以看到支持的语言 - 编辑站点配置文件,填入 language 字段,注意官网上给的简体中文是
zh-Hans
但是,实际上,需要按照自己 languages 文件夹中的方式命名
10) 打赏
首先,要将支付宝或者微信打赏的二维码下载下来,可以修剪一下,放在
/themes/next/source/images
文件夹中-
修改主题配置文件:
reward_settings: # If true, reward will be displayed in every article by default. enable: true animation: false #comment: Donate comment here. reward: wechatpay: /images/wechatpay.png alipay: /images/alipay.jpg #paypal: /images/paypal.png #bitcoin: /images/bitcoin.png
11)代码样式
- 编辑主题配置文件,搜索
codeblock
,选择自己想要的代码样式即可
12) 评论功能
注册
LeanCloud
账号, 创建一个应用,在这个应用的设置中可以看到关键信息-
编辑主题配置文件,修改
valine
字段:
13) 添加背景动画
-
安装依赖,在
themes/next/
文件夹下,执行:git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest
-
编辑主题配置文件,在文件的动画位置(找到
canvas_ribbon
就可以)添加下面的字段:canvas_nest: enable: true #开启canvas onmobile: true # 是否在移动站开启canvas color: '34,34,34' # 颜色值 opacity: 0.5 # 数值 0~1 ,线条透明度 zIndex: -1 # 背景叠层大小,-1代表放在文章的后面 count: 200 # 线条数量
14) 添加本地搜索
-
在站点根目录中执行下面的命令:
npm install hexo-generator-searchdb --save
-
编辑站点配置文件,新增下面的内容
search: path: search.xml field: post format: html limit: 10000
-
编辑主题配置文件,启动本地搜索功能
# Local search local_search: enable: true
15) 添加 本文结束 标记
-
在
/themes/next/layout/_macro/
文件夹中新建文件passage-end-tag.swig
,文件中写入:{% if theme.passage_end_tag.enabled %} <div style="text-align:center;color: #ccc;font-size:14px;"> ------ 本文结束<i class="fa fa-paw"></i>感谢您的阅读 ------</div> {% endif %}
-
在
/themes/next/layout/_macro/
中打开文件post.swig
,在post-body
之后,post-footer
之前添加下面的代码:<div> {% if not is_index %} {% include 'passage-end-tag.swig' %} {% endif %} </div>
-
修改主题配置文件,在最后添加:
passage_end_tag: enabled: true
-
最终效果:
16) 修改背景图片以及博客整体样式
-
修改主题配置文件,找到
custom_file_path
字段,如下修改:custom_file_path: #head: source/_data/head.swig #header: source/_data/header.swig #sidebar: source/_data/sidebar.swig #postMeta: source/_data/post-meta.swig #postBodyEnd: source/_data/post-body-end.swig #footer: source/_data/footer.swig #bodyEnd: source/_data/body-end.swig #variable: source/_data/variables.styl #mixin: source/_data/mixins.styl style: source/_data/styles.styl
-
在站点根目录的
source
文件夹下新建_data
文件夹,并在其中新建styles.styl
文件,配置如下://全局布局美化代码 body { background-image:url(/images/Background.jpg); //背景图片地址 background-repeat: no-repeat; background-attachment: fixed; background-position: center; } //博客内容透明化 //文章内容的透明度设置 .content-wrap { opacity: 0.85; } //侧边框的透明度设置 .sidebar { transition-duration: 0.4s; opacity: 0.85; // 透明度 border-radius: 30px 30px 30px 30px; //边框圆角 } // 侧边头像框内部 .sidebar-inner { background: var(--content-bg-color); border-radius: 30px 30px 30px 30px; //边框圆角 box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12), 0 -1px 0.5px 0 rgba(0,0,0,0.09); box-sizing: border-box; color: var(--text-color); width: 240px; opacity: 0; box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12); } //菜单栏的透明度设置 .header-inner { background: rgba(255,255,255,0.85); border-radius: 0px 0px 30px 30px; //边框圆角 box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12); } //搜索框(local-search)的透明度设置 .popup { opacity: 0.85; } //第一篇博客样式 .post-block { background-color: rgba(255, 255, 255, 1); margin-bottom: 24px; padding: 20px; border-radius: 0px 0px 30px 30px; box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12); } //除第一篇博客之外的博客样式 .post-block + .post-block { background-color: rgba(255, 255, 255, 1); //margin-top: 24px; margin-bottom: 24px; padding: 20px; border-radius: 30px 30px 30px 30px; box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12); }
-
最终效果:
17) 增加字数统计
- 请参考这篇文章
18) 标签设置
修改文章底部的
#
标签:修改模板/themes/next/layout/_macro/post.swig
,搜索rel="tag">#
,将其中的#
换成<i class="fa fa-tag"></i>
-
标签云设置:
-
安装插件:
npm install hexo-tag-cloud@^2.0.* --save
配置插件
-
19) 添加 RSS
- 请参考文章,地址
20) 博文压缩
.md
文件转化为html
文件之后会有很多空格,这个可以防止这些空格带来的性能的损失-
安装
hexo-neat
npm install hexo-neat --save
-
配置:编辑 站点配置文件 ,在末尾加上下面的代码:
# hexo-neat # 博文压缩 neat_enable: true # 压缩html neat_html: enable: true exclude: # 压缩css neat_css: enable: true exclude: - '**/*.min.css' # 压缩js neat_js: enable: true mangle: true output: compress: exclude: - '**/*.min.js' - '**/jquery.fancybox.pack.js' - '**/index.js' - '**/clicklove.js' - '**/firework.js'
注意:可能会有部分插件压缩后报错,在
exclude
里面添加对应的文件就可以取消压缩了感谢大佬:Next主题美化
21) 标签云
- 请看 大佬博文
22) 修改 back2top 样式
-
安装依赖:
npm install hexo-cake-moon-menu --save
-
修改站点配置文件,添加下面的内容:
moon_menu: back2top: enable: true icon: fa fa-chevron-up func: back2top order: -1 back2bottom: enable: true icon: fa fa-chevron-down func: back2bottom order: -2
修改主题配置文件,将其中的
back2top
修改为false
23)加密功能
-
安装依赖
npm install hexo-blog-encrypt --save
-
使用方法:【文章开头添加】
--- title: your-blog-title declare: true toc: true tags: - xxx categories: - xxx mathjax: true +password: +abstract: 有东西被加密了,请输入密码查看 +message: 请输入密码 ---