将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; } } } }