痛并快乐的博客装修

2022-02-14

Page content

痛苦是真的痛苦，成功的快乐也是真的快乐！

增加短代码的坑

参考塔塔的增加引用短代码添加了短代码，甚至到自定义 Hugo Shortcodes 简码研究，结果无论怎么设置就是不成功。

最后塔塔开源了伊的主题，我直接一个 scss 和 shortcodes 复制粘贴。成功渲染了。最后眼动对比了一下是哪里设置得不对（为什么没有「代码来找茬工具」QAQ ），发现坑居然在

// 文件位置：~/assets/scss/custom/_custom.scss

因为根据博文我就在 scss 下建了一个 custom 的文件夹和一个 _custom.scss 的文件，结果直接在 scss 下的 custom.scss 填代码就好了，啊我真蠢。在这个主题里正确的位置是：

// 文件位置：~/assets/scss/custom.scss

知道之后我就可以快乐短代码了~

引用

参考塔塔的。

<!-- 短代码部分 -->
<!-- 文件位置：~/layouts/shortcodes/quote.html -->

<blockquote class="quote{{ range .Params }} {{ . }}{{ end }}">
    {{- $content := .Inner | markdownify -}}
    {{- if not (strings.HasPrefix $content "<p>") }}
        {{ printf `<p>%s</p>` $content | safeHTML }}
    {{- else }}
        {{- $content }}
    {{- end -}}
</blockquote>

// 文件位置：~/assets/scss/custom.scss

blockquote.quote {
    position: relative;
    margin: 1.5em -10em 0 -10 ;
    padding-left: 18%;
    padding-right: 15%;
    border: none;
    background-color: transparent;;
    &::before {
        position: absolute;
        left: 7%;
        content: '“';
        color: var(--color-contrast-low);
        font-size: 3em;
        font-weight: bold;
        line-height: 1;
    }
    &.poetry {
        display: table;
        padding: 0;
        &::before {
            left: -1em;
        }
        p:last-child {
            margin: 0;
        }
    }
    &.en {
        p {
            line-height: 1.618;
            text-align: left;
            hyphens: auto;
            -webkit-hyphens: auto;
            -moz-hyphens: auto;
        }
    }
}
@media (max-width:650px) {
    blockquote.quote {
        &::before {
            position: absolute;
            left: 3.5%;          
        }
    }
}

@media (max-width:500px) {
    blockquote.quote {
        &::before {
            position: absolute;
            left: 3.5%; 
            top: 0.1%         
        }
    }
}

具体使用：

{{< quote >}}
十里青山远，潮平路带沙<br>数声啼鸟怨年华<br>又是凄凉时候，在天涯<br>白露收残月，清风散晓霞<br>绿杨堤畔问荷花<br>记得年时沽酒，那人家
{{< /quote >}}

十里青山远，潮平路带沙
数声啼鸟怨年华
又是凄凉时候，在天涯
白露收残月，清风散晓霞
绿杨堤畔问荷花
记得年时沽酒，那人家

居中引用

<!-- 文件位置：~/layouts/shortcodes/quote-center.html -->

<blockquote class="quote-center">
    {{- $content := .Inner | markdownify -}}
    {{- if not (strings.HasPrefix $content "<p>") }}
        {{ printf `<p>%s</p>` $content | safeHTML }}
    {{- else }}
        {{- $content }}
    {{- end -}}
</blockquote>

稍微修改了一下 CSS

// 文件位置：~/assets/scss/custom.scss
blockquote.quote-center {
    position: relative;
    margin: 1.5em -10em 0 -10 ;
    padding-left: 18%;
    padding-right: 15%;
    border: none;
    background-color: transparent;;
    p{
        text-align: center !important;
        margin-top: 1.5em;
        margin-bottom: 1.5em;
    }
    &::before {
        position: absolute;
        left: 7%;
        content: '“';
        color: var(--color-contrast-low);
        font-size: 3em;
        font-weight: bold;
        margin-top: -0.25em;
    }
    &::after {
        position: absolute;
        right: 7%;
        content: '”';
        color: var(--color-contrast-low);
        font-size: 3em;
        font-weight: bold;
        margin-top: -0.75em;
    }
}

具体使用：

{{< quote-center >}}
十里青山远，潮平路带沙<br>数声啼鸟怨年华<br>又是凄凉时候，在天涯<br>白露收残月，清风散晓霞<br>绿杨堤畔问荷花<br>记得年时沽酒，那人家
{{< /quote-center >}}

十里青山远，潮平路带沙
数声啼鸟怨年华
又是凄凉时候，在天涯
白露收残月，清风散晓霞
绿杨堤畔问荷花
记得年时沽酒，那人家

Github

<!-- 文件位置：~/layouts/shortcodes/github.html -->

<div class="github">
    <div class="logo">
        {{ replace $.Site.Data.SVG.repository "icon" "icon github-icon" | safeHTML }}
        <a class="name" href={{ .Get "link" }} target="_blank">{{ .Get "name" }}</a>
    </div>
    <div class="description">{{ .Get "description" }}</div> 
    <div class="language">
        <span class="language-color" style="background-color: {{ .Get "color" }}"></span>
        <span class="language-name">{{ .Get "language" }}</span>
    </div>
</div>

也稍微修改了一下 CSS

// 文件位置：~/assets/scss/custom.scss
.github {
    border: 1px solid var(--color-contrast-low);
    border-radius: 3px;
    margin: 0 auto;
    margin-bottom: 1em;
    padding: 1em;
    background: #F0F2FF;
    max-width: 500px;
    .github-icon {
        width: 1.0em;
        height: 1.0em;
        margin-right: 0.5em;
        margin-bottom: 0.2em;
        fill: var(--color-contrast-high);
        transition: all .5s;
    }
    .name {
        font-weight: bold;
        color: #3363FF;
        text-decoration: none;
    }
    .description {
        margin-top: 0.5em;
        margin-bottom: 1em;
        color: var(--color-contrast-high);
        text-align: justify;
        font-size: 90%;
        transition: all .5s;
    }
    .language-color {
        position: relative;
        top: 1px;
        display: inline-block;
        width: 0.75em;
        height: 0.75em;
        border-radius: 50%;
    }
    .language-name {
        color: var(--color-contrast-high);
        font-size: 90%;
        margin-left: 0.5em;
        transition: all .5s;
    }
}

插入图标：

// 文件位置：~/data/SVG.toml

# GitHub Icon
repository = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.5C2 1.83696 2.26339 1.20107 2.73223 0.732233C3.20108 0.263392 3.83696 0 4.5 0L13.25 0C13.4489 0 13.6397 0.0790176 13.7803 0.21967C13.921 0.360322 14 0.551088 14 0.75V13.25C14 13.4489 13.921 13.6397 13.7803 13.7803C13.6397 13.921 13.4489 14 13.25 14H10.75C10.5511 14 10.3603 13.921 10.2197 13.7803C10.079 13.6397 10 13.4489 10 13.25C10 13.0511 10.079 12.8603 10.2197 12.7197C10.3603 12.579 10.5511 12.5 10.75 12.5H12.5V10.5H4.5C4.30308 10.5 4.11056 10.5582 3.94657 10.6672C3.78257 10.7762 3.65442 10.9312 3.57816 11.1128C3.50191 11.2943 3.48096 11.4943 3.51793 11.6878C3.5549 11.8812 3.64816 12.0594 3.786 12.2C3.92524 12.3422 4.0023 12.5338 4.00024 12.7328C3.99818 12.9318 3.91716 13.1218 3.775 13.261C3.63285 13.4002 3.4412 13.4773 3.24222 13.4752C3.04325 13.4732 2.85324 13.3922 2.714 13.25C2.25571 12.7829 1.99929 12.1544 2 11.5V2.5ZM12.5 1.5V9H4.5C4.144 9 3.806 9.074 3.5 9.208V2.5C3.5 2.23478 3.60536 1.98043 3.79289 1.79289C3.98043 1.60536 4.23478 1.5 4.5 1.5H12.5ZM5 12.25V15.5C5 15.5464 5.01293 15.5919 5.03734 15.6314C5.06175 15.6709 5.09667 15.7028 5.1382 15.7236C5.17972 15.7444 5.22621 15.7532 5.27245 15.749C5.31869 15.7448 5.36286 15.7279 5.4 15.7L6.85 14.613C6.89328 14.5805 6.94591 14.563 7 14.563C7.05409 14.563 7.10673 14.5805 7.15 14.613L8.6 15.7C8.63714 15.7279 8.68131 15.7448 8.72755 15.749C8.77379 15.7532 8.82028 15.7444 8.8618 15.7236C8.90333 15.7028 8.93826 15.6709 8.96266 15.6314C8.98707 15.5919 9 15.5464 9 15.5V12.25C9 12.1837 8.97366 12.1201 8.92678 12.0732C8.87989 12.0263 8.81631 12 8.75 12H5.25C5.1837 12 5.12011 12.0263 5.07322 12.0732C5.02634 12.1201 5 12.1837 5 12.25Z"/></svg>'

具体使用：

{{< github name="Organic-Carbon-Estimating" link="https://github.com/guanqr/Organic-Carbon-Estimating" description="A program used in estimating organic carbon stocks in oceans. 计算指定海域的有机碳存量，包括颗粒有机碳与溶解有机碳，数据依赖于 NASA 中分辨率成像光谱仪 MODIS 遥感产品。" color="#e16737" language="MATLAB" >}}

notice

notice 和 simple-notice 有个问题就是图标颜色不显示，是黑色的，我改了半天 css 也还是不知道要怎么改，所以干脆就先把图标隐藏了，以后有解决办法了再改。

<!-- 文件位置：~/layouts/shortcodes/notice.html -->

<!--https://github.com/martignoni/hugo-notice-->
{{- $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>

插入图标：

// 文件位置：~/data/SVG.toml

# Notice Icon
notice-warning = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 576 512"><path d="M570 440c18 32-5 72-42 72H48c-37 0-60-40-42-72L246 24c19-32 65-32 84 0l240 416zm-282-86a46 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-info = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512"><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"><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"><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-warning >}}
莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。
料峭春风吹酒醒，微冷，山头斜照却相迎。回首向来萧瑟处，归去，也无风雨也无晴。
{{< /notice >}}

simple-notice

<!-- 文件位置：~/layouts/shortcodes/notice.html -->

<!--https://github.com/martignoni/hugo-notice-->
{{- $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 simple-notice-icon") }}
<div class="simple-notice {{ $noticeType }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>
    <div class="simple-notice-title">{{ $icon | safeHTML }}</div>
    {{- if or $block (not $raw) }}{{ $raw }}{{ else }}<p>{{ $raw }}</p>{{ end -}}
</div>

添加CSS 样式

// 文件位置：~/assets/scss/custom/_custom.scss

.simple-notice {
    position:relative;
    padding: 1em 0 1em 2em;
    margin-bottom: 1em;
    transition: all .5s;
    p:last-child {
        margin-bottom: 0;
    }
    .simple-notice-title {
        position: absolute;
        left: 0.8em;
        .simple-notice-icon {
            width: 1em;
            height: 1em;
            margin-left: -0.8em;
        }
    }
    &.simple-notice-warning {
        border-top: 2px solid hsl(0, 100%, 35%);
        color: hsl(0, 100%, 35%);
        .simple-notice-title {
            color: hsl(0, 100%, 35%);
        }
        a {
            color: hsl(0, 100%, 35%);
            text-decoration-color: hsl(0, 100%, 35%);
        }
    }
    &.simple-notice-info {
        border-top: 2px solid hsl(40, 80%, 45%);
        color: hsl(40, 80%, 45%);
        .simple-notice-title {
            color: hsl(40, 80%, 45%);
        }
        a {
            color: hsl(40, 80%, 45%);
            text-decoration-color: hsl(40, 80%, 45%);
        }
    }
    &.simple-notice-note {
        border-top: 2px solid hsl(210, 100%, 25%);
        color: hsl(210, 100%, 25%);
        .simple-notice-title {
            color: hsl(210, 100%, 25%);
        }
        a {
            color: hsl(210, 100%, 25%);
            text-decoration-color: hsl(210, 100%, 25%);
        }
    }
    &.simple-notice-tip {
        border-top: 2px solid hsl(150, 100%, 25%);
        color: hsl(150, 100%, 25%);
        .simple-notice-title {
            color: hsl(150, 100%, 25%);
        }
        a {
            color: hsl(150, 100%, 25%);
            text-decoration-color: hsl(150, 100%, 25%);
        }
    }
}

[data-theme="dark"] .simple-notice {
    &.simple-notice-warning {
        border-top: 2px solid hsl(0, 65%, 65%);
        color: hsl(0, 65%, 65%);
        .simple-notice-title {
            color: hsl(0, 65%, 65%);
        }
        a {
            color: hsl(0, 65%, 65%);
            text-decoration-color: hsl(0, 65%, 65%);
        }
    }
    &.simple-notice-info {
        border-top: 2px solid hsl(30, 80%, 70%);
        color: hsl(30, 80%, 70%);
        .simple-notice-title {
            color: hsl(30, 80%, 70%);
        }
        a {
            color: hsl(30, 80%, 70%);
            text-decoration-color: hsl(30, 80%, 70%);
        }
    }
    &.simple-notice-note {
        border-top: 2px solid hsl(200, 65%, 65%);
        color: hsl(200, 65%, 65%);
        .simple-notice-title {
            color: hsl(200, 65%, 65%);
        }
        a {
            color: hsl(200, 65%, 65%);
            text-decoration-color: hsl(200, 65%, 65%);
        }
    }
    &.simple-notice-tip {
        border-top: 2px solid hsl(140, 65%, 65%);
        color: hsl(140, 65%, 65%);
        .simple-notice-title {
            color: hsl(140, 65%, 65%);
        }
        a {
            color: hsl(140, 65%, 65%);
            text-decoration-color: hsl(140, 65%, 65%);
        }
    }
}

插入图标：

// 文件位置：~/data/SVG.toml

# Notice Icon
simple-notice-warning = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512"><path d="M114.57 76.07a45.71 45.71 0 00-67.51-6.41c-17.58 16.18-19 43.52-4.75 62.77l91.78 123-92.33 124.15c-14.23 19.25-13.11 46.59 4.74 62.77a45.71 45.71 0 0067.5-6.41L242.89 262.7a12.14 12.14 0 000-14.23zm355.67 303.51l-92.33-124.13 91.78-123c14.22-19.25 12.83-46.59-4.75-62.77a45.71 45.71 0 00-67.51 6.41l-128 172.12a12.14 12.14 0 000 14.23L398 435.94a45.71 45.71 0 0067.51 6.41c17.84-16.18 18.96-43.52 4.73-62.77z"/></svg>'
simple-notice-note = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 192 512"><path d="M176 432c0 44.11-35.89 80-80 80s-80-35.89-80-80 35.89-80 80-80 80 35.89 80 80zM25.26 25.2l13.6 272A24 24 0 0062.83 320h66.34a24 24 0 0023.97-22.8l13.6-272A24 24 0 00142.77 0H49.23a24 24 0 00-23.97 25.2z"/></svg>'
simple-notice-info = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 192 512"><path d="M20 424.23h20V279.77H20a20 20 0 01-20-20V212a20 20 0 0120-20h112a20 20 0 0120 20v212.23h20a20 20 0 0120 20V492a20 20 0 01-20 20H20a20 20 0 01-20-20v-47.77a20 20 0 0120-20zM96 0a72 72 0 100 144A72 72 0 0096 0z"/></svg>'
simple-notice-tip = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512"><path d="M173.9 439.4L7.5 273c-10-10-10-26.2 0-36.2l36.2-36.2c10-10 26.2-10 36.2 0L192 312.69l240.1-240.1c10-10 26.2-10 36.2 0l36.2 36.21c10 10 10 26.2 0 36.2L210.1 439.4c-10 10-26.2 10-36.2 0z"/></svg>'

具体使用：

{{< simple-notice simple-notice-warning >}}
莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。
料峭春风吹酒醒，微冷，山头斜照却相迎。回首向来萧瑟处，归去，也无风雨也无晴。
{{< /simple-notice >}}

嵌入音乐播放器

单页面播放器

前两天我在搜可以 webdev 的手机音乐播放器有哪些，也不知道怎么的就推荐到了 Aplayer ，但我手机的 Aplayer 并不能 webdev 。于是我好奇是不是有更新的新版本支持 webdev 。然后搜 Aplayer 无意间就搜到了 Hugo嵌入音乐播放器和在 Hugo 里内嵌音乐播放器（APlayer），跑题了啊喂，我是要找手机音乐播放器啊！于是根据这两篇博文就嵌入了播放器和增加音乐短代码。

其他可参考：播放器可设置项

在主題的head.html添加以下代码

<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

具体使用：

{{<meting-js auto="link" list-folded=true></meting-js>}}

{{<meting-js server="netease" type="playlist" id="769332917"></meting-js>}}

{{<aplayer server="netease" type="song" id="1820266508">}}

如果嵌入音乐播放器不成功，则在config.toml添加如下代码

unsafe= true

全局播放器

参考这篇给hugo加一点好玩的功能添加了之前添加不成功的左下角全局播放器。

在 partials 文件夹内创建 music.html ，内容如下：

<!DOCTYPE html>
<html>
<head>
    <!-- require APlayer -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
    <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
    <!-- require MetingJS -->
    <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
</head>
<body>
    <div class="demo">
        <div id="player1">
        </div>
    </div>
    <script>
        var ap = new APlayer
            ({
                element: document.getElementById('player1'),
                fixed: true,
                autoplay: true,
                mini: true,
                theme: '#f8f4fc',
                loop: 'all',
                order: 'random',
                preload: 'auto',
                volume: 0.5,
                mutex: true,
                listFolded: false,
                listMaxHeight: 90,
                lrcType: 0,
                music:[{
                name:'音乐名',url:'音乐链接',artists:'音乐作者',cover:'封面链接'}]
        });
        //ap.init();
    </script>
</body>

在主题页面 footer.hmtl 里引用 {{ partial "music" . }} ，就完成啦！

添加密码

一般通用主题

这个是2021年那会转 Hugo 时添加的脚本了，反正也在写笔记，干脆一起放上来吧。参考的 hugo文章支持密码访问的小技巧并稍微简化。

添加JS代码：

// 文件位置：~/layouts/partials/head.html
<script>
    (function(){
        if('{{ .Params.password }}'){
            if (prompt('请输入文章密码') !== '{{ .Params.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>

在想要添加密码的文章头部添加：

password: 0000

LoveIt类主题

之前用的 DoIt 主题，然后怎么设置密码都没用，最后发现需要这样：

/themes/LoveIt/layouts/posts/single.html
拷贝到
/layouts/posts/single.html

打开拷贝后的文件，在{{- $params := .Scratch.Get "params" -}}的下一行添加如下代码：

    {{- $password := $params.password | default "" -}}
    {{- if ne $password "" -}}
		<script>
			(function(){
				if({{ $password }}){
					if (prompt('请输入文章密码') != {{ $password }}){
						alert('密码错误！');
						if (history.length === 1) {
							window.opener = null;
							window.open('', '_self');
							window.close();
						} else {
							history.back();
						}
					}
				}
			})();
		</script>
    {{- end -}}

不过这样设置密码总是防君子不防小人的，真正私密的东西还是不要放公开的博客上吧？

另外，之前我还找到了另一种设置密码的方法，好像安全性比这个高一点，不过我没有学会。如果有兴趣折腾的话，可以看这里→ 这是一个Hugo文章加密工具或者 Hugo 文章加密。

设置RSS订阅限制

// 在config.yaml增加一行
rssLimit: 5

waline评论设置邮件提醒

终于折腾好了邮件提醒，撒花~

起先由于我用的是 outlook ，折腾了几天百思不得其解明明设置好了怎么老是不行。于是想着跟着别的博主弄 gmail 算了，看了下这篇之后打消了用 gmail 的念头，因为要设置应用专用密码就需要绑手机，遂放弃。

于是又继续思考 outlook 到底要怎么设置，最终是设置好 vercel 环境变量之后重新部署，这时 outlook 会给你发一封邮件让你验证账户，点查看最近的活动，一般是最新最上面的那个点开，按是我本人，最后 vercel 再部署一次就可以了。

防转义

在简码的括号内加入 /* */来防止被转义

代码块限高与滚动

在 CSS 里面 pre 标签下增加

overflow-x: auto; 
max-height: 230px;

增加短代码的坑

引用

居中引用

Github

notice

simple-notice

嵌入音乐播放器

单页面播放器

全局播放器

添加密码

一般通用主题

LoveIt类主题

设置RSS订阅限制

waline评论设置邮件提醒

防转义

代码块限高与滚动

我变强了！（并没有……）