上一篇文章讲了如何使用GitHub pages和如何使用hexo框架搭建博客,但是作为一个码农,博客还是要弄的花里胡哨一点的,怎么实现花里胡哨的博客,Next可以帮你
NexT主题
Hexo框架有自己默认的主题,如果不喜欢的话可以在Hexo官网和GitHub里找到很多主题,这些主题都提供了很丰富的功能,其中NexT主题是比较流行且文档比较齐全的主题
我们能在网上找到很多Hexo教程都会使用NexT的主题,但是这些文档中提供的的NexT下载地址很大一部分已经过时了,如果使用这些下载的地址,那么会导致切换主题,执行完clean-g-s三部曲之后,打开本地服务浏览器就会展示错误的信息
我们可以在NexT官网找到最新的主题,最简单的下载方式是通过Git来安装
git clone https://github.com/next-theme/hexo-theme-next themes/next
这是目前最新的Next下载地址
使用NexT主题
- 使用命令行,进入hexo所在的目录
cd hexo-site
- NexT有两种下载方式,npm和git
npm install hexo-theme-next
-
git clone https://github.com/next-theme/hexo-theme-next themes/next
执行任一即可,命令执行完成之后我们可以查看hexo-themes中多了next文件夹,next主题已经下载成功了
- 在_config.yml文件中编辑theme(善用command+F)
theme: next
需要注意空格
- 执行clean-g-s三部曲,在浏览器访问本地服务就可以看到页面的样式和原来已经不同了
编辑NexT主题
使用主题时需要注意一点,hexo框架和NexT主题都有_config.yml,为了方便起见我们分别称为hexo-config 和 next-config
- 查看全文
进入username.github.io主页时,页面会展示博客的全部内容,如果想改进的话可以在博文正文插入``来进行隔断,在这个标记之后的内容可以查看全文来进行阅读 - 修改favicon
- 在hexo文件夹-themes-next-source-images,添加图片
- 修改next-config文件中的favicon文件地址,修改成添加的图片名
- 增加博客文字计数以及阅读时间预估
命令行执行
cd hexo-site
npm install hexo-word-counter
Hexo和next的这个功能默认都是打开的,执行三部曲,查看本地服务就能看到博客标题下展示了字数和预估的阅读时间
- 添加评论
- 在Sign in to GitHub · GitHub注册一个OAuth,name、URL、callback URL必填,用自己的仓库的URL就可以,确认之后可以得到client_id和client_secret
- client_id和client_secret记录到Next-config文件的gitalk配置中,随后把enable改为true,github_id和admin_user输入自己的github用户名,repo输入自己仓库的名称(不是地址),其他配置不用更改(注意在:之后需要加空格)
- 执行三部曲,打开一个博客就可以在最下方看到提示需要用GitHub登陆初始化,推送到服务端就可以了
- 还有其他的评论系统可以参考next的官方文档
- Gitalk在加载的时候报了网络异常,暂时先使用changyan了(在changyan注册账号获取app_id和app_key,在next-config中找到'changyan',把enable改为true,输入信息,三部曲之后即可启用。在此之前需要把gitalk的enable先改为false)
-
鉴于畅言的随机头像是这样的[畅言头像
]我决定再换一个评论插件
- 我最后换成了来必力livere,注册完成之后需要在用户的管理页面-代码管理,在代码中找到data-uuid,复制后打开next-config中找到'livere',把uuid粘贴到livere_uid字段中,注意空格,随后执行三部曲,可以在本地页面上看到自己博客最下方增加了来必力的评论模块,但是比较可惜的是需要登录,至于为什么不用其他几种评论模块我可能会在后续写一篇博客来讲讲(也有可能不讲)
- 进行上面的操作之后,博客会稍微变得有更人特色一些,还有很丰富的第三方插件可以使用,更多的用法可以移步NexT的官方文档,点击此处可跳转。