Alen折腾日志

🛋️前言

Hello,如约而至的折腾日志Page 1正式开始书写

在商科生+技术白痴的双重buff下，这篇折腾日志或许算不上是帮助很大的Hugo魔改小指南，但还是希望能够给和我相似或者比我相对较慢起步的小伙伴一些微不足道的指引和思路

ok我们现在开始折腾

🏕️Hugo-stack-theme魔改日志

从搭建博客到现在运营的几个月以来，我一共魔改了两次，期间的魔改也参考了很多大佬的魔改教程，甚至说是抄也不过分。即便css知识有限，我也希望能够集中汇总，方便以后的小伙伴进行参考，也借此在这篇文章中感谢参考的博主。

🛰️有关全局的修改

🥖滚动条的修改

在custom.scss中写入以下代码，使滚动条圆角化

效果大家可以自行滚动一下看看啦😆

 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


//将滚动条修改为圆角样式

//菜单滚动条美化

.menu::-webkit-scrollbar {

    display: none;

  }

  // 全局滚动条美化

  html {

    ::-webkit-scrollbar {

      width: 20px;

    }

    ::-webkit-scrollbar-track {

      background-color: transparent;

    }

    ::-webkit-scrollbar-thumb {

      background-color: #d6dee1;

      border-radius: 20px;

      border: 6px solid transparent;

      background-clip: content-box;

    }

    ::-webkit-scrollbar-thumb:hover {

      background-color: #a8bbbf;

    }

  }

🍣归档页面双栏化

同样，在custom.scss中写入以下代码

 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


/* 归档页面两栏 */

@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;

      }

    }

  }

效果图如下：

归档页面效果图

🫕Back-Home 按键的设置

同样，在custom.scss中写下

 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


//引入左上角返回按钮

.back-home {

    background: var(--card-background);

    border-radius: var(--tag-border-radius);

    color: var(--card-text-color-tertiary);

    margin-right: 0.1rem;

    margin-top: 24px;

    display: inline-flex;

    align-items: center;

    font-size: 1.4rem;

    text-transform: uppercase;

    padding: 10px 20px 10px 15px;

    transition: box-shadow 0.3s ease;

    box-shadow: var(--shadow-l3);

    &:hover {

      box-shadow: var(--shadow-l2);

    }

    svg {

      margin-right: 5px;

      width: 20px;

      height: 20px;

    }

    span {

      font-weight: 500;

      white-space: nowrap;

    }

  }

就能够实现如下的返回效果了:

电脑端的效果图移动端的效果图

🥨加载进度条

在/layouts/partials/footer/custom.html中加入以下代码：

1
2
3
4
5
6
7
8
9


<script src="https://npm.elemecdn.com/nprogress@0.2.0/nprogress.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://npm.elemecdn.com/nprogress@0.2.0/nprogress.css" crossorigin="anonymous" />
<script>
    NProgress.start();
    document.addEventListener("readystatechange", () => {
        if (document.readyState === "interactive") NProgress.inc(0.8);
        if (document.readyState === "complete") NProgress.done();
    });
</script>

效果图如下：

进度条

🍿文章字数统计

在details.html中找到class="article-title-wrapper"，在这个代码块结束后面插入如下代码：

 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


{{ $showReadingTime := .Params.readingTime | default (.Site.Params.article.readingTime) }}

    {{ $showDate := not .Date.IsZero }}

    {{ $showWordCount := .WordCount }}

    {{ $showFooter := or $showDate $showReadingTime }}

    {{ if $showFooter }}

    <footer class="article-time">

        {{ if $showDate }}

            <div>

                {{ partial "helper/icon" "date" }}

                <time class="article-time--published">

                    {{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}

                </time>

            </div>

        {{ end }}

  

        {{ if $showReadingTime }}

                <div>

                    {{ partial "helper/icon" "clock" }}

                    <time class="article-time--reading">

                        {{ T "article.readingTime" .ReadingTime }}

                    </time>

                </div>

            {{ end }}

  

        {{ if .WordCount }}

                <div>

                    {{ partial "helper/icon" "pencil" }}

                    <span class="article-word-count">

                        字数: {{ .WordCount }} 字

                    </span>

                </div>

            {{ end }}

    </footer>

    {{ end }}

之后在 assets\icons 中新建一个"pencil.svg"，我选择的是一个键盘类型的，如下

1

<svg fill="#000000" width="256px" height="256px" viewBox="0 0 100 100" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><title></title><path d="M60.49,43.77V40.63a1,1,0,0,1,1-1h3.13a1,1,0,0,1,1,1v3.14a1,1,0,0,1-1,1H61.49A1,1,0,0,1,60.49,43.77Zm4.35,5.15v3.14a1,1,0,0,0,1,1H69a1,1,0,0,0,1-1V48.92a1,1,0,0,0-1-1H65.84A1,1,0,0,0,64.84,48.92Zm-8.71,0v3.14a1,1,0,0,0,1,1h3.14a1,1,0,0,0,1-1V48.92a1,1,0,0,0-1-1H57.13A1,1,0,0,0,56.13,48.92Zm14.06-4.15h3.14a1,1,0,0,0,1-1V40.63a1,1,0,0,0-1-1H70.19a1,1,0,0,0-1,1v3.14A1,1,0,0,0,70.19,44.77ZM70,56.16H66.91a1,1,0,0,0-1,1v3.13a1,1,0,0,0,1,1H70a1,1,0,0,0,1-1V57.16A1,1,0,0,0,70,56.16ZM52.78,44.77h3.14a1,1,0,0,0,1-1V40.63a1,1,0,0,0-1-1H52.78a1,1,0,0,0-1,1v3.14A1,1,0,0,0,52.78,44.77Zm9,11.39H38.34a1,1,0,0,0-1,1v3.13a1,1,0,0,0,1,1H61.79a1,1,0,0,0,1-1V57.16A1,1,0,0,0,61.79,56.16Zm-28.7,0H30a1,1,0,0,0-1,1v3.13a1,1,0,0,0,1,1h3.13a1,1,0,0,0,1-1V57.16A1,1,0,0,0,33.09,56.16ZM30,48.92v3.14a1,1,0,0,0,1,1h3.14a1,1,0,0,0,1-1V48.92a1,1,0,0,0-1-1H31A1,1,0,0,0,30,48.92Zm-3.35-4.15h3.14a1,1,0,0,0,1-1V40.63a1,1,0,0,0-1-1H26.67a1,1,0,0,0-1,1v3.14A1,1,0,0,0,26.67,44.77Zm20.76,4.15v3.14a1,1,0,0,0,1,1h3.14a1,1,0,0,0,1-1V48.92a1,1,0,0,0-1-1H48.43A1,1,0,0,0,47.43,48.92ZM82,34.05V66a2,2,0,0,1-2,2H20a2,2,0,0,1-2-2V34.05a2,2,0,0,1,2-2H80A2,2,0,0,1,82,34.05Zm-4,2H22V64H78ZM35.38,44.77h3.13a1,1,0,0,0,1-1V40.63a1,1,0,0,0-1-1H35.38a1,1,0,0,0-1,1v3.14A1,1,0,0,0,35.38,44.77Zm8.7,0h3.14a1,1,0,0,0,1-1V40.63a1,1,0,0,0-1-1H44.08a1,1,0,0,0-1,1v3.14A1,1,0,0,0,44.08,44.77Zm-5.35,4.15v3.14a1,1,0,0,0,1,1h3.14a1,1,0,0,0,1-1V48.92a1,1,0,0,0-1-1H39.73A1,1,0,0,0,38.73,48.92Z"></path></g></svg>

这样就能够得到这样的效果啦

字数统计

🍛博客底部的统计与动态效果

在layouts/partials/footer/custom.html里添加以下JS代码，其中s1是网站创建日期。

 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


<!-- Add blog running time -->

<script>

    let s1 = '2024-3-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里添加以下代码：

 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


<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>

  

    <script language="javascript">

        var now = new Date();

        function createtime(){

            // 当前时间

            now.setTime(now.getTime() + 250);

            var grt = new Date("2024/03/19 00:00:00"); // 网站诞生时间，请替换为实际时间

            var days = (now - grt) / 1000 / 60 / 60 / 24;

            var dnum = Math.floor(days);

            var hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);

            var hnum = Math.floor(hours);

            if (String(hnum).length == 1) { hnum = "0" + hnum; }

            var minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);

            var mnum = Math.floor(minutes);

            if (String(mnum).length == 1) { mnum = "0" + mnum; }

            var seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);

            var snum = Math.round(seconds);

            if (String(snum).length == 1) { snum = "0" + snum; }

            document.getElementById("timeDate").innerHTML = "🛰️Alen's Blog 已稳定运行 " + dnum + " 天 ";

            document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";

        }

        setInterval(createtime, 250);

    </script>

    <section class="totalcount">

        {{$scratch := newScratch}}

        {{ range (where .Site.RegularPages "Type" "post") }}

        {{$scratch.Add "total" .WordCount}}

        {{ end }}

        💻发表了 {{ len (where .Site.RegularPages "Type" "post") }} 篇文章 ·

        🌋 总计 {{$scratch.Get "total"}} 字

    </section>

  

    <span id="voyager">载入旅行者一号离地球距离信息...</span>

  

    <script language="javascript">

              var now = new Date();

              function createtime(){

                  // 当前时间

                  now.setTime(now.getTime()+250);

                  var start = new Date("08/01/2022 00:00:00"); // 旅行者1号开始计算的时间

                  var dis = Math.trunc(23400000000 + ((now - start) / 1000) * 17); // 距离=秒数*速度 记住转换毫秒

                  var unit = (dis / 149600000).toFixed(6);  // 天文单位

                  document.getElementById("voyager").innerHTML = "👾旅行者 1 号当前距离地球 "+ dis +" 千米，约为 "+ unit +" 个天文单位 🚀"

              }

              setInterval("createtime()",250);

    </script>

最后，在config.yaml中进行如下操作

1

hasCJKLanguage: true

这样一切就大功告成啦，效果图如下

Footer效果图

🍱有关左侧边栏部分的魔改

左边侧栏部分我统一居中的图标和头像

头像居中则需要找到 \assets\scss\partials\sidebar.scss，对下面的代码块进行修改（以下是经过修改了的）

 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


.site-avatar {
    position: relative;
    margin-right:auto; //站点头像居中
    margin-left:auto; //站点头像居中
    width: var(--sidebar-avatar-size);
    height: var(--sidebar-avatar-size);

.site-name {
    color: var(--accent-color);
    text-align:center; //站点名称居中
    font-size: 1.8rem;

    @include respond(2xl) {
        font-size: 2rem;
    }
}

.site-description {
    color: var(--body-text-color);
    font-weight: normal;
    text-align:center; //站点描述居中
    font-size: 1.6rem;

    @include respond(2xl) {
        font-size: 1.7rem;
    }
}

左边栏的位置拉大如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


.left-sidebar {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-self: stretch;

    width: 100%;
    padding: 30px 0 15px 0;
    max-width: none;
    min-width: 15%; // 这里控制导航宽度

📌图标

由于原主题中的图标风格我个人并不是很喜欢，所以就找到了相对应的svg，将对应的svg更换为我喜欢的比较具有像素感的svg，效果图如下

修改前修改后

实现这一效果的操作如下

找到theme\hugo-theme-stack\assets\icons中的相关svg，然后再去找到你喜欢的svg代码进行更换，这样图标就更换成功啦

关于social的图标以及设置则在config.yaml中找到social下面的代码块，把相对应的信息填进去，下面是我在config.yaml中有关我Gallery的代码部分，需要的小伙伴可以进行参考

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


menu:
    main: []

    social:

        - identifier: 画廊Gallery

          name: 作品集Gallery

          url: https://gallery.alenliu.space/

          params:

            newTab: true

            icon: 作品集Gallery

接着就在assets\icon中新建一个svg文件，命名要与icon后面填入的相同

以此类推，我们social模块就可以完成自定义还有自增加了

👾头像旋转

头像部分除了刚刚刚刚的居中处理，还加了一个360度的旋转效果

在 assets\scss\custom.scss 中添加如下代码

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


// 头像旋转动画

.sidebar header .site-avatar .site-logo {

  transition: transform 1.65s ease-in-out; // 旋转时间

}

  

.sidebar header .site-avatar .site-logo:hover {

  transform: rotate(360deg); // 旋转角度为360度

}

这样就完成啦，当然你也可以据此进行你的自定义

👋🏼首页欢迎横幅与🗓️热力图

在 /layouts/index.html 的 <section class="article-list"> 前添加以下代码：

  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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341


<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"> To </span>

      <span class="jump-text3" style="color:#e99312">A</span><span class="jump-text4" style="color:#e99312">l</span><span class="jump-text5" style="color:#e99312">e</span><span class="jump-text6" style="color:#e99312">n</span><span class="jump-text7" style="color:#e99312">Liu</span><span class="jump-text8" style="color:#e99312">'s</span>

      <span class="jump-text9" style="color:#e99312">Blog</span>

    </p>

    <div id="heatmap" style="

  max-width: 600px;

  height: 180px;

  padding: 2px;

  text-align: center;

  margin: auto"

></div>

<script src="https://npm.elemecdn.com/echarts@5.3.0/dist/echarts.min.js"></script>

<script type="text/javascript">

  var chartDom = document.getElementById('heatmap');

  var myChart = echarts.init(chartDom);

  window.onresize = function() {

      myChart.resize();

  };

  var option;

  

  // echart heatmap data seems to only support two elements tuple

  // it doesn't render when each item has 3 value

  // it also only pass first 2 elements when reading event param

  // so here we build a map to store additional metadata like link and title

  // map format {date: [{wordcount, link, title}]}

  // for more information see https://blog.douchi.space/hugo-blog-heatmap

  var dataMap = new Map();

  {{ range ((where .Site.RegularPages "Type" "post")) }}

    var key = {{ .Date.Format "2006-01-02" }};

    var value = dataMap.get(key);

    var wordCount = {{ .WordCount }};

    var link = {{ .RelPermalink}};

    var title = {{ .Title }};

    // multiple posts in same day

    if (value == null) {

      dataMap.set(key, [{wordCount, link, title}]);

    } else {

      value.push({wordCount, link, title});

    }

  {{- end -}}

  

  var data = [];

  // sum up the word count

  for (const [key, value] of dataMap.entries()) {

    var sum = 0;

    for (const v of value) {

      sum += v.wordCount;

    }

    data.push([key, (sum / 1000).toFixed(1)]);

  }

  var startDate = new Date();

  var year_Mill = startDate.setFullYear((startDate.getFullYear() - 1));

  var startDate = +new Date(year_Mill);

  var endDate = +new Date();

  

  var dayTime = 3600 * 24 * 1000;

  startDate = echarts.format.formatTime('yyyy-MM-dd', startDate);

  endDate = echarts.format.formatTime('yyyy-MM-dd', endDate);

  

  // change date range according to months we want to render

  function heatmap_width(months){            

    var startDate = new Date();

    var mill = startDate.setMonth((startDate.getMonth() - months));

    var endDate = +new Date();

    startDate = +new Date(mill);

  

    endDate = echarts.format.formatTime('yyyy-MM-dd', endDate);

    startDate = echarts.format.formatTime('yyyy-MM-dd', startDate);

  

    var showmonth = [];

    showmonth.push([

        startDate,

        endDate

    ]);

    return showmonth

  };

  

  function getRangeArr() {

    const windowWidth = window.innerWidth;

    if (windowWidth >= 600) {

      return heatmap_width(12);

    } else if (windowWidth >= 400) {

      return heatmap_width(9);

    } else {

      return heatmap_width(6);

    }

  }

  

  option = {

    title: {

        top: 0,

        left: 'center',

        text: '🗓️Alen Record Diary'

    },

    tooltip: {

      hideDelay: 1000,

      enterable: true,

      formatter: function (p) {

        const date = p.data[0];

        const posts = dataMap.get(date);

        var content = `${date}`;

        for (const [i, post] of posts.entries()) {

            content += "<br>";

            var link = post.link;

            var title = post.title;

            var wordCount = (post.wordCount / 1000).toFixed(1);

            content += `<a href="${link}" target="_blank">${title} | ${wordCount} 千字</a>`

        }

        return content;

      }

    },

    visualMap: {

        min: 0,

        max: 20,

        type: 'piecewise',

        orient: 'horizontal',

        left: 'center',

        top: 30,

        inRange: {  

          //  [floor color, ceiling color]

          color: ['#7aa8744c', '#7AA874' ]

        },

        splitNumber: 4,

        text: ['千字', ''],

        showLabel: true,

        itemGap: 20,

    },

    calendar: {

        top: 80,

        left: 20,

        right: 4,

        cellSize: ['auto', 12],

        range: getRangeArr(),

        itemStyle: {

            color: '#F1F1F1',

            borderWidth: 2.5,

            borderColor: '#fff',

        },

        yearLabel: { show: false },

        // the splitline between months. set to transparent for now.

        splitLine: {

          lineStyle: {

            color: 'rgba(0, 0, 0, 0.0)',

            // shadowColor: 'rgba(0, 0, 0, 0.5)',

            // shadowBlur: 5,

            // width: 0.5,

            // type: 'dashed',

          }

        }

    },

    series: {

        type: 'heatmap',

        coordinateSystem: 'calendar',

        data: data,

    }

  };

  myChart.setOption(option);

  myChart.on('click', function(params) {

    if (params.componentType === 'series') {

      // open the first post on the day

      const post = dataMap.get(params.data[0])[0];

      const link = window.location.origin + post.link;

      window.open(link, '_blank').focus();

    }

});

</script>

</div>

接着在/assets/scss/custom.scss 中加入以下代码：

  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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213


//首页欢迎板块样式

.welcome {

  color: var(--card-text-color-main);

  background: var(--card-background);

  box-shadow: var(--shadow-l2);

  border-radius: 30px;

  display: inline-block;

}

// 👋emoji实现摆动效果

.shake {

  display: inline-block;

  animation: shake 1s;

  animation-duration: 1s;

  animation-timing-function: ease;

  animation-delay: 0s;

  animation-iteration-count: 1;

  animation-direction: normal;

  animation-fill-mode: none;

  animation-play-state: running;

  animation-name: shake;

  animation-timeline: auto;

  animation-range-start: normal;

  animation-range-end: normal;

  animation-delay: 2s;

  @keyframes shake {

    0% {

      transform: rotate(0);

    }

    25% {

      transform: rotate(45deg) scale(1.2);

    }

    50% {

      transform: rotate(0) scale(1.2);

    }

    75% {

      transform: rotate(45deg) scale(1.2);

    }

    100% {

      transform: rotate(0);

    }

  }

}

// 实现字符跳动动画

.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;

}

  

.jump-text4 {

  display: inline-block;

  animation: jump 0.5s 1;

  animation-delay: 0.3s;

}

  

.jump-text5 {

  display: inline-block;

  animation: jump 0.5s 1;

  animation-delay: 0.4s;

}

  

.jump-text6 {

  display: inline-block;

  animation: jump 0.5s 1;

  animation-delay: 0.5s;

}

  

.jump-text7 {

  display: inline-block;

  animation: jump 0.5s 1;

  animation-delay: 0.6s;

}

  

.jump-text8 {

  display: inline-block;

  animation: jump 0.5s 1;

  animation-delay: 0.7s;

}

  

.jump-text9 {

  display: inline-block;

  animation: jump 0.5s 1;

  animation-delay: 0.9s;

}

  

@keyframes jump {

  0% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-20px);

  }

  100% {

    transform: translateY(0);

  }

}

这样就能实现以下效果啦

🫧Chat对话气泡的设置

新建 \themes\hugo-theme-stack\layouts\shortcodes\chat.html，然后在里面输入如下代码：

  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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215


 {{ if eq (.Get "position") "left" }}

<div class="chat --other">

    <div class="chat__inner">

        <div class="chat__meta">{{ .Get "name" }}&nbsp;&nbsp;&nbsp;{{ .Get "timestamp" }}</div>

        <div class="chat__text">

            {{ .Inner }}

        </div>

    </div>

</div>

{{ else if eq (.Get "position") "right" }}

<div class="chat --self">

    <div class="chat__inner">

        <div class="chat__meta" style="text-align: right;">{{ .Get "timestamp" }}&nbsp;&nbsp;&nbsp;{{ .Get "name" }}</div>

        <div class="chat__text">

            {{ .Inner }}

        </div>

    </div>

</div>

{{ end }}

  

<style>

    .chat {

        margin: 10px;

        padding: 10px;

        position: relative;

        /* 添加相对定位，以便定位尖角箭头 */

        transition: transform 0.2s;

        /* 添加过渡效果，使放大平滑 */

        max-width: 80%;

        min-width: 15%;

    }

    .chat:hover {

        transform: scale(1.05);

    }

    .chat.--self {

        text-align: left;

        background-color: #b6cfea;

        color: #000000;

        border-radius: 15px;

        width: fit-content;

        margin-left: auto;

    }

    /* 尖角箭头 */

    .chat.--self::before {

        content: "";

        position: absolute;

        right: -18px;

        /* 调整箭头位置 */

        bottom: 5px;

        transform: translateY(-50%);

        border-width: 15px 0 0 20px;

        border-style: solid;

        border-color: transparent transparent transparent #b6cfea;

        /* 箭头颜色与对话框背景颜色一致 */

    }

    /* 左边对话框样式 */

    .chat.--other {

        text-align: left;

        background-color: #87ce91;

        color: #333;

        border-radius: 15px;

        position: relative;

        width: fit-content;

    }

    /* 左边对话框的尖角箭头 */

    .chat.--other::before {

        content: "";

        position: absolute;

        left: -18px;

        bottom: 5px;

        transform: translateY(-50%);

        border-width: 15px 20px 0 0;

        border-style: solid;

        border-color: transparent #87ce91 transparent transparent;

    }

    /* 消息元数据样式（名称和时间戳） */

    .chat__meta {

        font-weight: bold;

        font-size: 0.7em;

        color: #6f6a6a;

        margin-bottom: 5px;

    }

    /* 消息文本样式 */

    .chat__text {

        font-size: 0.9em;

        margin-left: 10px;

        word-break: break-all;

    }

    [data-scheme="dark"] {

        .chat.--self {

            color: #fefefe;

            background-color: #253958;

        }

        .chat.--self::before {

            border-color: transparent transparent transparent #253958;

        }

        .chat.--other {

            color: #fefefe;

            background-color: #1a1a1a;

        }

        .chat.--other::before {

            border-color: transparent #1a1a1a transparent transparent;

        }

        .chat__meta {

            color: #b1b1b1;

        }

    }

</style>

这是实现效果的模板,输入时删去“\”

1
2
3
4
5
6
7


{\{< chat position="left" name="AlenLiu" timestamp="2024-08-15 7:30">}\}
这是左边对话框的内容。
{\{< /chat >}\}

{\{< chat position="right" name="Joe" timestamp="2024-08-115 7:30" >}\} 
这是右边对话框的内容。
{\{< /chat >}\}

效果如下：

AlenLiu 2024-08-15 7:30

这是左边对话框的内容。

2024-08-115 7:30 Joe

这是右边对话框的内容。

🛒Goods页面的增加

在 layouts\_ defaul 中新建一个goods.html,输入如下代码

  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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253


{{ define "body-class" }}

    article-page

    {{/*

        Enable the right sidebar if

            - Widget different from 'TOC' is enabled

            - TOC is enabled and not empty

    */}}

    {{- $HasWidgetNotTOC := false -}}

    {{- $TOCWidgetEnabled := false -}}

    {{- range .Site.Params.widgets.page -}}

        {{- if ne .type "toc" -}}

            {{ $HasWidgetNotTOC = true -}}

        {{- else -}}

            {{ $TOCWidgetEnabled = true -}}

        {{- end -}}

    {{- end -}}

  

    {{- $TOCManuallyDisabled := eq .Params.toc false -}}

    {{- $TOCEnabled := and (not $TOCManuallyDisabled) $TOCWidgetEnabled -}}

    {{- $hasTOC := ge (len .TableOfContents) 100 -}}

    {{- .Scratch.Set "TOCEnabled" (and $TOCEnabled $hasTOC) -}}

    {{- .Scratch.Set "hasWidget" (or $HasWidgetNotTOC (and $TOCEnabled $hasTOC)) -}}

  

{{ end }}

  

{{ define "main" }}

{{ partial "article/article.html" . }}

<!-- ------------------------- -->

<style>

/*  */

@media (min-width: 1024px) {

  .article-list--compact.links {

    display: grid;

    grid-template-columns: 1fr 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--compact.links article {

    padding: 30px 16px;

    overflow: hidden;

}

  

.article-list--compact.links article {

    .duiqi {

    min-height: 19rem;

    display: flex;

    justify-content: center;

    align-items: center;

    }

}

  

.article-list--compact article .article-image img {

    width: 10rem;

    height: auto;

    text-align: conter;

    object-fit: cover;

    border-radius: 17%;

}

  

</style>

<!-- ------------------------------ -->

    {{ if .Params.links }}

    <div class="article-list--compact links" >

        {{ range $i, $link := .Params.links }}

            <article>

                <div class="duiqi">

                {{ with $link.image }}

                <div class="article-image">

                    <img src="{{ . }}" loading="lazy">

                </div>

            {{ end }}

                </div>

                <!-- <a href="{{ $link.website }}" target="_blank" rel="noopener"> -->

                    <div class="article-details">

                        <h2 class="article-title">

                            {{- $link.title -}}

                        </h2>

                        <footer class="article-time">

                            {{ with $link.description }}

                                {{ . }}

                            {{ else }}

                                {{ $link.website }}

                            {{ end }}

                        </footer>

                    </div>

  

                <!-- </a> -->

            </article>

        {{ end }}

    </div>

    {{ end }}

  

    {{ if not (eq .Params.comments false) }}

        {{ partial "comments/include" . }}

    {{ end }}

  

    {{ partialCached "footer/footer" . }}

  

    {{ partialCached "article/components/photoswipe" . }}

{{ end }}

  

{{ define "left-sidebar" }}

{{ if (.Scratch.Get "TOCEnabled") }}

        <div id="article-toolbar" style="position: sticky;top: 5px;z-index: 1000;">

            <a href="{{ .Site.BaseURL | relLangURL }}" class="back-home">

                {{ (resources.Get "icons/back.svg").Content | safeHTML }}

                <span>{{ T "article.back" }}</span>

            </a>

        </div>

    {{ else }}

        {{ partial "sidebar/left.html" . }}

    {{ end }}

{{ end }}

之后在assets\icon中新建一个svg文件，命名为goods.svg

1

<svg height="200px" width="200px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 496 496" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:#3A2819;" d="M288,299.2c0,7.2-5.6,12.8-12.8,12.8h-53.6c-7.2,0-12.8-5.6-12.8-12.8v-77.6 c0-7.2,5.6-12.8,12.8-12.8h53.6c7.2,0,12.8,5.6,12.8,12.8V299.2z"></path> <path style="fill:#A09D93;" d="M496,465.6c0,10.4-8,22.4-18.4,22.4H18.4C8,488,0,476,0,465.6V272.8C0,262.4,8,256,18.4,256h459.2 c10.4,0,18.4,6.4,18.4,16.8V465.6z"></path> <path style="fill:#D8D6CA;" d="M496,440.8c0,10.4-8,15.2-18.4,15.2H18.4C8,456,0,451.2,0,440.8V248c0-10.4,8-16,18.4-16h459.2 c10.4,0,18.4,5.6,18.4,16V440.8z"></path> <path style="fill:#C1BDAE;" d="M16,232h461.6c10.4,0,18.4,5.6,18.4,16v192.8c0,10.4-8,15.2-18.4,15.2"></path> <path style="fill:#F9A12C;" d="M280,334.4c0,0.8-0.8,1.6-1.6,1.6h-60.8c-0.8,0-1.6-0.8-1.6-1.6v-12.8c0-0.8,0.8-1.6,1.6-1.6h60.8 c0.8,0,1.6,0.8,1.6,1.6V334.4z"></path> <path style="fill:#E88813;" d="M224,320L224,320h56l0,0v14.4c0,0.8-0.8,1.6-1.6,1.6"></path> <path style="fill:#F9A12C;" d="M280,374.4c0,0.8-0.8,1.6-1.6,1.6h-60.8c-0.8,0-1.6-0.8-1.6-1.6v-12.8c0-0.8,0.8-1.6,1.6-1.6h60.8 c0.8,0,1.6,0.8,1.6,1.6V374.4z"></path> <path style="fill:#E88813;" d="M224,360L224,360h56l0,0v14.4c0,0.8-0.8,1.6-1.6,1.6"></path> <g> <path style="fill:#3A2819;" d="M184,408.8c0,7.2-4.8,15.2-12,15.2H42.4c-7.2,0-10.4-8-10.4-15.2V280c0-7.2,3.2-16,10.4-16h128.8 c7.2,0,12,8,12,16v128.8H184z"></path> <path style="fill:#3A2819;" d="M464,410.4c0,7.2-6.4,13.6-13.6,13.6H317.6c-7.2,0-13.6-6.4-13.6-13.6V277.6 c0-7.2,6.4-13.6,13.6-13.6h132.8c7.2,0,13.6,6.4,13.6,13.6L464,410.4L464,410.4z"></path> </g> <path style="fill:#EA1F0A;" d="M152,320h-16v-20.8c0-5.6-5.6-11.2-10.4-11.2h-36c-5.6,0-9.6,5.6-9.6,11.2V320H62.4 c-5.6,0-6.4,0.8-6.4,6.4v36c0,5.6,0.8,13.6,6.4,13.6H80v13.6c0,5.6,4,10.4,9.6,10.4h36c5.6,0,10.4-5.6,10.4-10.4V376h16 c5.6,0,8-8,8-13.6v-36C160,320.8,157.6,320,152,320z"></path> <path style="fill:#BC0400;" d="M80,376v13.6c0,5.6,4,10.4,9.6,10.4h36c5.6,0,10.4-5.6,10.4-10.4V376h16c5.6,0,8-8,8-13.6v-36 c0-5.6-2.4-6.4-8-6.4h-16"></path> <path style="fill:#329908;" d="M388.8,319.2c0,16.8-13.6,29.6-29.6,29.6c-16.8,0-29.6-13.6-29.6-29.6c0-16.8,13.6-29.6,29.6-29.6 C375.2,289.6,388.8,303.2,388.8,319.2z"></path> <path style="fill:#236D00;" d="M380,298.4c12,12,12,30.4,0,42.4s-30.4,12-42.4,0"></path> <path style="fill:#07BED6;" d="M444.8,369.6c0,16.8-13.6,29.6-29.6,29.6c-16.8,0-29.6-13.6-29.6-29.6c0-16.8,13.6-29.6,29.6-29.6 C431.2,339.2,444.8,352.8,444.8,369.6z"></path> <path style="fill:#00A1AD;" d="M436,348c12,12,12,30.4,0,42.4s-30.4,12-42.4,0"></path> <path style="fill:#D8D6CA;" d="M474.4,248c0,3.2-2.4,8-5.6,8H27.2c-3.2,0-5.6-4.8-5.6-8l0,0c0-3.2,2.4-8,5.6-8h441.6 C472,240,474.4,244.8,474.4,248L474.4,248z"></path> <path style="fill:#4C5254;" d="M256,192h-24v-55.2c0-14.4-9.6-25.6-23.2-25.6s-24,8.8-24,24.8h-24c0-24,20-49.6,47.2-49.6 s47.2,22.4,47.2,49.6v56H256z"></path> <path style="fill:#2F423F;" d="M172.8,124c-6.4,0-12,5.6-12,12c0,14.4-10.4,25.6-24.8,25.6s-24-11.2-24-25.6V8H88v128 c0,27.2,20.8,49.6,48.8,49.6s48.8-22.4,48.8-49.6C185.6,129.6,179.2,124,172.8,124z"></path> </g></svg>

这里附上我的svg文件

之后在content\page 中新建一个名为“goods”的文件夹，在里面新建一个md文件，我的md文件内容格式如下：

 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


---

title: "『🛒Goods』"

lincense: false

readingTime: false

toc: false

comments: true

slugs: "goods"

layout: goods

description: 一些印象深刻的好物

menu:

    main:

        name: 好物|Equipments

        weight: -33

        params:

            icon: goods

  

links:

  - title: 小新pro16

    description: 大砖块低生产工具，但对我这个不打游戏的人。。。super够用,同时开贼多后台也照常运行！（总之就是很棒就对了）

    image: 电脑.jpg

---

这样，一个崭新的goods页面就大功告成了

Goods页面效果图

大家也可以根据这样的模板来不断完善你的goods内容！

🔗友链页面的增加与修改

在content\page 中新建一个links的文件夹，在文件夹中新建一个md文件，下面是我的links的md文件内容

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


---

title: 友链|My Friends

links:

  - title: 🛰️AlenLiu's Blog

    description: 🛰️AlenLiu's Record Space,一个用心记录的人

    website: hhttps：//blog.alenliu.space/

    image: https://blog.alenliu.space/img/avatar.png

---

这里面书写有关你的描述
...
...
...

这样，友链界面也就大功告成了

大家可以按照这个模板来自行添加你的朋友们的友链喔

之后，由于友链的样式我进行了三栏的修改，在这里我们聊一下

我在custom.scss中写入了一下代码实现了友链界面的三栏化

 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


//链接三栏

@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;

        }

      }

    }

  }

效果图如下：

Links效果图

💻Mac代码块样式

首先在根目录的static文件中创建一个img文件夹，然后再在img文件夹中新建一个code-header.svg文件，接着在这个svg文件中写入如下内容

1
2
3
4
5


<svg xmlns="http://www.w3.org/2000/svg" version="1.1"  x="0px" y="0px" width="450px" height="130px">
    <ellipse cx="65" cy="65" rx="50" ry="52" stroke="rgb(220,60,54)" stroke-width="2" fill="rgb(237,108,96)"/>
    <ellipse cx="225" cy="65" rx="50" ry="52"  stroke="rgb(218,151,33)" stroke-width="2" fill="rgb(247,193,81)"/>
    <ellipse cx="385" cy="65" rx="50" ry="52"  stroke="rgb(27,161,37)" stroke-width="2" fill="rgb(100,200,86)"/>
</svg>

接下来在custom.scss 中添加以下内容

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


//为代码块顶部添加macos样式
.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;
  }
}

这样一个mac窗口的代码块样式就搞定了

效果图如下

Mac代码样式

🖱️行内代码颜色更改

在custom.scss 中写入以下代码

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


:root {

  // Vue plan 1

  // --code-background-color: #f3f4f4;

  // --code-text-color: #476582;

  

  // Vue plan 2

  --code-background-color: #f8f8f8;

  --code-text-color: #e96900;

}

🤖Channel Talk 机器人部署

部署这个机器人的初衷是当作评论区使用，因为当时的评论区还没有设置邮箱通知

之后在大佬朋友的指导下就完成了twikoo的部署，想着这个机器人也蛮不错的，便就没有删除

这是一个比较好玩的小插件，是日本公司提供的一个名为Channel Talk的服务，网页的聊天气泡是个入口，实际的聊天需要在app里面完成。

在注册完之后打开 “setting-install and configuration-install plugin for web”，把显示的 JS 复制

之后打开 layouts\partials\footer\components 下的 script.html 文件扔进去就好。

大家也可以在这个网页内部完成自己的气泡美化，因为里面的操作相对简单，所以这里就不再赘述了

这是部署完之后的效果

Channel Talk的效果图

🍻特别感谢供参考者

🛏️末语

洋洋洒洒，终于结束了这篇博客

由于暑期为了上荣耀王者而导致整天浑浑噩噩郁郁寡欢，迟迟不肯落墨，导致这篇博客的写作时长跨度较大，因此也有了不够全面的诟病

其中一些相对零碎的细节，诸如social的svg、引用栏的优化、选中时的颜色更改、其他地方的颜色更改、goods页面和links页面的再完善，也就没有再多加赘述了（因为我也迷迷糊糊的不知道那些地方做了修改，等到真正能读懂所有文件和相关代码时，或许我会再出一期，也或许届时的博客又不一样了）

快开学了，预祝大家职场学园均顺利😆

校区变更，城市变更，希望我能写出更多有意义的文字

👋🏼我们下次再见

对于照片的操作尚未熟练，这是完整的封面图

Tim 2024-08-32 24:59:01

告诉Alen，我很期待他的装修日志。

2024-08-32 24:59:12 Lin

我想他会完成的，他或许不会再浑浑噩噩下去了。

To Be Continue