Featured image of post 『Hugo』Hugo Styles
Hugo

『Hugo』Hugo Styles

分享一些有趣的 Hugo-Stack 自定义主题样式

引言

相信你点开这篇文章时，就已感受到本站主题与站源默认样式有较大区别。

作者最近在自学一些前端的知识，顺便捡起 Hugo 折腾博客建站，理论实践双路开花（不是。在折腾的过程中，结合一些学到的东西，适当发挥，产生了一些曼妙的想法。

本文就此分享一些站源默认样式不具备的特性以及一些有趣的风格魔改玩法。

Preview

在开始修改样式之前呢，请确保你知道自己在做什么！你需要知道你应该修改哪些文件以达到想要的结果。此部分有经验的玩家可以跳过了~

Hugo 的模板渲染具有层级明显的覆盖路径。若你也在使用 Stack 主题，你会发现你的站点目录下存在 ./themes/hugo-theme/stack主题目录，而此主题目录结构是否与你站点根目录的结构非常相似？是的，主题项目本身就是一个完整的 Hugo 站点样式，而 Hugo 会优先索引你站点根目录下的文件，其次才是主题子目录。不同根但同层级下的同名文件，会出现「交并」现象，也即你需要将需要改动的文件连同文件夹一起复制到你的站点根目录下，仅改动你站点根目录下的资源。

仿 Vue 风格魔改

修改「选中目标」样式

你需要新建/修改站点文件 ./assets/scss/custom.scss，添加如下内容：

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

// 设置选中字体的区域背景颜色
::selection {
    background: #dae3ea;
    color: #34495e;
  }
  
  ::-moz-selection {
    background: #dae3ea;
    color: #34495e;
  }
  
  ::-webkit-selection {
    background: #dae3ea;
    color: #34495e;
  }

我们可以获得如下改变，视觉舒适感倍增！

image-20211010200628635
image-20211010200715239

顺便提一嘴有没有人和我一样觉得浏览器默认选中体样式有点丑，虽然平时看的很快，也不会在意这些细节，但停下来观察区分后，这种细节带来的体验升级真是用了就回不去。

修改「正文字体」样式

同样，我们需要改动站点文件./assets/scss/custom.scss，添加如下内容：

1
2
3
4

:root {
    // 字体颜色
    --card-text-color-main: #34495e;
}

我们可以获得如下改变：

image-20211010201217691
image-20211010201233909

修改「行内代码」样式

同样，我们需要改动站点文件./assets/scss/custom.scss，添加如下内容：

1
2
3
4
5
6

:root {
    // 行内代码背景色
    --code-background-color: #f8f8f8;
    // 行内代码前景色
    --code-text-color: #e96900;
}

我们可以获得如下改变：

image-20211010201604590
image-20211010201618142

修改「键盘标签」样式

我们需要改动站点文件./assets/scss/custom.scss，添加如下内容：

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

// 键盘标签样式
kbd {
  margin: 0 .1em;
  padding: .1em .6em;
  font-size: .8em;
  color: #242729;
  background: #fff;
  border: 1px solid #adb3b9;
  border-radius: 3px;
  box-shadow: 0px 1px 0 rgba(12, 13, 14, 0.2), 0 0 0 2px #fff inset;
  white-space: nowrap;
  vertical-align: middle;
  font-family: monospace;
}

使用如下 Markdown 高级语法可以生成键盘标签样式：

1

在 Windows 操作系统中，「复制」功能的快捷键是：<kbd>CTRL</kbd> + <kbd>C</kbd>

我们可以获得如下改变：

在 Windows 操作系统中，「复制」功能的快捷键是：CTRL + C

修改「正文链接」样式

我们需要改动站点文件 ./assets/scss/style.scss，注释掉主题对 <a> 标签的样式设定，然后在文件中添加如下内容：

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

a {
    text-decoration: none;
    color: var(--accent-color);

    &:hover {
        color: var(--accent-color-darker);
    }

    &.link {
        color: #42b983;
        font-weight: 600;
        padding: 0 2px;
        text-decoration: none;
        cursor: pointer;
        
        &:hover{
            text-decoration: underline;
        }
    }
}

我们会获得如下改变：

image-20211013190157639
image-20211013190248688

主要改动是正文超链接文本变色（#42b983）且当滑鼠移向文本时标记下划线，这在 dark 模式下保持同样效果。其他改动主要是符合个人的文档习惯，例如添加 padding 提供符合中文文档写作规范的视觉效果。

📌 这是个激进的改动，移除了 Stack 默认样式中关于 box-shadow 阴影下划线以及触发渐变的样式特效。

当文档中出现多个对比色系的强调色时，文章给人的第一感觉会很「脏」。如下提供一种仍基于 Vue 的视觉平衡方案。当然如果你觉得这样的改动难以接受，可以跳过此步骤，毕竟本篇博客中各个修改方案都是互相独立的，选择合适的就好~

此处给出的的视觉平衡方案是再次微调「行内代码」样式。我们需要改动站点文件 ./assets/scss/custom.scss 找到 修改「行内代码」样式 中我们添加的代码，然后修补为如下形式：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

:root {
  // Vue plan 1
  // --code-background-color: #f3f4f4;
  // --code-text-color: #476582;

  // Vue plan 2
  --code-background-color: #f8f8f8;
  --code-text-color: #e96900;
  
}

Vue plan 2 的颜色样式与之前的修改完全相同，你只需要反复注释对比两个 plan ，选择感官上合适的既可。

微调后我们可以获得如下改变：

image-20211013192930517
image-20211010201604590

emmm，个人感觉看着都挺舒服的Orz。相比默认样式来说更符合我个人的审美，我觉得默认样式的 inline-code 的背景色纯度过高（反正你怎么开心怎么调，毕竟样式调整本来就是很主观的东西）。

自定义友链界面

目前 Stack 主题并不提供友链样式，我们可以自己魔改一个。具体效果看本站 Links 子页既可。显然开疆拓土并不是一件易事，下文既将分享完整的样式代码，但复制粘贴也得小心，记得按开头提醒的那样基于备份文件修改样式，在任何时候都不应该直接对主题子模块进行改动。

遇见友链

第一步需要让「Links」界面出现在 Menu 上，这样所见所得调试起来比较方便。

  1. 以你喜欢的方式在你的站点根目录下执行如下代码新建友链子页：
1

hugo new page/links.md
  1. 打开 links.md 文件，添加/修改前置参数：
1
2
3
4
5
6
7
8

---
title: "『 Links 』友情链接"
date: 2021-10-01T16:45:06+08:00
slug: "links"
layout: "links"
license: false
toc: false
---

此处我们需要明确 toc:false 隐藏目录。因为本文提供的样式是基于 Markdown + Shortcode 执行的，当我们的 Markdown 正文中出现标题分级时，这份文件会被当成文章跳转，而站点左边栏将被隐去，我们希望 Links 子页能和 Categories 以及 About 一样达到在首页中切换窗格的效果，而非页面的“转换”。

  1. 我们需要修改站点配置文件（以 config.yaml 为例），添加如下内容：
1
2
3
4
5
6
7
8

menu:
    main:
    	# Links 友链
        - identifier: links
        name: Links
        url: /links
        weight: -75
        pre: link

需要注意的是，当你的配置文件中已存在 menu-main 时，你仅需要添加组内容，千万不要再将 menu-main 复写。当然，你也可以在 links.md 的前置参数中声明此配置。

修改 weight 权重调整此栏目于 Menu 中的排位；修改 name 以调整需要显示在网页上的信息；pre 表示此栏目搭配使用的图标，它默认存放在主题文件夹的 ./assets/icons/ 目录下。

  1. 此时我们已能在博客首页中点开 Links 子页面了。

创建友链

本篇博客毕竟是「提高篇」这里就不多介绍 Shortcode 及其样式调度的原理了，感兴趣的朋友们可以自行检索，此处直接上源码！

既然本方案基于 Markdown 和 Shortcode 实现，现在编写友链内容的 Markdown 文件有了，就差 Short code 短码调用了。

  1. 站点根目录下新建/修改 ./layouts/shortcodes/friend.html，添加如下内容：
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

{{- $name := .Get "name" | default (.Get 0) -}}
{{- $url := .Get "url" | default (.Get 1) -}}
{{- $avatar := .Get "avatar" | default (.Get 2) -}}
{{- $bio := .Get "bio" | default (.Get 3) -}}

<a href="{{- $url -}}" title="{{- $name -}}" class="friend-link" target="_blank" rel="friend">
    <div class="friend-link-div">
        <div class="friend-link-avatar">
            <img src={{ .Get "avatar" }} class="friend-avatar" loading="lazy" alt="Avatar">
        </div>
        <div class="friend-link-info">
            <i class="fa fa-link" aria-hidden="true"></i>
            <i class="friend-name">{{ $name }}</i>
            <p class="friend-bio">{{ $bio }}</p>
        </div>
    </div>
</a>
  1. 参数讲解
NameValueDescription
name必填（Type: String）名称
url必填（Type: String）站点链接
avatar必填（Type: String）头像链接
bio必填（Type: String）简介

  1. 应用案例

    在你刚创建的 ./content/page/links.md 正文中输入如下格式内容用以「创建友链」：

1
2
3

<!-- 此处为了正常演示添加反斜杠防止转译。 -->
{\{< friend name="BeiYu" url="https://www.bj-yan.top/" avatar="https://cdn.jsdelivr.net/gh/qin2dim/[email protected]/avatars/44976445.png" bio="北屿小智障！" >}}
{\{< friend name="BernieLBY" url="https://github.com/BernieLBY" avatar="https://cdn.jsdelivr.net/gh/qin2dim/[email protected]/avatars/37860855.jpg" bio="刘院士" >}}

我们 也许 可以获得如下效果：

Avatar
BeiYu

北屿小智障！

Avatar
BernieLBY

刘院士

修饰友链

  1. 站点根目录下新建/修改 ./assets/scss/style.css，添加如下内容：
1

@import "partials/layout/links.scss";

  1. 站点根目录下新建/修改 ./assets/scss/partials/layout/links.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

    // 头像边框颜色
$avatar-border-color: #566a82;
$avatar-border-color-dark: #C0C0C0;

// style-card 背景色
$friend-link-background-color: #51a8ca10;
$friend-link-background-color-dark: #69697141;

// 友链 name 原始色
$friend-link-color: #11a1a2;
$friend-link-color-dark: #ffffff;

// 友链 name 气泡响应对比色
$friend-link-hover-color: #ea4e2f;
$friend-link-hover-color-dark: rgb(241, 213, 159);

// bio 简介上下文
$context-color: #404040;
$context-color-dark: #c0c0c0;

// 友链头像及头像边框的样式
.friend-avatar {
    width: 56px;
    height: 56px;
    padding: 2px;
    margin-top: 14px;
    margin-left: 14px;
    border-radius: 15px;
    border: 3.6px inset $avatar-border-color;

    [data-scheme=dark] & {
        border: 3.6px inset $avatar-border-color-dark;
    }
}

.friend-link-div {
    // 实现卡片双栏排列效果
    height: auto;
    margin-top: auto;
    margin-inline-start: 4.5%;
    width: 43%;
    display: inline-block !important;

    // 控制上下连续排列的卡片之间的行距
    margin-bottom: 11px;

    // 卡片圆角
    border-radius: 7px 7px 7px 7px;

    // 卡片阴影
    -webkit-box-shadow: 0px 14px 32px 0px rgba(231, 224, 224, 0.15);
    -moz-box-shadow: 0px 14px 32px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0.7px 1px 6px 0px rgba(0, 0, 0, 0.16);

    // 卡片背景色
    background: $friend-link-background-color;

    [data-scheme=dark] & {
        background: $friend-link-background-color-dark;
    }

    // 卡牌气泡响应动画
    -webkit-transition: transform 0.4s ease;
    -moz-transition: transform 0.4s ease;
    -o-transition: transform 0.4s ease;
    transition: transform 0.15s ease;

    &:hover {
        transform: scale(1.03);
    }
}


.friend-link-avatar {
    width: 92px;
    float: left;
    margin-right: 2px;

}

// name 特效样式， hover 气泡效果,友链 name 变色
.friend-link-info {
    margin-top: 13px;
    margin-right: 18px;
    color: $friend-link-color;

    [data-scheme=dark] & {
        color: $friend-link-color-dark;
    }

    &:hover {
        color: $friend-link-hover-color;

        [data-scheme=dark] & {
            color: $friend-link-hover-color-dark;
        }
    }
}

// name 文字样式
.friend-name {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-style: normal;
    font-family: 'Comic Sans MS', cursive;
    font-size: 16px;

}

// bio 文字样式
.friend-bio {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-top: auto;

    // font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;
    font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
    font-size: 14px;

    color: $context-color;

    [data-scheme=dark] & {
        color: $context-color-dark;
    }

}

// 响应式页面，允许根据不同的尺寸调整样式
@media screen and (max-width: 720px) {
    .friend-link-div {
        width: 92%;
        margin-right: auto;
    }

    .friend-bio {
        margin: auto;
        align-content: center;
        justify-content: left;
    }

    .friend-link-avatar {
        width: 84px;
        margin: auto;
    }

    // .friend-link-info {
    //     height: 100%;
    //     margin: auto;
    //     display: flex;
    //     align-items: center;
    //     justify-content: left;
    // }

    .friend-name {
        font-size: 14px;
        font-style: normal;
        font-family: 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
    }
}

  2. 访问本站 Links 友链子页，查看盛况，并根据自己的喜好适当微调样式或模板代码。

Loading…

© 2020 - 2024 Echosec @QIN2DIM
You will to enjoy grander sight / By climing to a greater height.