使用GitHub Pages + Hexo 快速搭建个性化博客(四)-博客菜单和侧边栏优化

来源：互联网发布：windows启动错误恢复编辑：程序博客网时间：2024/05/22 07:04

在之前三节的基础上，博客已经有了新的展现，之后基本框架就会是固定的这个模板，但其中还有许多可以优化的模块接下来将进行描述，本时段直播NexT主题博客侧边栏的进一步设置和优化，如分类页，标签页，个人社交网络连接等。

添加<标签>和<分类>页
官网文档说：在其他系统中，分类和标签听起来很接近，但是在 Hexo 中两者有着明显的差别：分类具有顺序性和层次性,我前几次读也没怎么理解这其中意思，但是往后逐步研究相信就会有切身体会了。
由于现在博客站点还没有自己添加的新文章，所以包含标签和分类的文章为0，此时侧边栏默认是不显示标签和分类页的，所以我们只需先创建第一个示例内容页面，加上分类和标签，右边栏中即可显示标题，那么本步骤就来演示添加简单新文章的步骤。
添加标签页面
现在首页菜单的标签和分类还是不能打开的，因为没有相应的资源文件，所以此步骤就是创建对应的资源文件。
GitShell进入你的hexo安装目录，输入命令 hexo new page tags,此处的tags不是普通的新建文章的标题，而是以关键字的形式存在的，因为之后菜单的“标签”链接就是对应的此处的资源文件，执行命令后发现Hexo/source文件夹中多出了一个tags文件夹。

文本编辑器打开该文件夹中的index.md文件，添加type节点。

添加分类页
和上面一样，执行一行新建分类的命令.

文本编辑器打开该文件夹中的index.md文件，添加type节点。

这样之后，添加你的第一篇文章，可同时添加分类的标签，这样菜单中两个链接就能自动找到相关文件了。
添加新文章
Git Shell 中进入Hexo目录，输入hexo new page “my first blog” ,然后Hexo/source/posts中便会多出一个名为my-first-blog.md的文件即为我们博客文章内容文件，用文本编辑器打开，如下示例简单的编辑:

接下来就可以本地预览一下了，当然之前每一步的改动想预览都可以本地快速的预览下效果。Git Shell 中进入Hexo目录，输入hexo server, 命令运行成功提示后，本地预览改动效果，此时我的首页菜单中分类和标签页已经能打开，右侧边栏中分类和标签也自动显示。

意外状况：实际操作时由于我有一个标签拼写错误，在该page中我就把该标签删除了，然后本地刷新页面发现标签数还是没变，但是下面现实的具体的标签文本已经减少了一个。

之后尝试本地清除缓存然后重新生成，预览，标签数字和个数就相等了。

hexo clean
hexo generate
hexo server

2. 菜单中其他菜单的生成
关于菜单
这个菜单，常规的话就还是按照上面生成标签和分类文件夹一样的命令，生成about文件夹里面的index文件，打开后精心编辑即可显示自我介绍，是跟普通文章页面一样的编辑和显示效果；另一种显示方式的话，就是在主题文件中配置文件config.yml中menu子节点，在相应的菜单名称后面放入页面链接就行。

公益404菜单
Hexo/source目录下手动创建404.html页面，打开编辑一下代码

<!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"/></head><body><script type="text/javascript" src="http://www.qq.com/404/search_children.js"        charset="utf-8" homePageUrl="！！！your site url！！！"        homePageName="回到我的主页"></script></body></html>

3.菜单顺序
研究至此，这个小问题相信亲们不用参考也能搞定<(＾－＾)>

4.首页logo
相信大家一直跟我一样打开首页是注意力首先会落到网站Logo上，这个每个站点最有区别性的地方，而我们到现在还没给个性化怎么能忍，也许你在github上首页进行编辑过也能修改，但每次本地修改发布后就又没了自己个性化站点名称。那么，就在Hexo即你的hexo安装根目录下，打开config.yml配置文件，非注释文本的第一行是不是就发现了一个title,这就是关键点！换了它，改成你的名称，中文拼音英文火星文随意。。。

侧边栏个人社交链接
Hexo/themes/next/config.yml配置文件中，设置social和social_icon两节点

其中seoial_icons节点中后面的值是http://fontawesome.io/icons/ 中提供的图标的名称。之后其他链接如推特，微博等都可自行增减。

至此，该博客已经系统的搭建完成了，各个显示的链接也都能正常访问，快速发布到远程只需几行小命令(注意是GitShell中在Hexo目录下)：

hexo clean
hexo generate //可缩写为 hexo g
hexo server //可缩写为hexo s, 若无需本地预览确认此步可略过
hexo deploy //可缩写为hexo d,此步骤就是部署到远程github站点的

当然这只是说较为完善的完成了，提升空间还是大大滴有的，每个人创意无限大嘛，之后有更新一定继续同步直播︿(￣︶￣)︿

0 0