最近博客的CSS被我玩坏了,顺带就对博客进行整体更新,并且对hexo、nexT的配置文件进行详细的记录。
Ps:每篇文章还弄了摘要格式!好累~~下一篇会写nexT主题的自定义优化。
由于使用hexo-neat插件压缩有问题,然后改用gulp进行压缩。发现来来回回都会有问题,并且提交到GitHub上之后,导致博客的CSS都出问题无法显示。发现nexT主题更新到6.0+,在GitHub上面的路径也换了,最终决定重新搭建博客。
准备
软件、环境这些可以参考博客搭建这篇文章搭建博客。
使用hexo init本地新建一个博客之后,下载最新的next主题。
1 | $ cd hexo |
配置
以前写的文章对Hexo、nexT的配置文件没有进行详细的说明,这次搭建的时候发现有点头痛!因此,这次准备把所用到的各个字段都进行记录,便于以后出现意外情况再次重建。
Hexo配置
Hexo的配置为hexo根目录下的_config.yml文件。
Site配置
用于配置站点的主要属性。
1 |
|
Url配置
用于配置Url请求时的主要属性。
Url这块我进行了优化,安装了hexo-abbrlink插件:让文章链接唯一化。在hexo根目录下执行$ npm install hexo-abbrlink --save
1 | # URL |
Directory配置
用于配置站点目录的主要属性。该部分的配置不需要修改。
1 |
|
Writing配置
用于配置写作时的主要属性。该部分的配置不需要修改。
1 | # Writing |
Home page配置
用于配置主页的主要属性。
1 | # Home page setting |
Category & Tag配置
用于配置分类、标签的主要属性。
1 |
|
Date配置
用于配置日期的主要属性。该部分的配置不需要修改。
1 | Date / Time format |
Pagination配置
用于配置分页的主要属性。
1 | # Pagination |
Extensions配置
用于扩展的主要属性。
plugin我加了hexo-generator-feed(用来生成RSS),theme我选择用next。
1 | Extensions |
Deployment配置
用于配置部署的主要属性。
我就选择部署到GitHub,还支持Heroku、Rsync、OpenShift、FTPSync等。可以参考官网说明。
部署到GitHub需要安装hexo-deployer-git插件,在hexo根目录下执行$ npm install hexo-deployer-git --save
。
1 |
|
search配置
用于配置搜索的主要属性。
启用搜索需要安装hexo-generator-search、hexo-generator-searchdb插件,在hexo根目录下执行
1 | $ npm install hexo-generator-search --save |
安装完之后还需要在nexT主题里面进行配置。后续会说到如何配置,稳住。
1 | search: |
feed配置
用于配置RSS。
RSS和ATOM的区别,可以参考这里。
1 | feed: |
hexo-neat配置
用于博客压缩,加快访问速度。
启用压缩需要安装hexo-neat,在hexo根目录下执行$ npm install hexo-neat --save
1 | # hexo-neat 静态资源压缩 |
hexo-encypt配置
用于文章加密。
启用文章加密需要安装hexo-blog-encrypt,在hexo根目录下执行$ npm install hexo-blog-encrypt --save
1 | # 文章加密功能 |
启用加密功能需要在文章的Front-matter部分添加password字段即可。建议修改post.md模版,目录为hexo\scaffolds\。
1 |
|
hexo-autonofollowp配置
用于外部链接优化,主要作用:
- 防止不可信的内容,最常见的是博客上的垃圾留言与评论中为了获取外链的垃圾链接,为了防止页面指向一些拉圾页面和站点。
- 付费链接:为了防止付费链接影响Google的搜索结果排名,Google建议使用nofollow属性。
- 引导爬虫抓取有效的页面:避免爬虫抓取一些无意义的页面,影响爬虫抓取的效率。
其主要方法是给所有外部链接加上rel=”external nofollow”属性,对外部链接target=”_blank”采用在新窗口种打开外部链接的方法。
启用该功能需要安装hexo-autonofollowp,在hexo根目录下执行$ npm install hexo-autonofollowp --save
1
2
3
4
5# 外部链接优化
nofollow:
enable: true
exclude: # 例外的链接,可将友情链接放置此处
- 'yousite'
sitemap配置
用于站点地图配置,主要用于SEO优化。
启用该功能需要安装hexo-generator-sitemap、hexo-generator-baidu-sitemap,在hexo根目录下执行
1 | npm install hexo-generator-sitemap --save |
配置如下
1 |
|
symblos_count_time配置
用于站点字数、阅读时间统计等。
启用该功能需要安装hexo-symbols-count-time,在hexo根目录和next主题目录下执行$ npm install hexo-symbols-count-time --save
。注意这里我是两个地方都执行。
1 | symbols_count_time: |
live2d配置
用于站点’吉祥物’设置,作用应该是美化站点吧。手动/斜眼笑!
想要吉祥物的话需要先安装hexo-helper-live2d,在hexo根目录下执行$ npm install hexo-helper-live2d --save
。接下来修改next主题目录的_layout.swig文件,路径为hexo\themes\next\layout\。在合适的地方给它安个家,要在body标签之间,例如
1 | <body>{{ live2d() }}</body> |
也可以看看喜欢什么吉祥物。
1 | live2d: |
lazyload配置
用于图片快速加载设置。
启用该功能需要安装hexo-lazyload-image,在hexo根目录在执行$ npm install hexo-lazyload-image --save
1 | lazyload: |
nexT配置
nexT的配置文件为next目录下的_config.yml文件,路径为hexo\themes\next_config.yml。由于nexT的配置较多,就记录修改或者启用的地方。配置文件中所填写的目录路径皆为/source目录下,例如修改图标来源将参数值设置成/images/favicon.ico的话,表示来源为hexo\themes\next\source\images\favicon.ico。
favicon设置
用于图标设置,效果显示在站点标签页的地方。
1 | favicon: |
keyword设置
用于关键字设置。
1 | keywords: "keyword1, keyword2, keyword3" |
rss设置
用于rss设置,结合hexo中的设置。
1 | rss: /atom.xml |
footer设置
用于页脚设置,nexT6.0可以在配置文件中设置页脚。以前用5.X的时候,需要自己手工去修改。所以及时更新很重要哦。
1 | footer: |
SEO设置
用于seo优化设置。
1 | canonical: true |
Menu设置
用于导航栏设置。这里的顺序会影响导航栏上显示布局的顺序。
1 | menu: |
Schemes设置
用于样式设置。我采用了Mist样式。
1 | scheme: Mist |
Sidebar设置
用于侧边栏设置。
1 | site_state: true #显示文章、分类、标签 |
POST设置
用于发布设置。
1 | scroll_to_more: true #如果文章有摘要(<!-- more -->),会自动滚动到摘要下面。 |
Code Highlight theme设置
用于代码主题设置。
1 | highlight_theme: normal |
needmoreshare2设置
用于分享设置。
1 | needmoreshare2: |
Local search设置
用于本地搜索,需要安装hexo-generator-searchdb。
1 | local_search: |
Reading progress bar设置
用于阅读进度设置,在top显示,需要扩展theme-next-reading-progress。
1 | reading_progress: |
pace设置
用于页面加载进度设置,我选用了pace-theme-loading-bar,需要扩展theme-next-pace。
推荐几个我个人感觉不错的:
- pace-theme-center-atom
- pace-theme-center-circle
- pace-theme-center-simple
- pace-theme-loading-bar
1
2pace: true
pace_theme: pace-theme-loading-bar
Canvas-nest设置
用于网页背景效果设置。
1 | canvas_nest: true |
Gitment设置
用于页面评论系统设置,本来选用Hypercomments,在样式上设置不好看。因此,换成了Gitment。需要扩展Gitmentnpm i --save gitment
。
1 | gitment: |
总结
两个配置文件弄得我满脸懵逼!!太难了~~
- 配置文件字段名和字段值中间需要空格;
- 部分插件安装、配置Hexo、nexT都需进行;
- 文章中存在特殊符号,需要使用三个单引号以代码形式,不然会报错;
- 所有配置文件icon都可以在fontawesome选择心仪的,替换即可;