一时兴起，博客装修

调整网页色调和字体

主页色调调整

基本上是在variables.scss文件中处理的，按需调整…

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


&[data-scheme="dark"] {

        --body-background: #1E293B;    //主页背景色

        --accent-color: #CE835C;      //强调色，作用于博客名，左菜单的选中，卡片内部目录和链接
        
        --card-background: #325073;   //主页显示文章卡片的背景色
        
        --blockquote-background-color: #80A8B0;    //文章引用块背景色
        
    }

字体更换

在我做这一步之前，我没有先做更换鼠标光标那一步，否则我定能悟出…怎样使用本地字体…

好了因为当时试了一些本地文件方案没成功，最后看到这篇文章hugo | 自定义hugo-theme-stack用了网络字体

效果很好，就这样吧：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


<style>
  /* Overwrite CSS variable */
  :root {
    --article-font-family: 'Noto Serif HK', var(--base-font-family);
    --zh-font-family: 'Noto Serif HK', 'Hiragino Sans GB', 'Droid Sans Fallback',
    'Microsoft YaHei';
    --base-font-family: 'Noto Serif HK', var(--sys-font-family);
  }
</style>

<script>
  ;(function () {
    const customFont = document.createElement('link')
    customFont.href =
      'https://fonts.googleapis.com/css2?family=Noto+Serif+HK:wght@300;400;500;600;700&display=swap'
    customFont.type = 'text/css'
    customFont.rel = 'stylesheet'
    document.head.appendChild(customFont)

  })()

</script>

还没完呢，替我空耗的时间抱不平：

有关文件放置位置的碎碎念

这个路径问题之前一直挺晕的，比如config.yaml里头像位置填img/avatar.jpg可以被识别，友链里填域名/img/avatar.jpg就不可以，好在可以从控制台找到文件位置。

而同在.yaml文件中，favicon放在asset/img下无法识别，查了一下资料让我放在静态资源文件夹里，我找不到啊，最后破罐子破摔，在hugo根目录创建了一个static文件夹，设置里填上:

favicon: /favicon.ico

居然成了…有效的方法这么朴实无华…

↓试图以同样的原理改鼠标指针，完美！

鼠标指针自定义

意识到能够修改鼠标样式后，是时候掏出我压箱底的宝贝——八百年前珍藏的魔笛magi鼠标指针

…尝试后发现后缀为.ani的动态光标是无法加载的，浅浅绕一下路

具体操作步骤如下：

换一下格式，普通画图软件打不开ani文件，下载一款icofx，30天试用期，拖进去，选合适的片段导出，后缀改为.cur
在hugo-theme-stack目录下新建文件夹，命名为static，存放静态资源比如把.cur文件复制进来。
指针自定义代码填进custom.scss文件中(a与a:hover应该是鼠标悬停在链接上时显示的光标样式吧)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


body {
    cursor: url("/jafar.cur"),auto
  } 

  a {
    cursor: url("/jafar1.cur"),auto
  } 

  a:hover {
    cursor: url("/jafar1.cur"),auto
  } 

结束！贾法尔出现在了页面上~这使我充满了决心~

修改页面布局

提升页面观感，修改左侧边栏，头像、名称、描述等内容居中对齐，不要让它们挤在左上角了。

参考博客：山茶花舍 | 博客情人节修改笔记的修改方案

然而，我就知道，不出意外要出意外了：复制粘贴居中代码后我的侧边栏行距变得非常宽，菜单栏压到底下去了，也许是stack版本不一样导致的问题？尝试用浅薄的css知识救一下，多调几下布局总能凑合出来。

居中设置了左右后再补充上下属性，在.site-avatar、.site-name、.site-description、.social-menu中，按需补充上下边距的设置，不合适就再微调下：

1
2


margin-top: 0.5rem;
margin-bottom: 0;

还有一件事，原博没有用到社交媒体链接栏，就是menu.scss中.social-menu这部分，如果有需要，这部分也调整为居中。其他的微调，因为我的菜单栏字比较长，width改成了90%，总之看着顺眼就随意了…

改完点开手机网页，发现这个页面布局同样居中了，观感提升不少，是意外之喜。

比较顺利的改动

评论区换为waline，并导入了blob表情，这个听waline官网教程指挥就好，记得修改config.yaml
修复画廊最后一张图占据板块过大的问题，原来是我忽略了lastrow参数的设置
加入聊天气泡，~~还没用过，看上去很好~~，感谢他人的智慧
友情链接双栏，感谢他人的智慧×2

留给未来的问题

手机端文章之间的布局很拥挤，研究下该怎么改
博客缺了一个《关于》页面，没想好该怎么介绍自己
和代码块有关的，包括修改代码块背景、代码高亮等，照搬以前的方案似乎不适用了
字数统计，我觉得文章字数显示太多了诶？是否有什么不对