如何在Distill博客中将分类标签移至时间标签下方

我刚好折腾过Distill博客的自定义样式，这个需求其实用CSS的flex order属性就能轻松搞定，不用修改源码~

核心思路 #

Distill默认的文章列表项是块级布局，元素按HTML结构顺序展示。我们可以把文章列表项改成flex垂直布局，然后通过order属性调整日期和标签的显示顺序，让标签移到日期下方。

自定义CSS代码 #

把这段代码添加到你的Distill博客的自定义CSS文件中（通常是assets/css/custom.css，如果没有就新建一个，然后在博客的配置文件里引用）：

/* 将文章列表项设置为flex垂直布局，用于调整内部元素顺序 */
.article-listing {
  display: flex;
  flex-direction: column;
}

/* 设置日期的显示优先级，让它排在标签前面 */
.article-date {
  order: 1;
  /* 保留默认的顶部间距，确保视觉一致性 */
  margin-top: 0.25em;
}

/* 设置标签的显示优先级，让它排在日期下方 */
.article-tags {
  order: 2;
  /* 调整标签的顶部间距，和日期保持协调的视觉效果 */
  margin-top: 0.5em;
}

注意事项 #

• 如果你的博客主题修改过默认类名，比如文章列表项的类不是.article-listing，可以用浏览器开发者工具（F12）查看元素的实际类名，替换代码中对应的选择器即可。
• 可以根据自己的博客风格调整margin-top的值，让间距更符合你的视觉偏好。

内容的提问来源于stack exchange，提问作者L.Clive