Summer
说：
啊，想要分类索引。
路人
说：
文章列表上面不是有么。
Summer
说：
可是那个只能点一下，想要切换还是很不方便，没办法实现索引的功能。
Summer
说：
为什么 tagcloud widget 都有了，能够很方便的根据标签检索文章，就不能有一个 categories widget 呢。
路人
说：
那你为什么不用 hugo 的 Stack 主题，这不是小白必备。
Summer
说：
可是 Stellar 的目录功能是我觉得最好用的。
路人
说：
其实没有分类索引也不是什么大问题。
Summer
说：
强迫症犯了，就是喜欢这种分类在旁边随时可以索引的感觉。
路人
说：
可是你又不懂代码！
Summer
说：
可是我就是想要拥有分类索引。
路人
说：
……小姑娘年纪轻轻强迫症可不轻。
宇宙安全声明#
WARNING
基于 Stellar 1.29.1，没有代码基础纯现学现卖……佬们轻喷
于 2025-02-21 启用动态代码
叠甲完毕，进入正题：
新建 categories.ejs#
在 /themes/stellar/layout/_partial/widgets/ 下新建 categories.ejs，填入以下内容：
<widget class="widget-wrapper"><div class="widget-header dis-select"><span class="name">🗂️ 星域</span></div>
<div class='post-list categories-widget'> <article class='<%- scrollreveal("") %>' id='cats'> <% site.categories.sort('path').each(function(category){ %> <div> <a class="<%= category.parent ? 'cat child' : 'cat'%>" href="<%= url_for(category.path) %>"> <span class='name'><%- icon('default:category') %><%- category.name %></span> <span class='badge'>(<%- category.posts.length %>)</span> </a> </div> <% }) %> </article> </div></widget>新建 categories.styl#
在 themes/stellar/source/css/_components/widgets/categories.styl 下新建 categories.styl 文件，填入以下内容：
// categories widget 样式
.widget-wrapper.categories-widget .widget-body { border-radius: $border-card; padding: 12px 20px; background: var(--alpha50); // 这里设置背景 box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); // 添加阴影效果 }
// categories_widget.styl.categories-widget border-radius: $border-card; padding: 12px 8px background: var(--card) box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1)
// Add any additional styling you want here
.categories-widget .post-list .cat.child margin-left: 20px;- 其中不想要阴影效果的可自行将
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); // 添加阴影效果这一行注释掉。 - 可在
.category a属性下 设置font-family: "LXGW WenKai Screen"来更改 widget 字体（前提是已在主题中注入该字体）
在主题中使用#
在 source/_data/widgets.yml 中创建 categories 组件：
categories: layout: categories title: 分类索引然后往主题配置文件 _config.stellar.yml 里在想要的地方引入小组件就可以了。
效果#
这个时候就不得不偷一张图来表达此时此刻此情此景所思所想
