Stellar主题自定义侧边栏教程「萌新向」
开篇废话
在使用大佬@xaoxuu 开发的Stellar Hexo博客主题时,发现大佬的侧边栏不仅简介美观,还巨特娘的实用有木有!

原本Stellar使用文档里也有设置教程
但是对于本萌来说还是犹如天书

不过在本萌的不懈努力下还是攻克了这道难题,记录成了这篇文章

具体步骤
先看一下大佬的侧边栏:

这里的侧边栏由3部分组成
- 分组
- 折叠标签组
- 折叠标签
我们遇到的第一个难题就是
如何设置分组名

为了方便展示,以下以本站的便笺页面为例进行讲解
创建分组
在source/_data/projects.yml
中增加一个项目:
1 | Notes: |
最后sections下的Hexo笔记和游戏便是我创建的分组
后面的区间值用于指定页面归属哪一个分区,在后面会讲
你有多少分组就写多少条,后面给不同的区间就行
注意:
在本站主题配置文件
_config.yml
里,便笺页面是以notes表示的
1
2
3
4
5
6 sidebar:
...
menu:
post: '[主页](/)'
notes: '[便笺](/notes/)'
about: '[关于](/about/)'所以上面增加的控制项是Notes
如果你是在其他页面编辑侧边栏
需要根据你自己的页面设置新增项的名称
第二个问题
创建折叠标签
侧边栏里的折叠标签其实可以把他们理解为一篇文章
折叠标签就是文章的标题
标签展开后则是文章的分段目录
所以创建一个折叠标签其实就是写一篇文章而已
在scurce/notes/
目录下新建一个文件夹,文件夹名称随意,只要你自己能分清楚就行
与上一步创建分组时一样,根据你自己的页面在对应的文件夹下操作
再在文件夹里创建一个index.md
文件
如下图所示:

我这里就是在notes
下新建了一个站点美化
文件夹
再在里面创建index.md
我们可以看到这就是一篇md格式的文章
关键在于编辑index.md
文件:
1 |
|
这里title的值就是页面最终呈现的折叠标签名,本例中即为站点美化
标签归组
接着说上面编辑的内容
order的值的作用就是将它定义到上个步骤里创建的分组里
比如上一步我在source/_data/projects.yml
将[100,199]这个区间赋予给了Hexo笔记,我这里的order的值是101,在100至199这个区间内,所以页面最终的效果就是把站点美化归类到Hexo笔记这个分组下,如下图:

至此一个折叠标签做好了
至于index.md
里除了title和order外的其他项
-
layout 的值固定为wiki,与第二项一同作用于侧边栏,如果没有它们侧边栏也会消失
-
wiki 的值写你在
source/_data/projects.yml
中新增的项目名 -
breadcrumb: false 表示本页面不显示顶部导航,如果你需要显示的话,把这一行删除即可
-
comments: false 表示本页面不启用评论版块,需要启用评论板块的话把值改成true
创建多个分组与多个折叠标签组
当我们需要在侧边栏里写入多个折叠标签时
则与上一步一样,在scurce/notes/
目录下再新建一个文件夹
再说一次,这是以本站的便笺页为例在操作,实际需要根据你自己的页面在对应的文件夹下进行
里面再新建一个index.md
文件
通过给title和order不同的值来实现不同的标签名和分组
比如我在另一个文件夹里创建了一个新的index.md
文件,title我定为博主游玩推荐,order值定为201,则最终在页面的效果就是一个名为博主游玩推荐的标签位于游戏分组下

题外话
这里我们讨论的是在便笺页面里的侧边栏设置
那要是我连便笺页都没有怎么办

在blog所在的文件夹终端里执行:
1 | hexo new page "notes" |
这会在scurce
目录下创建 notes
文件夹,页面内容可以在里面的的 index.md
里编辑
然后在主题配置文件里将 sidebar.menu.notes
的注释取消掉,例如:
1 | sidebar: |
最终页面文件的构成如下:

在红框的index.md文件里编辑便笺主页内容
在蓝框的index.md文件里编辑Hexo笔记分组下的站点美化页
在绿框的index.md文件里编辑游戏分组里的博主游玩推荐页
