美化博客 | Chenxu's Blog

主题美化

修改主页

默认首页都是文章内容，可以通过修改hugo.yml配置文件来修改首页形式，具体见papermod-features 中这三种模式的配置写法。

这里我选择了 Home-Info Mode，并且使用了一言，修改方法如下：

首先是hugo.yml中修改首页格式

params:
    homeInfoParams:
        Title: 你好呀 o(\*￣▽￣\*)ブ
        # Content:

其中Content字段依旧注释掉，然后我们在layouts\partials\home_info.html文件中增加一言功能，文件内容如下：

{{- with $.Site.Params.homeInfoParams }}
<article class="first-entry home-info">
    <header class="entry-header">
        <h1>{{ .Title | markdownify }}</h1>
    </header>
    <section class="entry-content">
        <p id="hitokoto">
            <a href="#" id="hitokoto_text" target="_blank">:D 获取中...</a>
        </p>
        <script>
            fetch("https://v1.hitokoto.cn")
                .then((response) => response.json())
                .then((data) => {
                    const hitokoto = document.querySelector("#hitokoto_text");
                    hitokoto.href = `https://hitokoto.cn/?uuid=${data.uuid}`;
                    hitokoto.innerText = data.hitokoto;
                })
                .catch(console.error);
        </script>
    </section>
    <footer class="entry-footer">
        {{ partial "social_icons.html" $.Site.Params.socialIcons }}
    </footer>
</article>
{{- end -}}

显示效果见主页

底部增加字数和篇数

在layouts\partials\footer.html文件中合适的位置增加代码：

{{$scratch := newScratch}}
{{ range (where .Site.Pages "Kind" "page" )}}
{{$scratch.Add "total" .WordCount}}
{{ end }}
共生产 {{ len (where .Site.RegularPages "Section" "posts") }} 篇文章，约 {{ div ($scratch.Get "total") 1000.0 | lang.FormatNumber 2 }}k 字

添加自定义 css/js

在 layouts\partials\footer.html 文件末尾添加

{{ range .Site.Params.customcss }}
    <link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}

{{ range .Site.Params.customjs }}
    <script type="text/javascript" src="{{ . | absURL }}"></script>
{{- end }}

{{ range $elem := .Site.Params.customjscssraw }}
    {{ $elem | safeHTML }}
{{- end }}

然后使用时在hugo.yaml文件中添加相关配置即可。

params:
  ...
  customcss:
    - "css/xx.css"
  customjs:
    - "js/xx.js"
  customjscssraw:
    - "<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css' integrity='sha256-2H3fkXt6FEmrReK448mDVGKb3WW2ZZw35gI7vqHOE4Y=' crossorigin='anonymous'>"
    - >
      <script async src='https://www.googletagmanager.com/gtag/js?id=G-XXX'></script>
      <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-XXX');
      </script>

配置中 css 和 js 文件路径都是相对路径，需要将对应文件放在static文件夹下。

使用樱花特效

在html文件中添加如下代码：

<script src="https://api.vvhan.com/api/script/yinghua"></script>

或者在markdown文件中添加如下代码：

<!DOCTYPE html>
<html>
<script src="https://api.vvhan.com/api/script/yinghua"></script>
</html>

构建后即可看到樱花背景效果

shortcode

高斯模糊

新建layouts\shortcodes\blur.html文件，代码如下：

<span class="blur"> {{ (.Get 0) | markdownify }} </span>

<style>
    .blur {
        filter: blur(5px);
        transition: filter 0.3s;
    }

    .blur:hover {
        filter: none;
    }
</style>

使用方法：

{{< blur "内容" >}}

使用效果：

这里是高斯模糊

文本折叠

新建layouts\shortcodes\detail.html文件，内容如下：

<details>
    <summary>{{ (.Get 0) | markdownify }}</summary>
    {{ .Inner | markdownify }}
</details>

使用方法：

{{< detail "标题" >}}
内容
{{< /detail >}}

使用效果：

标题

内容

文本黑幕

新建layouts\shortcodes\shady.html文件，内容如下：

<span class="shady"> {{ (.Get 0) | markdownify }} </span>

<style>
    .shady {
        position: relative;
        display: inline-block;
    }

    .shady::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        opacity: 1;
        transition: opacity 0.3s ease-in-out;
        z-index: 1;
    }

    .shady:hover::before {
        opacity: 0;
    }

    .shady span {
        position: relative;
        z-index: 2;
        color: white;
    }
</style>

使用方法：

{{< shady "内容" >}}

使用效果：

这里有文本黑幕

notice

新建layouts\shortcodes\notice.html文件，内容如下：

{{- $noticeType := .Get 0 -}}

{{- $raw := (markdownify .Inner | chomp) -}}

{{- $block := findRE "(?is)^<(?:address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h(?:1|2|3|4|5|6)|header|hgroup|hr|li|main|nav|noscript|ol|output|p|pre|section|table|tfoot|ul|video)\\b" $raw 1 -}}

{{ $icon := (replace (index $.Site.Data.SVG $noticeType) "icon" "icon notice-icon") }}
<div class="notice {{ $noticeType }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>
    <div class="notice-title">{{ $icon | safeHTML }}</div>
    {{- if or $block (not $raw) }}{{ $raw }}{{ else }}<p>{{ $raw }}</p>{{ end -}}
</div>

<style>
    .notice {
        position: relative;
        padding: 1em 1em 1em 2.5em;
        margin-bottom: 1em;
        border-radius: 4px;
    }
    .notice p:last-child {
        margin-bottom: 0;
    }
    .notice .notice-title {
        position: absolute;
        left: 0.8em;
    }
    .notice .notice-title .notice-icon {
        width: 1.2em;
        height: 1.2em;
    }
    .notice.notice-warning {
        background: rgba(224, 108, 108, 0.15);
        border-left: 5px solid #e06c6c;
    }
    .notice.notice-warning .notice-title {
        color: #e06c6c;
    }
    .notice.notice-info {
        background: rgba(240, 179, 117, 0.15);
        border-left: 5px solid #f0b375;
    }
    .notice.notice-info .notice-title {
        color: #f0b375;
    }
    .notice.notice-note {
        background: rgba(108, 185, 224, 0.15);
        border-left: 5px solid #6cb9e0;
    }
    .notice.notice-note .notice-title {
        color: #6cb9e0;
    }
    .notice.notice-tip {
        background: rgba(108, 224, 146, 0.15);
        border-left: 5px solid #6ce092;
    }
    .notice.notice-tip .notice-title {
        color: #6ce092;
    }

    [data-theme="dark"] .notice.notice-warning {
        background: rgba(112, 67, 67, 0.15);
        border-left: 5px solid #704343;
    }
    [data-theme="dark"] .notice.notice-warning .notice-title {
        color: #704343;
    }
    [data-theme="dark"] .notice.notice-info {
        background: rgba(112, 89, 67, 0.15);
        border-left: 5px solid #705943;
    }
    [data-theme="dark"] .notice.notice-info .notice-title {
        color: #705943;
    }
    [data-theme="dark"] .notice.notice-note {
        background: rgba(67, 97, 112, 0.15);
        border-left: 5px solid #436170;
    }
    [data-theme="dark"] .notice.notice-note .notice-title {
        color: #436170;
    }
    [data-theme="dark"] .notice.notice-tip {
        background: rgba(67, 112, 82, 0.15);
        border-left: 5px solid #437052;
    }
    [data-theme="dark"] .notice.notice-tip .notice-title {
        color: #437052;
    }
</style>

新建data\SVG.toml文件增加 svg 图片：

# Notice Icon
notice-warning = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 576 512" fill="hsl(0, 65%, 65%)"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6.0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6.0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z"/></svg>'
notice-info = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(30, 80%, 70%)"><path d="M256 8a248 248 0 100 496 248 248 0 000-496zm0 110a42 42 0 110 84 42 42 0 010-84zm56 254c0 7-5 12-12 12h-88c-7 0-12-5-12-12v-24c0-7 5-12 12-12h12v-64h-12c-7 0-12-5-12-12v-24c0-7 5-12 12-12h64c7 0 12 5 12 12v100h12c7 0 12 5 12 12v24z"/></svg>'
notice-note = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(200, 65%, 65%)"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zm-248 50a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/></svg>'
notice-tip = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(140, 65%, 65%)"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zM227 387l184-184c7-6 7-16 0-22l-22-23c-7-6-17-6-23 0L216 308l-70-70c-6-6-16-6-23 0l-22 23c-7 6-7 16 0 22l104 104c6 7 16 7 22 0z"/></svg>'

使用方法：

{{< notice notice-note >}}
这是 note
{{< /notice >}}

{{< notice notice-info >}}
这是 info
{{< /notice >}}

{{< notice notice-warning >}}
这是 warning
{{< /notice >}}

{{< notice notice-tip >}}
这是 tip
{{< /notice >}}

使用效果：

这是 note

这是 info

这是 warning

这是 tip

时间轴

新建layouts\shortcodes\timeline.html文件，内容如下：

{{- $date := .Get "date" -}} {{- $title := .Get "title" -}} {{- $description := .Get "description" -}} {{- $tags := .Get "tags" -}}

<div class="timeline__row">
    <div class="timeline__time">
        <div class="timeline__time">{{ $date }}</div>
        <div class="timeline__split-line"></div>
    </div>
    <div class="timeline__content">
        <div class="timeline__tags">
            {{- with split $tags ", " -}} {{- range . }}{{- if eq . "样式" }}
            <span class="timeline__tag timeline__tag-style">{{ . }}</span> {{- else if eq . "文章" }}
            <span class="timeline__tag timeline__tag-article">{{ . }}</span> {{- else if eq . "页面" }}
            <span class="timeline__tag timeline__tag-page">{{ . }}</span> {{- else }}
            <span class="timeline__tag">{{ . }}</span> {{- end }} {{- end }} {{- end }}
        </div>
            <div class="timeline__title">{{ $title | markdownify }}</div>
        <div class="timeline__description">
            {{ $description | markdownify}}
        </div>
    </div>
</div>

<style>
    .timeline {
        display: flex;
        flex-direction: column;
    }

    .timeline__row {
        display: flex;
        padding-left: 4%;
        height: 90px;
    }

    .timeline__time {
        flex: 0 0 110px;
        color: #5d5d5d;
        font-size: 17px;
        text-transform: uppercase;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5rem 0;
    }

    .timeline__time-text {
        margin: 0;
    }

    .timeline__split-line {
        position: absolute;
        top: 0.5rem;
        right: -20px;
        height: 100%;
        width: 2px;
        background-color: #84c4e240;
        z-index: 0;
    }

    .timeline__split-line:before {
        content: "";
        position: absolute;
        top: 24%;
        right: -4px;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        background-color: #c9e5f2;
        box-shadow: 0 0 0 4px var(--theme);
        border-radius: 50%;
        border: 0px solid #84c4e2;
        z-index: -1;
    }

    .timeline__content {
        flex: 1;
        margin-left: 2.5rem;
        padding: 0.5rem 0 1.2rem 0;
    }

    .timeline__title {
        margin: 0;
        margin-bottom: 2px;
        padding-top: 3px;
        margin-left: 0.5rem;
        color: var(--content);
        font-family: var(--font-family-teshu);
        font-size: 19px;
        font-weight: 600;
        width: fit-content;
        display: inline-block;
        vertical-align: middle;
        /* 垂直居中对齐 */
    }

    .timeline__tags {
        display: inline-block;
        padding: 0;
        margin-left: 0.3rem;
        align-items: center;
        gap: 0.3rem;
    }

    .timeline__tag {
        display: inline-block;
        color: var(--secondary);
        background-color: #84c4e230;
        border: 1.5px solid #84c4e230;
        border-radius: 999px;
        padding: 0rem 0.5rem;
        font-size: 12px;
        white-space: nowrap;
        line-height: 1.4rem;
        opacity: 0.8;
        vertical-align: middle;
        /* 垂直居中对齐 */
    }

    .timeline__description {
        font-size: 15px;
        line-height: 1.6;
        color: #5d5d5d;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0.5rem 0 0.4rem 1.5rem;
        /* 添加 1.5rem 的左侧内边距 */
    }
    /* 为类名为 "timeline__tag-style" 的标签定义颜色 */

    .timeline__tag-style {
        background-color: #c581da;
        /* 替换为你希望的颜色 */
        border-color: #c581da;
        /* 与背景色相同或不同，根据需要自定义 */
        color: #ffffff;
        /* 根据需要选择文本颜色 */
    }
    /* 为类名为 "timeline__tag-article" 的标签定义颜色 */

    .timeline__tag-article {
        background-color: #92d392;
        /* 替换为你希望的颜色 */
        border-color: #92d392;
        /* 与背景色相同或不同，根据需要自定义 */
        color: #000000;
        /* 根据需要选择文本颜色 */
    }
    /* 为类名为 "timeline__tag-page" 的标签定义颜色 */

    .timeline__tag-page {
        background-color: #707070;
        /* 替换为你希望的颜色 */
        border-color: #707070;
        /* 与背景色相同或不同，根据需要自定义 */
        color: #ffffff;
        /* 根据需要选择文本颜色 */
    }

    @media screen and (max-width: 768px) {
        .timeline__time {
            font-size: 14px;
            /* 在小屏幕上使用较小的字体大小 */
        }
        .timeline__title {
            font-size: 16px;
            /* 在小屏幕上使用较小的字体大小 */
        }
        .timeline__description {
            font-size: 14px;
            /* 在小屏幕上使用较小的字体大小 */
        }
    }
</style>

使用方法：

{{< timeline date="2023-06-25" title="Hello Again" description="博客部署至[腾讯云轻量级服务器](https://curl.qcloud.com/wNpIBPJp)" tags="博客" >}}
{{< timeline date="2023-06-21" title="Hello Hugo" description="博客在本地搭建完成" tags="博客" >}}

使用效果：

2023-06-25

博客

Hello Again

博客部署至腾讯云轻量级服务器

2023-06-21

博客

Hello Hugo

博客在本地搭建完成

主题美化#

修改主页#

底部增加字数和篇数#

添加自定义 css/js#

使用樱花特效#

shortcode#

高斯模糊#

文本折叠#

文本黑幕#

notice#

时间轴#

主题美化

修改主页

底部增加字数和篇数

添加自定义 css/js

使用樱花特效

shortcode

高斯模糊

文本折叠

文本黑幕

notice

时间轴