将Hugo Stack主题友情链接改为双列显示

续:为Hugo Stack主题添加友情链接页面 不太喜欢原页面的排版,遂修改CSS样式,让友情链接列表在≥1024px时显示为两列。 首先,添加@media,然后将links container的display改为grid,并设置grid-template-columns为两列(1fr 1fr): @media (min-width: 1024px) { .article-list--compact.links { display: grid; grid-template-columns: 1fr 1fr; } 接着修改container和单一link(即article)的CSS样式,主要是将原本container的background和box-shadow移到article上: .article-list--compact.links { background: none; box-shadow: none; article { background: var(--card-background); box-shadow: var(--shadow-l1); } } 最后,设置article的样式。为了保持整齐,去掉原本的border,下方添加margin,并且只有当article位于第一列时,右侧才添加margin: article { border: none; margin-bottom: 8px; &:nth-child(odd) { margin-right: 8px; } } 完整代码: @media (min-width: 1024px) { .article-list--compact.links { display: grid; grid-template-columns: 1fr 1fr; background: none; box-shadow: none; article { background: var(--card-background); border: none; box-shadow: var(--shadow-l1); margin-bottom: 8px; &:nth-child(odd) { margin-right: 8px; } } } }

2021-12-08 · 1 min

为Hugo Stack主题添加友情链接页面

完全参照的Hugo Stack主题配置与使用/添加友情链接 shortcodes的做法,先配置友链页面需要的layout和data: 新建文件layouts\page\links.html。 新建文件\layouts\shortcodes\link.html。 新建文件\data\links.json,用于储存友链信息。 links.json中的image放在网站根目录\assets\link-img\文件夹下。 接着,在网站根目录content/content里添加links.md文件。 设置links.md的front matter: --- title: "友链 / Links" slug: "links" layout: "links" # outputs: # - html # - json comments: false license: false menu: main: weight: -60 params: icon: link --- 其中,comments和license影响页面美观,因而隐藏;去掉outputs是因为Hugo渲染时会报错: WARN 2021/12/08 11:52:15 found no layout file for "JSON" for layout "links" for kind "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination....

2021-12-08 · 1 min