赛博小屋装修记

主题修改

字体修改

MacBook上感觉文档的字体渲染挺锐的，怪不得好多人拿Mac办公，确实看的舒服，但是网页上代码块的渲染有点难受，平常的win本一直是用JetBrains Mono，调整一下:

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


<!-- assets/scss/variables.scss -->
// add fonts api from google fonts
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');


: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: "Lato", var(--sys-font-family), var(--zh-font-family), sans-serif;
    --code-font-family: "JetBrains Mono", Menlo, Monaco, Consolas, "Courier New", var(--zh-font-family), monospace;
}

版式修改

1.样式修改:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59


// 页面基本配色
:root {
    // 全局顶部边距
    --main-top-padding: 30px;
    // 全局卡片圆角
    --card-border-radius: 25px;
    // 标签云卡片圆角
    --tag-border-radius: 8px;
    // 卡片间距
    --section-separation: 40px;
    // 全局字体大小
    --article-font-size: 1.8rem;
    // 行内代码背景色
    --code-background-color: #f8f8f8;
    // 行内代码前景色
    --code-text-color: #e96900;
    // 暗色模式下样式
    &[data-scheme="dark"] {
      // 行内代码背景色
      --code-background-color: #ff6d1b17;
      // 行内代码前景色
      --code-text-color: #e96900;
    }
  }
  
  //选中文本样式美化
  ::selection {
    color: #ffff;
    background: #977a55;
}

  //-------------------------------------------
  // 设置选中字体的区域背景颜色
  //修改选中颜色
  ::selection {
    color: #fff;
    background: #34495e;
  }
  
  a {
    text-decoration: none;
    color: var(--accent-color);
  
    &:hover {
      color: var(--accent-color-darker);
    }
  
    &.link {
      color: #4288b9ad;
      font-weight: 600;
      padding: 0 2px;
      text-decoration: none;
      cursor: pointer;
  
      &:hover {
        text-decoration: underline;
      }
    }
  }

2.布局修改:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135


/* 归档页改双栏 */
@media (min-width: 1024px) {
    .article-list--compact {
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: none;
      box-shadow: none;
      gap: 1rem;
  
      article {
        background: var(--card-background);
        border: none;
        box-shadow: var(--shadow-l2);
        margin-bottom: 8px;
        border-radius: 16px;
      }
    }
  }

/* links页面改三栏 */
@media (min-width: 1024px) {
    .article-list--compact.links {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr; //三个1fr即为三栏,两个1fr则为双栏,以此类推即可.
      background: none;
      box-shadow: none;
      gap: 1rem;
  
      article {
        background: var(--card-background);
        border: none;
        box-shadow: var(--shadow-l2);
        margin-bottom: 8px;
        border-radius: var(--card-border-radius);
  
        &:nth-child(odd) {
          margin-right: 8px;
        }
      }
    }
  }

/* 文章封面高度更改 */
  .article-list article .article-image img {
    width: 100%;
    height: 150px;
    object-fit: cover;
  
    @include respond(md) {
      height: 200px;
    }
  
    @include respond(xl) {
      height: 305px;
    }
  }
  

/* 全局页面布局间距调整 */
  .main-container {
    min-height: 100vh;
    align-items: flex-start;
    padding: 0 15px;
    gap: var(--section-separation);
    padding-top: var(--main-top-padding);
  
    @include respond(md) {
      padding: 0 37px;
    }
  }

  .container {
    margin-left: auto;
    margin-right: auto;
  
    .left-sidebar {
      order: -3;
      max-width: var(--left-sidebar-max-width);
    }
  
    .right-sidebar {
      order: -1;
      max-width: var(--right-sidebar-max-width);
  
      /// Display right sidebar when min-width: lg
      @include respond(lg) {
        display: flex;
      }
    }
  
    &.extended {
      @include respond(md) {
        max-width: 1024px;
        --left-sidebar-max-width: 25%;
        --right-sidebar-max-width: 22% !important;
      }
  
      @include respond(lg) {
        max-width: 1280px;
        --left-sidebar-max-width: 20%;
        --right-sidebar-max-width: 30%;
      }
  
      @include respond(xl) {
        max-width: 1453px; //1536px;
        --left-sidebar-max-width: 15%;
        --right-sidebar-max-width: 25%;
      }
    }
  
    &.compact {
      @include respond(md) {
        --left-sidebar-max-width: 25%;
        max-width: 768px;
      }
  
      @include respond(lg) {
        max-width: 1024px;
        --left-sidebar-max-width: 20%;
      }
  
      @include respond(xl) {
        max-width: 1280px;
      }
    }
  }
  
  
/* 全局页面小图片样式微调 */
  .article-list--compact article .article-image img {
    width: var(--image-size);
    height: var(--image-size);
    object-fit: cover;
    border-radius: 17%;
  }

3.代码块样式修改:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55


/* blog/assets/scss/custom.scss */
/* CodeBlock settings ⬇ */
  .highlight {
    max-width: 102% !important;
    background-color: var(--pre-background-color);
    padding: var(--card-padding);
    position: relative;
    border-radius: 20px;
    margin-left: -7px !important;
    margin-right: -12px;
    box-shadow: var(--shadow-l1) !important;
  
    &:hover {
      .copyCodeButton {
        opacity: 1;
      }
    }
  
    // keep Codeblocks LTR
    [dir="rtl"] & {
      direction: ltr;
    }
  
    pre {
      margin: initial;
      padding: 0;
      margin: 0;
      width: auto;
    }
  }
/* use macos format */
.article-content {
  .highlight:before {
    content: "";
     display: block;
    background: url(/img/code-header.svg);
    height: 32px;
    width: 100%;
    background-size: 57px;
    background-repeat: no-repeat;
    margin-bottom: 5px;
    background-position: -1px 2px;
  }
}

/* adjust light mode format */
  [data-scheme="light"] .article-content .highlight {
    background-color: #fff9f3;
  }
  
  [data-scheme="light"] .chroma {
    color: #ff6f00;
    background-color: #fff9f3cc;
  }
/* Codeblock settings completed. */

添加代码块折叠效果

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80


<!-- blog/layouts/partials/footer/custom.html -->
<style>
  .highlight {
      max-height: 300px;
      overflow: hidden;
  }

  .code-show {
      max-height: none !important;
  }

  .code-more-box {
      width: 100%;
      padding-top: 78px;
      background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#fff));
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
  }

  .code-more-btn {
      display: block;
      margin: auto;
      width: 44px;
      height: 22px;
      background: #f0f0f5;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      padding-top: 6px;
      cursor: pointer;
  }

  .code-more-img {
      cursor: pointer !important;
      display: block;
      margin: auto;
      width: 22px;
      height: 16px;
  }
</style>

<script>
function initCodeMoreBox() {
  let codeBlocks = document.querySelectorAll(".highlight");
  if (!codeBlocks) {
    return;
  }
  codeBlocks.forEach(codeBlock => {
    // 校验是否overflow
    if (codeBlock.scrollHeight <= codeBlock.clientHeight) {
      return;
    }
    // 元素初始化
    // codeMoreBox
    let codeMoreBox = document.createElement('div');
    codeMoreBox.classList.add('code-more-box');
    // codeMoreBtn
    let codeMoreBtn = document.createElement('span');
    codeMoreBtn.classList.add('code-more-btn');
    codeMoreBtn.addEventListener('click', () => {
      codeBlock.classList.add('code-show');
      codeMoreBox.style.display = 'none';
      // 触发resize事件，重新计算目录位置
      window.dispatchEvent(new Event('resize'))
    })
    // img
    let img = document.createElement('img');
    img.classList.add('code-more-img');
    img.src = "/icons/arrow.png";
    // 元素添加
    codeMoreBtn.appendChild(img);
    codeMoreBox.appendChild(codeMoreBtn);
    codeBlock.appendChild(codeMoreBox)
  })
}

initCodeMoreBox();
</script>

4.DIY-添加横幅:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55


/* 主页添加横幅 */
/* part 1 */
/* HUGO_SITE_FOLDER/assets/scss/custom.scss */
.welcome {
  color: var(--card-text-color-main);
  background: var(--card-background);
  box-shadow: var(--shadow-l2);
  border-radius: 30px;
  display: inline-block;
}
// 实现字符跳动动画
.jump-text1 {
  display: inline-block;
  animation: jump 0.5s 1;
}

.jump-text2 {
  display: inline-block;
  animation: jump 0.5s 1;
  animation-delay: 0.1s;
}

.jump-text3 {
  display: inline-block;
  animation: jump 0.5s 1;
  animation-delay: 0.2s;
}

@keyframes jump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}
/* part 2 */
/* blog/layouts/index.html */
    <!-- 首页欢迎字幅 -->
    <div class="welcome">
        <p style="font-size: 2rem; text-align: center; font-weight: bold">
            <!-- <span class="shake">👋</span> -->
            <span class="jump-text1"> Welcome</span>
            <span class="jump-text2"> Back </span>
            <span class="jump-text3" style="color:#e99312;">Rei</span>
            <!-- <span class="jump-text4"style="color:#e99312"></span><span class="jump-text5" style="color:#e99312">a</span><span
                class="jump-text6" style="color:#e99312">o</span><span class="jump-text7"
                style="color:#e99312">k</span><span class="jump-text8" style="color:#e99312">'s</span>
            <span class="jump-text9" style="color:#e99312">Blog</span> -->
        </p>
    </div>
    <!-- 首页欢迎字幅 -->

5.DIY-添加Blog运行时间

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


<!-- layouts/partials/footer/custom.html -->
<script>
  let s1 = '2025-1-19'; //website start date
  s1 = new Date(s1.replace(/-/g, "/"));
  let s2 = new Date();
  let timeDifference = s2.getTime() - s1.getTime();

  let days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
  let hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));

  let result = days + " 天 " + hours + " 小时 " + minutes + " 分钟";
  document.getElementById('runningdays').innerHTML = result;
</script>
<!-- layouts/partials/footer/footer.html -->
  <!-- Add blog running time -->
   <section class="running-time">
      本博客已稳定运行
      <span id="runningdays" class="running-days"></span>
    </section>

内嵌网页视频

Hugo可以通过建立shortcode的方式来内嵌网页视频(读取bilibili内置的iframe代码，2025.03.20还有效)

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


<!-- layouts/shortcodes/bilibili.html -->
<div style="position:relative; padding-bottom:56.25%; width:100%; height:0">
  
    <iframe
        src="//player.bilibili.com/player.html?bvid={{.Get 0 }}&amp;page={{ if .Get 1 }}{{.Get 1}}{{ else }}1{{end}}&amp;as_wide=1&high_quality=1&amp;autoplay=0"
        scrolling="no"
        border="0"
        frameborder="no"
        framespacing="0"
        allowfullscreen="true"
        style="position:absolute; height: 100%; width: 100%;"
    >
    </iframe>
</div>

相关说明：创建一个响应式容器，根据视频比例自适应大小。

position:relative：为子元素(iframe)的绝对定位提供参考。
padding-bottom:56.25%：通过内边距的百分比(宽度的56.25%)维持容器的宽高比例(16:9)，确保视频高度随宽度变化。
width:100%; height:0：宽度占满父容器，高度由 padding-bottom 动态计算。

嵌入视频的 <iframe>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<iframe
    src="//player.bilibili.com/player.html?bvid={{.Get 0 }}&amp;page={{ if .Get 1 }}{{.Get 1}}{{ else }}1{{end}}&amp;as_wide=1&high_quality=1&amp;autoplay=0"
    scrolling="no"
    border="0"
    frameborder="no"
    framespacing="0"
    allowfullscreen="true"
    style="position:absolute; height: 100%; width: 100%;"
>
</iframe>

1. src 属性

1

src="//player.bilibili.com/player.html?bvid={{.Get 0 }}&amp;page={{ if .Get 1 }}{{.Get 1}}{{ else }}1{{end}}&amp;as_wide=1&high_quality=1&amp;autoplay=0"

说明：指定嵌入的哔哩哔哩播放器地址及参数。
- bvid={{.Get 0}}：通过 Hugo Shortcode 的第一个参数（{{.Get 0}}）传入视频的 BV 号（如 BV1xx411x7xx）。
- page=...：通过第二个参数（{{.Get 1}}）指定视频的分页（分P），未提供时默认为 1。
- as_wide=1：启用宽屏模式。
- high_quality=1：默认使用高清画质。
- autoplay=0：禁止自动播放（设为 1 可启用）。

2. 其他属性

scrolling="no"：禁用 iframe 滚动条。
border="0"、frameborder="no"：隐藏 iframe 边框。
framespacing="0"：移除框架间距。
allowfullscreen="true"：允许全屏播放。

3. 内联样式

1

style="position:absolute; height: 100%; width: 100%;"

作用：让 iframe 填满外层容器。
- position:absolute：基于外层容器绝对定位。
- height: 100%; width: 100%：占满外层容器的全部空间。

2025-04-09 15:30 Wednesday

网易云的内嵌式播放出了问题，无法渲染，看了几个博客都出现了类似的问题，暂时还在找如何替换;

打算用Aplayer+MeetingJs的方式，参考博客：https://blog.ohmykreee.top/article/music-player-in-hugo-page/