Next主题设置
由于本站使用Next主题,且对本主题做了相关修改化设置,所以单独一篇文章合并主题设置相关文章。
菜单项的开启和设置
打开主题配置文件 _config.next.yml ,然后搜索 menu ,找到如下部分
1
2
3
4
5
6
7
8
9
10
11
12
13# Usage: `Key: /link/ || icon`
# 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 `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# External url should start with http:// or https://
menu:
home: / || fa fa-home
about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
# categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
# schedule: /schedule/ || fa fa-calendar
sitemap: /sitemap.xml || fa fa-sitemap
# commonweal: /404/ || fa fa-heartbeat将要在首页显示的menu项前的注释符去掉,则开启对应项。但是在重新使用
hexo g
生成后,可以看到新增menu项,单击后却出现如下错误
1 | Cannot GET /about/ |
这是因为还没有构建相关页面,执行如下命令新建相关页面
1 | hexo n page "about" |
运行后会在source文件夹下创建about、tags、categories文件夹,每个文件夹下会有创建一个index.md文件,编辑这三个文件可以自定义相关内容。
- 打开各index.md文件,添加type,即可
1 | --- |
站点地图(sitemap)
简介
站点地图描述了一个网站的架构。 它可以是一个任意形式的文档,用作网页设计的设计工具,也可以是列出网站中所有页面的一个网页,通常采用分级形式。这有助于访问者以及搜索引擎的爬虫找到网站中的页面。
Hexo生成 sitemap
- Google版本
1 | # npm install hexo-generator-sitemap --save |
- Baidu版本
1 | # npm install hexo-generator-baidu-sitemap --save |
- 生成站点地图
安装完成,在_config.yml 中找到url,改成自己的域名
1 | url: http://fengzhenhua-vip.github.io |
这样,每次使用hexo g
生成文件时,会自动在public文件夹下生成sitemap.xml和baidusitemap.xml分别用于Google和百度。
- 查看
使用hexo d
提交后,通过域名/sitemap.xml
或域名/baidusitemap.xml
可以进行诘问sitemap.
最后到Google或百度对应的站长工具进行提交sitemap就可以了。
Next主题加入本地搜索
时间久了,写的文章越来越多,这就需要加入一个本地文章搜索功能。自然的步骤就是百度一下别人的教程,但是按照网上的方法设置在Next主题上并不能正常的工作,所以我打开Next主题官网,按照说明文档逐步操作,完美解决问题,本文记录这个正确的设置方法。
在Hexo根目录下,安装hexo-generator-searchdb
执行命令:
1
2$cnpm install hexo-generator-searchdb --save
$npm install hexo-generator-searchdb --savecnpm
更快一些,这两个命令使用哪一个都行。
编辑站点配置文件
,加入以下内容 1
2
3
4
5
6
7$ vim ~/xxxx/_config.yml
search:
# path: search.xml
path: search.json
field: post
content: true
format: html
这里的搜索框有时候图显示不正常,在2022-05-10
我对Next主题进行了一次升级,在升级之前我使用path: search.xml
才可以正常显示图示,但是升级后不能正常显示,于是改成
path:search.json
后又可以正常显示了。目前不能判断具体原因,今后若再升级Next主题,则检查此项设置。
1 | search: |
1 | $ vim ~/xxxx/_config.next.yml |
1 | $ hexo clean |
自定义NexT主题
由于目前互联网网站充满了广告,同时流氓软件层出不穷,为了更好的办公我专门构建了一个主页网站,收录了教师平时经常登录的办公网站及平时工作中需要的软件,这些软件都是多年来我自己实践出来的良心软件或开源软件。但是基于Next主题构建的网站,是博客风格,不太符合主页的要求。于是决定进行改造,本文就是记录对Next主题的修改操作。
修改页面大小
1 | $ vim ~/XXXX/themes/next/source/css/_variable/Muse.styl |
由于网站基于主题Muse,所以对此主题风格修改,上面是后两行是做的修改。
去除日志的标题
由于作为主页来讲不需要日志的标题,所以这一点通过修改主题来防止Hexo自动生成日志标题。即
1 | $vim ~/XXXX/themes/layout/_macro/_post.njk |
修改网站标题的背景
1 | $ vim ~/XXXX/themes/next/source/css/_schemes/Muse/_header.styl |
其中.bradn
设定了标题底色为黑色,这里去除即可。
修改网站标题的字号及颜色
1 | $ vim ~/XXXX/themes/next/source/css/_variables/base.styl |
以上修改,需要找到文件的 Site Meta
字符,然后在第215行,修改了网站标题字号为2.875em
,第216行修改small
为large
,
第217行修改为LightBlue
。至此完成主页网站的修改,由于在修改中及编写网站时需要设置字体颜色,这里使用Html实现,各颜色名称参考:Html颜色名
Next主题的升级
升级Next主题,请参考官方说明文档https://theme-next.js.org/docs/getting-started/ 。由于我本人对此主题做出了更改,所以升级完主题后,还需要做的工作有两个
校对根目录下
_config.next.yml
看是否新旧主题有不同的地方,在 2022-05-10 的升级中就有不同地方,我使用vimdiff
对比新主题配置文件themes/next/_config.yml
和旧的_config.next.yml
,然后找出影响编译的项,按新主题配置修改好,其余的不动。由于我对页面的大小做出过修改,所以升级好主题要对所选择的主题相关变量修改,参考如下:
1 | // Variables of Muse scheme |