Stellar 主题中添加分类索引 Widget

本文属于合集：星际餐馆修建报告

Summer 说：

啊，想要分类索引。

路人说：

文章列表上面不是有么。

Summer 说：

可是那个只能点一下，想要切换还是很不方便，没办法实现索引的功能。

Summer 说：

为什么 tagcloud widget 都有了，能够很方便的根据标签检索文章，就不能有一个 categories widget 呢。

路人说：

那你为什么不用 hugo 的 Stack 主题，这不是小白必备。

Summer 说：

可是 Stellar 的目录功能是我觉得最好用的。

路人说：

其实没有分类索引也不是什么大问题。

Summer 说：

强迫症犯了，就是喜欢这种分类在旁边随时可以索引的感觉。

路人说：

可是你又不懂代码！

Summer 说：

可是我就是想要拥有分类索引。

路人说：

……小姑娘年纪轻轻强迫症可不轻。

宇宙安全声明

Tldr

基于 Stellar 1.27.0，没有代码基础纯现学现卖……佬们轻喷

叠甲完毕，进入正题：

新建 `categories.ejs`

在 /themes/stellar/layout/_partial/widgets/ 下新建 categories.ejs，填入以下内容：

themes/stellar/layout/_partial/widgets/categories.ejs

<%
function layoutCategoriesDiv() {
  var el = '';
  if (site.categories === undefined || site.categories.length === 0) {
    return el;
  }
  var opts = object.assign({}, item);
  delete opts['title'];
  delete opts['layout'];
  opts.class = 'category ';

  el += `<widget class="widget-wrapper${scrollreveal(' ')} categories-widget">`;

  if (item.title) {
    el += '<div class="widget-header categories-header dis-select">';
    el += '<span class="name">' + item.title + '</span>';
    el += '</div>';
  }

  el += '<div class="widget-body">';
  // Generate categories list
  site.categories.each(function(category) {
    el += `<div class="${opts.class}">`;
    el += `<svg class="category-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M18 10h-5" opacity=".5"/><path d="M10 3h6.5c.464 0 .697 0 .892.026a3 3 0 0 1 2.582 2.582c.026.195.026.428.026.892" opacity=".5"/><path d="M2 6.95c0-.883 0-1.324.07-1.692A4 4 0 0 1 5.257 2.07C5.626 2 6.068 2 6.95 2c.386 0 .58 0 .766.017a4 4 0 0 1 2.18.904c.144.119.28.255.554.529L11 4c.816.816 1.224 1.224 1.712 1.495a4 4 0 0 0 .848.352C14.098 6 14.675 6 15.828 6h.374c2.632 0 3.949 0 4.804.77c.079.07.154.145.224.224c.77.855.77 2.172.77 4.804V14c0 3.771 0 5.657-1.172 6.828C19.657 22 17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.172C2 19.657 2 17.771 2 14z"/></svg>`;
    el += `<a href="${url_for(category.path)}">${category.name} (${category.length})</a>`;
    el += `</div>`;
  });
  el += '</div>';
  el += '</widget>'; // Close widget-wrapper
  return el;
}
%>
<%- layoutCategoriesDiv() %>

新建 `categories.styl`

在 themes/stellar/source/css/_layout/widgets/ 下新建 categories.styl 文件，填入以下内容：

themes/stellar/source/css/_layout/widgets/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); // 添加阴影效果
  }

// 每个分类的样式
.category
  line-height: 1.5
  margin: 8px 0
  display: flex // 使用flex布局来确保图标和文本在同一行
  align-items: center // 垂直居中对齐

.category-icon
  width: 16px
  height: 16px
  vertical-align: middle
  margin-right: 8px

.category a
  display: inline-block // 链接以行内块方式显示
  word-break: break-word
  color: var(--text-p2)
  font-family: system-ui
  font-weight: 600
  font-size: 16px
  text-decoration: none
  &:hover
    color: $color-hover
    text-decoration: underline

// Variables
$color-hover = #0366d6

其中不想要阴影效果的可自行将 box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); // 添加阴影效果 这一行注释掉。
font-weight: 600 设置了字重，可自行修改。
可在 .category a 属性下设置
font-family: "LXGW WenKai Screen" 来更改 widget 字体（前提是已在主题中注入该字体）

在主题中使用

在 source/_data/widgets.yml 中创建 categories 组件：

source/_data/widgets.yml

1
2
3

categories:
	layout: categories
	title: 分类索引

然后往主题配置文件 _config.stellar.yml 里在想要的地方引入小组件就可以了。

效果

参考主页～

这个时候就不得不偷一张图来表达此时此刻此情此景所思所想

偷一下语佬的图哈哈哈

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。

Stellar 主题中添加分类索引 Widget

宇宙安全声明

新建 categories.ejs

新建 categories.styl

在主题中使用

效果

新建 `categories.ejs`

新建 `categories.styl`