Hugo 9 More Shortcodes

Find more shortcodes, add them

# 在 Hugo 博客上实践 Shortcodes 短代码

year

1今年是 {{< year >}} 年.

今年是 2022 年.

mark

1{{< mark text="HTML 标记" >}}

HTML 标记 实现方法很简单, 只需创建 mark.html

1<!-- ./layouts/shortcodes/mark.html 
2https://matnoble.me/posts/shortcodes-practice-tutorial-for-hugo/#mark-标记支持
3-->
4
5<mark>{{ .Get "text" }}</mark>

abbr 缩写支持

1{{< abbr title="Beihang University" text="BUAA" >}}

BUAA.

实现方法也很简单, 只需创建 abbr.html

1https://matnoble.me/posts/shortcodes-practice-tutorial-for-hugo/#abbr-缩写支持
2-->
3
4<abbr title="{{ .Get "title" }}">{{ .Get "text" }}</abbr>`

自定义 Hugo Shortcodes 简码 .

align

这个简码的功能是设定文字的位置(居左、居中、居右、两端对齐等等), 支持的样式基于 CSS 语法。你需要在 ~/layouts/shortcodes/ 下创建 align.html 文件, 其内容如下:

1
<p style="text-align:{{ index .Params 0 }}">{{ index .Params 1 | markdownify }}</p>

具体简码和样式如下:

1
2
3
{{< align left "LEFT" >}}
{{< align center "CENTER" >}}
{{< align right "RIGHT" >}}

LEFT

CENTER

RIGHT

github

这个简码的功能是插入 GitHub 仓库。有时候我们会在文中分享某个 GitHub 仓库,但如果只是放一个超链接,样式有些单一,不能吸引读者的注意力。所以我模仿 GitHub 仓库的形式写了这个简码。首先创建 github.html 文件,内容如下所示:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!-- 文件位置:~/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/_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
.github {
    border: 1px solid var(--color-contrast-low);
    border-radius: 3px;
    margin: 0 auto;
    margin-bottom: 1em;
    padding: 1em;
    .github-icon {
        width: 1.2em;
        height: 1.2em;
        margin-right: 0.5em;
        margin-bottom: 0.2em;
        fill: var(--color-contrast-high);
        transition: all .5s;
    }
    .name {
        font-weight: bold;
        color: var(--color-primary);
        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 文件中插入图标:

1
2
# 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>'

你需要在简码中填写仓库名 name,仓库链接 link,仓库描述 description,代码语言 language,代码语言对应的颜色 color。

具体简码和样式如下:

1
{{< 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" >}}

The origin shortcode is used in the MEME theme, I cant use it

Wikipedia

历史上的今天

blockquoto

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
{{< blockquote author="张若虚(唐)" link="https://baike.baidu.com/item/%E6%98%A5%E6%B1%9F%E8%8A%B1%E6%9C%88%E5%A4%9C/1701" title="《春江花月夜》" >}}
春江潮水连海平,海上明月共潮生。<br />
滟滟随波千万里,何处春江无月明!<br />
江流宛转绕芳甸,月照花林皆似霰。<br />
空里流霜不觉飞,汀上白沙看不见。<br />
江天一色无纤尘,皎皎空中孤月轮。<br />
江畔何人初见月?江月何年初照人?<br />
人生代代无穷已,江月年年望相似。<br />
不知江月待何人,但见长江送流水。<br />
白云一片去悠悠,青枫浦上不胜愁。<br />
谁家今夜扁舟子?何处相思明月楼?<br />
可怜楼上月裴回,应照离人妆镜台。<br />
玉户帘中卷不去,捣衣砧上拂还来。<br />
此时相望不相闻,愿逐月华流照君。<br />
鸿雁长飞光不度,鱼龙潜跃水成文。<br />
昨夜闲潭梦落花,可怜春半不还家。<br />
江水流春去欲尽,江潭落月复西斜。<br />
斜月沉沉藏海雾,碣石潇湘无限路。<br />
不知乘月几人归,落月摇情满江树。
{{< /blockquote >}}

春江潮水连海平,海上明月共潮生。
滟滟随波千万里,何处春江无月明!
江流宛转绕芳甸,月照花林皆似霰。
空里流霜不觉飞,汀上白沙看不见。
江天一色无纤尘,皎皎空中孤月轮。
江畔何人初见月?江月何年初照人?
人生代代无穷已,江月年年望相似。
不知江月待何人,但见长江送流水。
白云一片去悠悠,青枫浦上不胜愁。
谁家今夜扁舟子?何处相思明月楼?
可怜楼上月裴回,应照离人妆镜台。
玉户帘中卷不去,捣衣砧上拂还来。
此时相望不相闻,愿逐月华流照君。
鸿雁长飞光不度,鱼龙潜跃水成文。
昨夜闲潭梦落花,可怜春半不还家。
江水流春去欲尽,江潭落月复西斜。
斜月沉沉藏海雾,碣石潇湘无限路。
不知乘月几人归,落月摇情满江树。

好友链接

传传转转
一个在等毕业的菜博士…

GeekThis.net

Google Maps

Adding Google Maps can sometimes be useful to add inside of posts or onto pages of your website. Our shortcode provides the general Google Maps Place API to embed a Google Map with a search query. A search can include an address, city, street, or almost any other location.

With Google Maps, you need to first setup a Google Maps API Key. It’s free and easy to setup. Visit the [Google Developer API Console]google-console and create a new application to get your API key. You can store this key inside your Hugo configuration file or each time you ues the shortcode, you can add the API Key to the parameter key.

1[params]
2	googleMapsAPIKey = "000000000000"

The Google Maps shortcode accepts the parameters of height, key, and location. The height defaults to 400px if it’s not set and the api key defaults to the site configuration API Key. The location is a search query for a location you want to display for the map.

1{{< google-maps key="000" height="300" location="Googleplex, Amphitheatre Parkway, Mountain View, CA" >}}

Because I didn’t open the service from Google Cloud Platform(Visa needed), just write down it.

Baidu Maps

We only support one baidumap in a single page

Gaode Maps

We only support one baidumap in a single page

Box Documents

If you use Box to share files, adding embedded files to your website is easy. Box provides an embedded view for shared files that displays a preview of almost any file available, such as PDF, DOC, Spreadsheets and others.

The box shortcode accepts two parameters, the share ID of the file and the height you want the document to be displayed at. To get the ID of a file inside of Box, right click on a file inside of Box and click on “Share.” The publicly available URL will be similar to https://app.box.com/s/mwhbbflukstfsjz8mwkdg9btn9h5con3, you will want to grab the unique string of characters ofter the /s/ path.


1100 Words|This article has been read times