对博客的一次简单美化

去谷歌找了一圈使用同主题的博客网站，发现别人家的博客美化得是真的好看，功能多的同时又能带来良好的观感体验，而且博文也写得非常精彩，实用性极高，不愧是大佬们。
回头看着自己的简陋的博客陷入了沉思，又诞生出了想要美化博客的想法 ~~（我就是不想写博文）~~ ，于是又开始了新一轮折腾。

字体更换

在观看别人博客时，发现的“霞鹜文楷”字体还看着还挺不错的，打算也给自己博客整上。

霞鹜文楷的Github页：https://github.com/lxgw/LxgwWenKai
所使用的webfont的Github页：https://github.com/CMBill/lxgw-wenkai-web

在/themes/hugo-theme-stack/layouts/partials/footer/components/custom-font.html内添加以下内容：

1
2
3
4
5
6
7
8
9


(function () {
    const customFont = document.createElement('link');
    customFont.href = "https://cdn.jsdelivr.net/npm/@callmebill/lxgw-wenkai-web@latest/style.css";

    customFont.type = "text/css";
    customFont.rel = "stylesheet";
        
    document.head.appendChild(customFont);
}());

再从/themes/hugo-theme-stack/assets/scss/variables.scss中添加到全局字体，修改内容如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


/**
*   Global font family
*/
:root {
    --sys-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue";
    --zh-font-family: "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei";

    --base-font-family: "LXGW WenKai Light", "Lato", var(--sys-font-family), var(--zh-font-family), sans-serif;
    --code-font-family: "LXGW WenKai Light", Menlo, Monaco, Consolas, "Courier New", var(--zh-font-family), monospace;
}

最后重新构建一次博客，刷新页面即可看到效果。

滑条样式修改

Stack原版样式中的网页滑条方方正正的不太好看，打算给它削得圆润一点。
修改/themes/hugo-theme-stack/assets/scss/partials/base.scss内容如下（仅修改了Chromium样式）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


/* scrollbar styles for Chromium */
::-webkit-scrollbar {
    height: auto;
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 8px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}
/**/

一些好玩Shortcodes

灵感主要来源于萌娘百科中非常搞的文字说明，打算自己写几个Shortcodes来实现一下。

黑幕

先为/themes/hugo-theme-stack/assets/scss/custom.scss添加CSS样式：

1
2
3
4
5
6
7
8
9


.heimu {
    color: #000;
    background-color: #000;
    transition: color 0.2s linear;
}

.heimu:hover {
    color:#FFF;
}

再从/layouts/shortcodes内新建heimu.html：

1

<span class="heimu">{{ .Inner }}</span>

效果如下：

1

鼠标移动到这边看看 → {{< heimu >}} 你知道的太多了 {{< /heimu >}}

鼠标移动到这边看看 → 你知道的太多了

批注

在/layouts/shortcodes内新建ruby.html：

1

<ruby><rb>{{ (.Get 0) }}</rb><rp>(</rp><rt>{{ (.Get 1) }}</rt><rp>)</rp></ruby>

效果如下：

1

屏幕上有{{< ruby 蜘蛛 只猪 >}}

屏幕上有蜘蛛(只猪)

叠叠乐

在/layouts/shortcodes内新建details.html：

1
2
3
4


<details>
  <summary>{{ (.Get 0) }}</summary>
  {{ .Inner | .Page.RenderString }}
</details>

效果如下：

1

{{< details 点开看看 >}} 这里什么也没有 {{< /details >}}

点开看看

这里什么也没有

更换PhotoSwipe插件

因前端知识匮乏的我，频繁改写了Shortcode代码，所以在这里删除了之前失效的内容，并打算另起一篇单独的折腾记录发布到博客上。