前文:Windows下通过GitHub+Hexo搭建个人博客的步骤;
博主的个人博客:https://hunter1023.github.io/ 按照本篇博客美化。
在 Hexo 中有2份主要的配置文件,其名称都是。 其中,一份位于博客根目录下,主要包含 Hexo 本身的配置;另一份位于目录下,用于配置主题相关的选项。
打开根目录下的
顾名思义,所谓主题就是界面的展示样式。Hexo安装主题,只需要将主题文件拷贝至博客所在目录的目录下,修改相关配置文件即可生效。
博客所在目录下打开,再通过即可完成。
打开根目录下的,查找字段,将字段改为(冒号之后要有空格分隔,否则无效) ,之后通过和,再在浏览器中访问即可本地预览主题效果。
打开下的,查找,可以看到如下四种不同的风格方案:
去掉注释,即启用对应的scheme,博主采用Muse主题,大家可以依次测试效果,选择自己喜欢的scheme。
博客框架默认的语言是英文,前往,查看当前NexT版本简体中文对照文件的名称是还是。
再前往根目录下的,查找,设置成或,即显示简体中文。
-
打开下的,查找
去掉注释即可显示对应的菜单项,也可自定义新的菜单项。 之前的值是目标链接,之后的是分类页面的图标,图标名称来自于FontAwesome icon。若没有配置图标,默认会使用问号图标。
-
新添加的菜单需要翻译对应的中文
打开,在menu下自定义,如: -
此时在根目录的文件夹下会生成一个categories文件,文件中有一个文件,修改内容如下注:如果有启用评论,默认页面带有评论。需要关闭的话,添加字段comments并将值设置为false。
打开**下的**,查找
如果不设置,默认显示当前年份。
打开下的,查找
的值是图片的链接地址(完整的URI 或者 站内的相对地址皆可)
之后创建博文,对图片的引用 同样可以按照上述地址获取。
- 图标素材网站:iconfont;easyicon
- 下载16x16以及32x32大小的PNG格式图标,置于下
- 打开**下的**,查找 修改small和medium的路径为下载的图标路径
4.3.1 Canvas-nest风格
4.3.2 JavaScript 3D library风格
- 进入theme/next目录
- 执行命令:
- 将中查找,将想要的效果改为true即可:
打开,添加以下代码
其中的css样式属性都可以根据图片修改,以达到满意的效果。
默认情况下,侧栏仅在文章页面(拥有目录列表)时才显示,并放置于右侧位置。打开下的,查找
4.5.1 设置侧栏在左侧/右侧
- Pisces或Gemini方案
- Mist或Muse方案
- 打开,查找,把所有(2个)更改为即可。
- 打开,添加如下内容:
- 打开,将改为
4.5.2 显示侧边栏的时机
4.5.3 侧边栏控制按钮样式修改
打开,找到如下代码处,更换close的内容
修改,搜索 ,将 换成
打开,添加以下代码
- 首先在Hexo目录下的scripts目录中创建一个JavaScript脚本文件。
如果没有这个scripts目录,则新建一个。 - scripts目录新建的JavaScript脚本文件可以任意取名。
通过这个脚本,我们用其来监听这个动作,并在检测到之后,执行编辑器打开的命令。
- 如果你是windows平台的Hexo用户,则将下列内容写入你的脚本:
如果你是Mac平台Hexo用户,则将下列内容写入你的脚本:
修改,找到如下代码:
在其前后加上即可,如下:
- 前往Google Fonts查看合适的字体
- 打开下的,查找
- 修改
将
- 修改
- 打开站点配置文件,搜索字段,设置其值为
- 安装hexo-asset-image:
- 此时会在目录下创建同名的文件夹
- 只需在 md 文件里使用 ,无需路径名就可以插入图片。
- 打开下的,查找
- 打开,在和之间添加如下内容
- 向中添加如下内容
- 将摘要图片储存于中,建议在此路径下单独建一个文件夹存放摘要图片,这个图片和文章中插图的存放路径不同,不是一个概念。然后在文章YAML头信息中添加images字段,将值填为。
打开,添加以下代码:
打开,添加以下代码:
修改,注释或删除以下内容:
- 打开站点配置文件,搜索字段,设置其值为
- 进入到文件夹下,打开
- 打开下的,查找
当前版本的NexT集成的不蒜子,总访问人数和人次只是分别用icon来表示,故取消显示,自行改动
- 打开,在最后添加如下内容:
- 查找主题配置文件中的
盘点一下免费好用的图床