Hugo Theme Stack美化教程

1
git clone https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

1
//----------------------------------------------------
2
// 页面基本配色
3
:root {
4
  // 全局顶部边距
5
  --main-top-padding: 30px;
6
  // 全局卡片圆角
7
  --card-border-radius: 25px;
8
  // 标签云卡片圆角
9
  --tag-border-radius: 8px;
10
  // 卡片间距
11
  --section-separation: 40px;
12
  // 全局字体大小
13
  --article-font-size: 1.8rem;
14
  // 行内代码背景色
15
  --code-background-color: #f8f8f8;
16
  // 行内代码前景色
17
  --code-text-color: #e96900;
18
  // 暗色模式下样式
19
  &[data-scheme="dark"] {
20
    // 行内代码背景色
21
    --code-background-color: #ff6d1b17;
22
    // 行内代码前景色
23
    --code-text-color: #e96900;
24
    // 暗黑模式下背景色
25
    --body-background: #000;
26
    // 暗黑模式下卡片背景色
27
    --card-background: hsl(225 13% 8% / 1);
28
  }
29
}
30
//------------------------------------------------------
31
// 修复引用块内容窄页面显示问题
32
a {
33
  word-break: break-all;
34
}
35

36
code {
37
  word-break: break-all;
38
}
39

40
//---------------------------------------------------
41
// 文章封面高度
42
.article-list article .article-image img {
43
  width: 100%;
44
  height: 200px !important;
45
  object-fit: cover;
46

47
  @include respond(md) {
48
      height: 250px !important;
49
  }
50

51
  @include respond(xl) {
52
      height: 285px !important;
53
  }
54
}
55

56
//--------------------------------------------------
57
// 文章内容图片圆角阴影
58
.article-page .main-article .article-content {
59
  img {
60
    max-width: 96% !important;
61
    height: auto !important;
62
    border-radius: 8px;
63
  }
64
}
65

66
//------------------------------------------------
67
// 文章内容引用块样式
68
.article-content {
69
  blockquote {
70
    border-left: 6px solid #358b9a1f !important;
71
    background: #3a97431f;
72
  }
73
}
74
// ---------------------------------------
75
// 代码块样式修改
76
.highlight {
77
  max-width: 102% !important;
78
  background-color: var(--pre-background-color);
79
  padding: var(--card-padding);
80
  position: relative;
81
  border-radius: 20px;
82
  margin-left: -7px !important;
83
  margin-right: -12px;
84
  box-shadow: var(--shadow-l1) !important;
85

86
  &:hover {
87
    .copyCodeButton {
88
      opacity: 1;
89
    }
90
  }
91

92
  // keep Codeblocks LTR
93
  [dir="rtl"] & {
94
    direction: ltr;
95
  }
96

97
  pre {
98
    margin: initial;
99
    padding: 0;
100
    margin: 0;
101
    width: auto;
102
  }
103
}
104

105
// light模式下的代码块样式调整
106
[data-scheme="light"] .article-content .highlight {
107
  background-color: #fff9f3;
108
}
109

110
[data-scheme="light"] .chroma {
111
  color: #ff6f00;
112
  background-color: #fff9f3cc;
113
}
114

115
//-------------------------------------------
116
// 设置选中字体的区域背景颜色
117
//修改选中颜色
118
::selection {
119
  color: #fff;
120
  background: #34495e;
121
}
122

123
a {
124
  text-decoration: none;
125
  color: var(--accent-color);
126

127
  &:hover {
128
    color: var(--accent-color-darker);
129
  }
130

131
  &.link {
132
    color: #4288b9ad;
133
    font-weight: 600;
134
    padding: 0 2px;
135
    text-decoration: none;
136
    cursor: pointer;
137

138
    &:hover {
139
      text-decoration: underline;
140
    }
141
  }
142
}
143

144
//-------------------------------------------------
145
//文章封面高度更改
146
.article-list article .article-image img {
147
  width: 100%;
148
  height: 150px;
149
  object-fit: cover;
150

151
  @include respond(md) {
152
    height: 200px;
153
  }
154

155
  @include respond(xl) {
156
    height: 305px;
157
  }
158
}
159

160
//---------------------------------------------------
161
// 全局页面布局间距调整
162
.main-container {
163
  min-height: 100vh;
164
  align-items: flex-start;
165
  padding: 0 15px;
166
  gap: var(--section-separation);
167
  padding-top: var(--main-top-padding);
168

169
  @include respond(md) {
170
    padding: 0 37px;
171
  }
172
}
173

174
//--------------------------------------------------
175
//页面三栏宽度调整
176
.container {
177
  margin-left: auto;
178
  margin-right: auto;
179

180
  .left-sidebar {
181
    order: -3;
182
    max-width: var(--left-sidebar-max-width);
183
  }
184

185
  .right-sidebar {
186
    order: -1;
187
    max-width: var(--right-sidebar-max-width);
188

189
    /// Display right sidebar when min-width: lg
190
    @include respond(lg) {
191
      display: flex;
192
    }
193
  }
194

195
  &.extended {
196
    @include respond(md) {
197
      max-width: 1024px;
198
      --left-sidebar-max-width: 25%;
199
      --right-sidebar-max-width: 22% !important;
200
    }
201

202
    @include respond(lg) {
203
      max-width: 1280px;
204
      --left-sidebar-max-width: 20%;
205
      --right-sidebar-max-width: 30%;
206
    }
207

208
    @include respond(xl) {
209
      max-width: 1453px; //1536px;
210
      --left-sidebar-max-width: 15%;
211
      --right-sidebar-max-width: 25%;
212
    }
213
  }
214

215
  &.compact {
216
    @include respond(md) {
217
      --left-sidebar-max-width: 25%;
218
      max-width: 768px;
219
    }
220

221
    @include respond(lg) {
222
      max-width: 1024px;
223
      --left-sidebar-max-width: 20%;
224
    }
225

226
    @include respond(xl) {
227
      max-width: 1280px;
228
    }
229
  }
230
}
231

232
//-------------------------------------------------------
233
//全局页面小图片样式微调
234
.article-list--compact article .article-image img {
235
  width: var(--image-size);
236
  height: var(--image-size);
237
  object-fit: cover;
238
  border-radius: 17%;
239
}
240

241
//----------------------------------------------------
242
//固定代码块的高度
243
.article-content {
244
  .highlight {
245
      padding: var(--card-padding);
246
      pre {
247
          width: auto;
248
          max-height: 20em;
249
      }
250
  }
251
}
252

253
//--------------------------------------------------
254
// 修改首页搜索框样式
255
.search-form.widget input {
256
  font-size: 1.5rem;
257
  padding: 44px 25px 19px;
258
}

1
//----------------------------------------------------
2
// 下拉菜单改圆角样式
3
.menu {
4
  padding-left: 0;
5
  list-style: none;
6
  flex-direction: column;
7
  overflow-x: hidden;
8
  overflow-y: scroll;
9
  flex-grow: 1;
10
  font-size: 1.6rem;
11
  background-color: var(--card-background);
12

13
  box-shadow: var(--shadow-l2); //改个阴影
14
  display: none;
15
  margin: 0; //改为0
16
  border-radius: 10px; //加个圆角
17
  padding: 30px 30px;
18

19
  @include respond(xl) {
20
    padding: 15px 0;
21
  }
22

23
  &,
24
  .menu-bottom-section {
25
    gap: 30px;
26

27
    @include respond(xl) {
28
      gap: 25px;
29
    }
30
  }
31

32
  &.show {
33
    display: flex;
34
  }
35

36
  @include respond(md) {
37
    align-items: flex-end;
38
    display: flex;
39
    background-color: transparent;
40
    padding: 0;
41
    box-shadow: none;
42
    margin: 0;
43
  }
44

45
  li {
46
    position: relative;
47
    vertical-align: middle;
48
    padding: 0;
49

50
    @include respond(md) {
51
      width: 100%;
52
    }
53

54
    svg {
55
      stroke-width: 1.33;
56

57
      width: 20px;
58
      height: 20px;
59
    }
60

61
    a {
62
      height: 100%;
63
      display: inline-flex;
64
      align-items: center;
65
      color: var(--body-text-color);
66
      gap: var(--menu-icon-separation);
67
    }
68

69
    span {
70
      flex: 1;
71
    }
72

73
    &.current {
74
      a {
75
        color: var(--accent-color);
76
        font-weight: bold;
77
      }
78
    }
79
  }
80
}

1
//------------------------------------------------
2
//将滚动条修改为圆角样式
3
//菜单滚动条美化
4
.menu::-webkit-scrollbar {
5
  display: none;
6
}
7

8
// 全局滚动条美化
9
html {
10
  ::-webkit-scrollbar {
11
    width: 20px;
12
  }
13

14
  ::-webkit-scrollbar-track {
15
    background-color: transparent;
16
  }
17

18
  ::-webkit-scrollbar-thumb {
19
    background-color: #d6dee1;
20
    border-radius: 20px;
21
    border: 6px solid transparent;
22
    background-clip: content-box;
23
  }
24

25
  ::-webkit-scrollbar-thumb:hover {
26
    background-color: #a8bbbf;
27
  }
28
}

1
//--------------------------------------------------
2
//归档页面双栏
3
/* 归档页面两栏 */
4
@media (min-width: 1024px) {
5
  .article-list--compact {
6
    display: grid;
7
    grid-template-columns: 1fr 1fr;
8
    background: none;
9
    box-shadow: none;
10
    gap: 1rem;
11

12
    article {
13
      background: var(--card-background);
14
      border: none;
15
      box-shadow: var(--shadow-l2);
16
      margin-bottom: 8px;
17
      border-radius: 16px;
18
    }
19
  }
20
}

1
//--------------------------------------------------
2
//引入左上角返回按钮
3
.back-home {
4
  background: var(--card-background);
5
  border-radius: var(--tag-border-radius);
6
  color: var(--card-text-color-tertiary);
7
  margin-right: 0.1rem;
8
  margin-top: 24px;
9
  display: inline-flex;
10
  align-items: center;
11
  font-size: 1.4rem;
12
  text-transform: uppercase;
13
  padding: 10px 20px 10px 15px;
14
  transition: box-shadow 0.3s ease;
15
  box-shadow: var(--shadow-l3);
16

17
  &:hover {
18
    box-shadow: var(--shadow-l2);
19
  }
20

21
  svg {
22
    margin-right: 5px;
23
    width: 20px;
24
    height: 20px;
25
  }
26

27
  span {
28
    font-weight: 500;
29
    white-space: nowrap;
30
  }
31
}
32

33
.main-container .right-sidebar {
34
  order: 2;
35
  max-width: var(--right-sidebar-max-width);
36

37
  /// Display right sidebar when min-width: lg
38
  @include respond(lg) {
39
    display: flex;
40
  }
41
}
42

43
main.main {
44
  order: 1;
45
  min-width: 0;
46
  max-width: 100%;
47
  flex-grow: 1;
48
  display: flex;
49
  flex-direction: column;
50
  gap: var(--section-separation);
51

52
  @include respond(md) {
53
    padding-top: var(--main-top-padding);
54
  }
55
}

1
.......已省略,请自己对照......
2
    {{ partialCached "footer/footer" . }}
3

4
    {{ partialCached "article/components/photoswipe" . }}
5
{{ end }}
6

7
{{ define "left-sidebar" }}
8

9
{{ if (.Scratch.Get "TOCEnabled") }}
10
        <div id="article-toolbar" style="position: sticky;top: 5px;z-index: 1000;">
11
            <a href="{{ .Site.BaseURL | relLangURL }}" class="back-home">
12
                {{ (resources.Get "icons/back.svg").Content | safeHTML }}
13
                <span>{{ T "article.back" }}</span>
14
            </a>
15
        </div>
16
    {{ else }}
17
        {{ partial "sidebar/left.html" . }}
18
    {{ end }}
19
{{ end }}
20

21
{{ define "right-sidebar" }}
22
    {{ if .Scratch.Get "hasWidget" }}{{ partial "sidebar/right.html" (dict "Context" . "Scope" "page") }}{{ end}}
23
{{ end }}

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

1
//----------------------------------------------------------
2
//为代码块顶部添加macos样式
3
.article-content {
4
  .highlight:before {
5
    content: "";
6
    display: block;
7
    background: url(../img/code-header.svg);
8
    height: 32px;
9
    width: 100%;
10
    background-size: 57px;
11
    background-repeat: no-repeat;
12
    margin-bottom: 5px;
13
    background-position: -1px 2px;
14
  }
15
}

1
<div id="heatmap" style="
2
  max-width: 1900px;
3
  height: 180px;
4
  padding: 2px;
5
  text-align: center;
6
  "
7
></div>
8
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
9
<script type="text/javascript">
10
  var chartDom = document.getElementById('heatmap');
11
  var myChart = echarts.init(chartDom);
12
  window.onresize = function() {
13
      myChart.resize();
14
  };
15
  var option;
16

17
  // echart heatmap data seems to only support two elements tuple
18
  // it doesn't render when each item has 3 value
19
  // it also only pass first 2 elements when reading event param
20
  // so here we build a map to store additional metadata like link and title
21
  // map format {date: [{wordcount, link, title}]}
22
  // for more information see https://blog.douchi.space/hugo-blog-heatmap
23
  var dataMap = new Map();
24
  {{ range ((where .Site.RegularPages "Type" "post")) }}
25
    var key = {{ .Date.Format "2006-01-02" }};
26
    var value = dataMap.get(key);
27
    var wordCount = {{ .WordCount }};
28
    var link = {{ .RelPermalink}};
29
    var title = {{ .Title }};
30

31
    // multiple posts in same day
32
    if (value == null) {
33
      dataMap.set(key, [{wordCount, link, title}]);
34
    } else {
35
      value.push({wordCount, link, title});
36
    }
37
  {{- end -}}
38

39
  var data = [];
40
  // sum up the word count
41
  for (const [key, value] of dataMap.entries()) {
42
    var sum = 0;
43
    for (const v of value) {
44
      sum += v.wordCount;
45
    }
46
    data.push([key, (sum / 1000).toFixed(1)]);
47
  }
48

49
  var startDate = new Date();
50
  var year_Mill = startDate.setFullYear((startDate.getFullYear() - 1));
51
  var startDate = +new Date(year_Mill);
52
  var endDate = +new Date();
53

54
  var dayTime = 3600 * 24 * 1000;
55
  startDate = echarts.format.formatTime('yyyy-MM-dd', startDate);
56
  endDate = echarts.format.formatTime('yyyy-MM-dd', endDate);
57

58
  // change date range according to months we want to render
59
  function heatmap_width(months){
60
    var startDate = new Date();
61
    var mill = startDate.setMonth((startDate.getMonth() - months));
62
    var endDate = +new Date();
63
    startDate = +new Date(mill);
64

65
    endDate = echarts.format.formatTime('yyyy-MM-dd', endDate);
66
    startDate = echarts.format.formatTime('yyyy-MM-dd', startDate);
67

68
    var showmonth = [];
69
    showmonth.push([
70
        startDate,
71
        endDate
72
    ]);
73
    return showmonth
74
  };
75

76
  function getRangeArr() {
77
    const windowWidth = window.innerWidth;
78
    if (windowWidth >= 600) {
79
      return heatmap_width(12);
80
    } else if (windowWidth >= 400) {
81
      return heatmap_width(9);
82
    } else {
83
      return heatmap_width(6);
84
    }
85
  }
86

87
  option = {
88
    title: {
89
        top: 0,
90
        left: 'center',
91
        text: '热力图'
92
    },
93
    tooltip: {
94
      hideDelay: 1000,
95
      enterable: true,
96
      formatter: function (p) {
97
        const date = p.data[0];
98
        const posts = dataMap.get(date);
99
        var content = `${date}`;
100
        for (const [i, post] of posts.entries()) {
101
            content += "<br>";
102
            var link = post.link;
103
            var title = post.title;
104
            var wordCount = (post.wordCount / 1000).toFixed(1);
105
            content += `<a href="${link}" target="_blank">${title} | ${wordCount} k</a>`
106
        }
107
        return content;
108
      }
109
    },
110
    visualMap: {
111
        min: 0,
112
        max: 10,
113
        type: 'piecewise',
114
        orient: 'horizontal',
115
        left: 'center',
116
        top: 30,
117

118
        inRange: {
119
          //  [floor color, ceiling color]
120
          color: ['#7aa8744c', '#7AA874' ]
121
        },
122
        splitNumber: 4,
123
        text: ['千字', ''],
124
        showLabel: true,
125
        itemGap: 20,
126
    },
127
    calendar: {
128
        top: 80,
129
        left: 20,
130
        right: 4,
131
        cellSize: ['auto', 13],
132
        range: getRangeArr(),
133
        itemStyle: {
134
            color: '#F1F1F1',
135
            borderWidth: 1.5,
136
            borderColor: '#fff',
137
        },
138
        yearLabel: { show: false },
139
        // the splitline between months. set to transparent for now.
140
        splitLine: {
141
          lineStyle: {
142
            color: 'rgba(0, 0, 0, 0.0)',
143
            // shadowColor: 'rgba(0, 0, 0, 0.5)',
144
            // shadowBlur: 5,
145
            // width: 0.5,
146
            // type: 'dashed',
147
          }
148
        }
149
    },
150
    series: {
151
        type: 'heatmap',
152
        coordinateSystem: 'calendar',
153
        data: data,
154
    }
155
  };
156
  myChart.setOption(option);
157
  myChart.on('click', function(params) {
158
    if (params.componentType === 'series') {
159
      // open the first post on the day
160
      const post = dataMap.get(params.data[0])[0];
161
      const link = window.location.origin + post.link;
162
      window.open(link, '_blank').focus();
163
    }
164
});
165
</script>

1
<script>
2
    (function(u, c) {
3
      var d = document, t = 'script', o = d.createElement(t),
4
          s = d.getElementsByTagName(t)[0];
5
      o.src = u;
6
      if (c) { o.addEventListener('load', function(e) { c(e); }); }
7
      s.parentNode.insertBefore(o, s);
8
    })('//cdn.bootcss.com/pangu/4.0.7/pangu.min.js', function() {
9
      pangu.spacingPage();
10
    });
11
</script>