Css

PaperMod 是一个非常棒的博客主题，但是它不支持友链，所以你要自己写一些代码。 完整代码 把下面的代码存储在 layouts/shortcodes/friends.html <style type="text/css"> .friends { --link-count-per-row: 1; } @media screen and (min-width: 576px) { .friends { --link-count-per-row: 2; } } @media screen and (min-width: 768px) { .friends { --link-count-per-row: 3; } } .friends { display: grid; grid-template-columns: repeat(var(--link-count-per-row), 1fr); grid-gap: 16px; } /* 空间占位 */ .friend-skeleton { height: 280px; display: inline-block; position: relative; } .friend { height: 100%; width: 100%; position: absolute; top: 0; left: 0; transition: 0....

下载字体 下载你需要的字体，并存储在 static/fonts 导入字体 @font-face { font-family: "LXGWWenKai-Regular"; src: url("/fonts/lxgw-wenkai/LXGWWenKai-Regular.ttf") format("truetype"); } 应用字体 body { font-family: LXGWWenKai-Regular; } 在 PaperMod 中应用 把你自己的 css 文件文件放在 assets/css/extended/custom_fonts.css 导入多字重的字体文件 @font-face { font-family: "LXGWWenKai"; src: url("/fonts/lxgw-wenkai/LXGWWenKai-Light.ttf") format("truetype"); font-weight: lighter; font-style: normal; } @font-face { font-family: "LXGWWenKai"; src: url("/fonts/lxgw-wenkai/LXGWWenKai-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "LXGWWenKai"; src: url("/fonts/lxgw-wenkai/LXGWWenKai-Bold.ttf") format("truetype"); font-weight: bold; font-style: normal; } 使用 CDN @import url('https://cdn.jsdelivr.net/npm/jetbrains-mono@1.0.6/css/jetbrains-mono.min.css'); code { font-family: 'JetBrains Mono'; } 参考链接 Sulv’s Blog - Hugo博客自定义字体 PaperMod - FAQs StackOverflow - Using custom fonts using CSS?...