Hugo系列(三)：Hugo短代码

以 Diary 主题为例，给 Hugo 博客添加短代码。
8 分钟
3536 字
分类:
实用教程
标签:
#Hugo

Hugo 可以通过模板文件很方便地添加短代码，这里以 Diary 主题为例，记录添加短代码的过程。

准备工作

主题没有 custom.scss 文件，自定义方式可以将 ~/themes/diary/assets/scss/journal.scss 文件复制到站点根目录下 ~/assets/scss 中，在其中直接更改，也可以复制后，在末尾添加 custom.scss 引用，然后在自定义文件中修改，这里采用第二种方式，文中 ~ 均代表博客根目录。

  1. 复制 journal.scss 文件到站点根目录下。
  2. 创建两个文件 shortcodes.scss 用来放置自定义样式。
  3. 在复制的 ~/assets/scss/journal.scss 末尾添加代码引用自定义样式：
SCSS
@import "shortcodes"
点击展开查看更多
  1. 在 ~/data 文件夹下创建 SVG.toml 文件，用来存放短代码引用的图标，如果添加的短代码不涉及图标引用，可以不创建。
  2. 在 ~/layouts/shortcodes/ 目录下创建 <shortcodes>.html 文件，用来存放短代码内容，<> 内表示短代码名称，后文会更换。

豆瓣条目

配置

新建 ~/layouts/shortcodes/douban.html，放入下面的代码：

HTML
{{ $dbUrl := .Get 0 }}
{{ $dbApiUrl := "https://neodb.social/api/catalog/fetch?url=" }}
{{ $dbFetch := getJSON $dbApiUrl $dbUrl }}

{{ if $dbFetch }}
    {{ $itemRating := 0 }}{{ with $dbFetch.rating }}{{ $itemRating = . }}{{ end }}
    <div class="db-card">
        <div class="db-card-subject">
            <div class="db-card-post"><img loading="lazy" decoding="async" referrerpolicy="no-referrer" src="{{ $dbFetch.cover_image_url }}"></div>
            <div class="db-card-content">
                <div class="db-card-title"><a href="{{ $dbUrl }}" class="cute" target="_blank" rel="noreferrer">{{ $dbFetch.title }}</a></div>
                <div class="rating"><span class="allstardark"><span class="allstarlight" style="width:{{ mul 10 $itemRating }}%"></span></span><span class="rating_nums">{{ $itemRating }}</span></div>
                <div class="db-card-abstract">{{ $dbFetch.brief }}</div>
            </div>
            <div class="db-card-cate">{{ $dbFetch.category }}</div>
        </div>
    </div>
{{else}}
    <p style="text-align: center;"><small>远程获取内容失败，请检查 API 有效性。</small></p>
{{end}}
点击展开查看更多

接下来在 ~/assets/scss/shortcodes.scss 中添加下面的样式代码：

SCSS
/* db-card -------- start */
.db-card {
  margin: 2rem 3rem;
  background: #fafafa;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.25);
}

.db-card-subject {
  display: flex;
  align-items: flex-start;
  line-height: 1.6;
  padding: 12px;
  position: relative;
}

.db-card-content {
  flex: 1 1 auto;
}

.db-card-post {
  width: 96px;
  margin-right: 15px;
  display: flex;
  flex: 0 0 auto;
}

.db-card-title {
  margin-bottom: 5px;
  font-size: 18px;
}

.db-card-title a {
  text-decoration: none !important;
}

.db-card-abstract,
.db-card-comment {
  font-size: 14px;
  overflow: auto;
  max-height: 3rem;
}

.db-card-cate {
  position: absolute;
  top: 0;
  right: 0;
  background: #f99b01;
  padding: 1px 8px;
  font-size: small;
  font-style: italic;
  border-radius: 0 8px 0 8px;
  text-transform: capitalize;
}

.db-card-post img {
  width: 96px !important;
  height: 96px !important;
  border-radius: 4px;
  -o-object-fit: cover;
  object-fit: cover;
}

.rating {
  margin: 0 0 5px;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
}

.rating .allstardark {
  position: relative;
  color: #f99b01;
  height: 16px;
  width: 80px;
  background-size: auto 100%;
  margin-right: 8px;
  background-repeat: repeat;
  background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6TTY2NC44IDU2MS42bDM2LjEgMjEwLjNMNTEyIDY3Mi43IDMyMy4xIDc3MmwzNi4xLTIxMC4zLTE1Mi44LTE0OUw0MTcuNiAzODIgNTEyIDE5MC43IDYwNi40IDM4MmwyMTEuMiAzMC43LTE1Mi44IDE0OC45eiIgZmlsbD0iI2Y5OWIwMSIvPjwvc3ZnPg==);
}

.rating .allstarlight {
  position: absolute;
  left: 0;
  color: #f99b01;
  height: 16px;
  overflow: hidden;
  background-size: auto 100%;
  background-repeat: repeat;
  background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6IiBmaWxsPSIjZjk5YjAxIi8+PC9zdmc+);
}

body.night{ 
  .db-card {
    background: #212121;
  }
  .db-card-abstract,
  .db-card-comment {
    color: #e6e6e6;
  }
 .db-card-cate {
    color: #e6e6e6;
  }
  .rating_nums{
    color: #e6e6e6
  }
}
@media (max-width: 550px) {
  .db-card {
    margin: 0.8rem 1rem;
  }

  .db-card-comment {
    display: none;
  }
}
/* db-card -------- end */
点击展开查看更多

使用

在文章中添加短代码，语法如下(将大括号中间的 \ 去掉)：

BASH
{\{< douban "https://book.douban.com/subject/35496106/">}\}
{\{< douban "https://movie.douban.com/subject/35267208/">}\}
点击展开查看更多

豆瓣近期观影

Hugo 系列 (五)：添加豆瓣观影页面

Notice

配置

新建 ~/layouts/shortcodes/notice.html 写入如下内容：

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>
点击展开查看更多

在 ~/data/SVG.toml 中引入图标：

TOML
notice-caution = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 576 512"><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-important = '<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-warning = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="126 76.5 300 300"><path d="M297.431 324.397v-34.255c0-3.245-2.344-5.95-5.358-5.95h-32.146c-3.014 0-5.358 2.705-5.358 5.95v34.255c0 3.245 2.344 5.95 5.358 5.95h32.146c3.014 0 5.358-2.705 5.358-5.95Zm-.335-67.428 3.014-82.753c0-1.081-.502-2.524-1.674-3.425-1.005-.902-2.512-1.983-4.019-1.983h-36.834c-1.507 0-3.014 1.081-4.019 1.983-1.172.901-1.674 2.704-1.674 3.786l2.846 82.392c0 2.344 2.512 4.146 5.693 4.146h30.975c3.013 0 5.525-1.803 5.692-4.146Zm-2.344-168.39L423.34 342.425c3.683 7.032 3.516 15.686-.335 22.717-3.85 7.031-10.883 11.358-18.417 11.358H147.413c-7.534 0-14.566-4.327-18.417-11.358-3.85-7.031-4.018-15.685-.335-22.716L257.248 88.578C260.93 81.188 268.13 76.5 276 76.5c7.87 0 15.069 4.688 18.752 12.08Z"/></svg>'
点击展开查看更多

在 ~/assets/scss/shortcodes.scss 中添加样式代码：

SCSS
.notice .icon{
    size: 15px;
    fill: currentColor;
}
.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-warning */
.notice.notice-warning {
    background: hsla(0, 65%, 65%, 0.15);
    border-left: 5px solid hsl(0, 65%, 65%);
}
.notice.notice-warning .notice-title {
    color: hsl(0, 65%, 65%);
}
/* notice-caution */
.notice.notice-caution {
    background: hsla(30.244, 80%, 70%, 0.15);
    border-left: 5px solid hsl(30.244, 80%, 70%);
}
.notice.notice-caution .notice-title {
    color: hsl(30.244, 80%, 70%);
}

/* notice-important */
.notice.notice-important {
    background: hsla(260.979, 69%, 59%, 0.15);
    border-left: 5px solid hsl(260.979, 69%, 59%);
}
.notice.notice-important .notice-title {
    color: hsl(260.979, 69%, 59%);
}

/* notice-note */
.notice.notice-note {
    background: hsla(200, 65%, 65%, 0.15);
    border-left: 5px solid hsl(200, 65%, 65%);
}
.notice.notice-note .notice-title {
    color: hsl(200, 65%, 65%);
}

/* notice-tip */
.notice.notice-tip {
    background: hsla(140, 65%, 65%, 0.15);
    border-left: 5px solid hsl(140, 65%, 65%);
}
.notice.notice-tip .notice-title {
    color: hsl(140, 65%, 65%);
}


/* Dark Mode */
body.night .notice.notice-warning {
    background: hsla(0, 25%, 25%, 0.15);
    border-left: 5px solid hsl(0, 25%, 35%);
}
body.night .notice.notice-warning .notice-title {
    color: hsl(0, 25%, 35%);
}

body.night .notice.notice-important {
    background: hsla(230, 26%, 39%, 0.15);
    border-left: 5px solid hsl(230, 26%, 39%);
}
body.night .notice.notice-important .notice-title {
    color: hsl(230, 26%, 39%);
}

body.night .notice.notice-note {
    background: hsla(200, 25%, 35%, 0.15);
    border-left: 5px solid hsl(200, 25%, 35%);
}
body.night .notice.notice-note .notice-title {
    color: hsl(200, 25%, 35%);
}

body.night .notice.notice-tip {
    background: hsla(140, 25%, 35%, 0.15);
    border-left: 5px solid hsl(140, 25%, 35%);
}
body.night .notice.notice-tip .notice-title {
    color: hsl(140, 25%, 35%);
}

body.night .notice.notice-caution {
    background: hsla(30.244, 80%, 25%, 0.15);
    border-left: 5px solid hsl(30.244, 80%, 25%);
}
body.night .notice.notice-caution .notice-title {
    color: hsl(30.244, 80%, 25%);
}
点击展开查看更多

使用

使用语法如下：

BASH
{\{< notice notice-warning >}}
你好。
{\{< /notice >}}

{\{< notice notice-important >}}
你好。
{\{< /notice >}}

{\{< notice notice-note >}}
你好。
{\{< /notice >}}

{\{< notice notice-tip >}}
你好。
{\{< /notice >}}

{\{< notice notice-caution >}}
你好。
{\{< /notice >}}
点击展开查看更多

友链

配置

新建 ~/layouts/shortcodes/friend.html 文件，写入：

HTML
{{- $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>
点击展开查看更多

在 shortcodes.scss 中添加样式：

SCSS
// 友链
// 头像边框颜色
$avatar-border-color: lighten($color-accent, 25%);
$avatar-border-color-dark: #C0C0C0;

// style-card 背景色
$friend-link-background-color: lighten($color-accent, 43%);
$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: 40px !important; 
    border: 3.0px inset $avatar-border-color;

    body.night & {
        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;

    body.night & {
        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;

    body.night & {
        color: $friend-link-color-dark;
    }

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

        body.night & {
            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;
    body.night & {
        color: $friend-link-color-dark;
    }
}

// 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;

    body.night & {
        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;
    }
}
点击展开查看更多

使用

BASH
{\{< friend name="名称" url="网址" avatar="头像" bio="简介" >}}
点击展开查看更多

时间线

配置

新建 ~/layouts/shortcodes/timeline.html 文件，写入：

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

<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>
        <a href="{{ $url }}">
            <div class="timeline__title">{{ $title }}</div>
        </a>
        <!-- title 可点击，默认就是跳转时间轴所在页 -->
        <div class="timeline__description">
            {{ $description }}
        </div>
    </div>
</div>
点击展开查看更多

在 shortcodes.scss 添加样式：

SCSS
// timeline
.timeline {
    display: flex;
    flex-direction: column;
}

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

.timeline__time {
    flex: 0 0 110px;
    color: #030100;
    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: $color-accent;
    z-index: 0;
}

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

.timeline__content {
    flex: 1;
    margin-left: 4.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: lighten($color-accent, 25%);
    border: 1.5px solid $color-accent;
    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: #030100;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0.5rem 0 0.4rem 1.5rem;
    /* 添加 1.5rem 的左侧内边距 */
}
body.night{
    .timeline__time, .timeline__description{
        color: #E6E6E6;
    }
}
@media screen and (max-width: 768px) {
    .timeline__time {
        font-size: 14px;
        /* 在小屏幕上使用较小的字体大小 */
    }
    .timeline__title {
        font-size: 16px;
        /* 在小屏幕上使用较小的字体大小 */
    }
    .timeline__description {
        font-size: 14px;
        /* 在小屏幕上使用较小的字体大小 */
    }
}
点击展开查看更多

使用

BASH
{\{< timeline date="2023-10-01" title="国庆节" description="祖国生日快乐" tags="节日" url="" >}\}
点击展开查看更多

块引用

配置

新建 ~/layouts/shortcodes/quote.html 文件，写入：

HTML
<blockquote>
    <p>{{ .Inner | markdownify }}</p>
    {{- if or (.Get "author") (.Get "source") -}}
    <span class="cite"><span>― </span>
        {{- if .Get "author" -}}
        <span>
            {{- .Get "author" -}}{{- if .Get "source" -}}, {{ end -}}
        </span>
        {{- end -}}
        {{- with .Get "url" -}}<a href="{{ . }}">{{- end -}}
            <cite>{{ .Get "source" }}</cite>
        {{- if .Get "url" -}}</a>{{- end -}}
    </span>
    {{- end -}}
</blockquote>
    
<style>

    span.cite {
        display: block;
        margin-top: 1em;
        font-size: 0.8em;
        text-align: right;
    }
</style>
点击展开查看更多

这里样式比较简单，直接写入了 HTML 文件中。

使用

BASH
{\{< quote author="作者/说话的人" source="书名/来源" url="链接（可选）" >}}
内容
{\{< /quote >}}
点击展开查看更多

按钮

配置

新建 ~/layouts/shortcodes/button.html 文件，写入：

HTML
<a class="custom-button"
  {{ with .Get "link" }}href="{{ . }}"{{ end }}
  {{ if eq (.Get "target") "_self" }}
    target="_self"
  {{ else }}
    target="_blank" rel="noopener noreferrer"
  {{ end }}
  {{ with .Get "download" }}download="{{ . }}"{{ end }}
  role="button"
>
  {{ .Inner }}
</a>
点击展开查看更多

在 shortcodes.scss 添加样式：

SCSS
// button
.custom-button {
    display: inline-block;
    padding: 0.25rem 1rem;
    background-color: $color-accent;
    color: rgb(255, 238, 238);
    text-decoration: none;
    border-radius: 0.375rem;
    transition: background-color 0.3s ease;
  }
  
  .custom-button:hover {
    background-color: #39393B;
  }
  
  /* 深色模式样式 */
body.night {
    .custom-button {
      background-color: #39393B;
    }
  
    .custom-button:hover {
      background-color: $color-accent;
    }
  }
点击展开查看更多

使用

使用方式如下：

BASH
{\{< button link="https://example.com" target="_self" >}\}
  在当前页面打开
{\{< /button >}\}

{\{< button link="https://example.com" >}\}
  在新标签页打开
{\{< /button >}\}

{\{< button link="https://example.com/file.pdf" download="custom-filename.pdf" >}\}
  下载文件
{\{< /button >}\}
点击展开查看更多

参数说明

参数说明
linkhref 参数，链接到的 URL。
target默认为外部链接，指定 _self 后为当前页面打开。
download下载参数，指定后按钮点击行为变为下载，参数指定值为下载文件名称。

GitHub 仓库信息

Hugo系列(六)：添加GitHub仓库信息短代码

参考

版权声明

作者: Tom Almighty

链接: https://blog.grew.cc/posts/hugo-shortcodes/

许可证: CC BY-NC-SA 4.0

本文采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

相关文章

查看更多文章

评论

开始搜索

输入关键词搜索文章内容

↑↓
↵
ESC
⌘K 快捷键