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