title: “Hugo博客自定义shortcodes” date: 2022-05-05T00:17:58+08:00 lastmod: 2022-05-05T00:17:58+08:00

author: [“Sulv”]

keywords: categories: tags: [建站]

description: “hugo博客通过简码的方式插入ppt、bilibili、youtube等功能”

weight: slug: "" draft: true # 是否为草稿 comments: true reward: true # 打赏 mermaid: true #是否开启mermaid showToc: true # 显示目录 TocOpen: true # 自动展开目录 hidemeta: false # 是否隐藏文章的元信息，如发布日期、作者等 disableShare: true # 底部不显示分享栏 showbreadcrumbs: true #顶部显示路径 cover: image: "" #图片路径例如：posts/tech/123/123.png caption: "" #图片底部描述 alt: "" relative: false

1. 引入 ppt 功能

定位到 layouts/shortcodes目录，新建一个文件叫 ppt.html，放入如下代码：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <style type="text/css">
        #googleslides_shortcodes {
            padding-bottom: 66%;
            position: relative;
            display: block;
            width: 100%;
            border-bottom: 5px solid;
        }
        #googleslides_shortcodes iframe {
            position: absolute;
            top: 0;
            left: 0
        }
    </style>
    <title></title>
</head>
<body>
<div id="googleslides_shortcodes">
    <iframe id="googleSlideIframe"
            width="100%"
            height="100%"
            src="{{ .Get "src" }}"
            frameborder="0"
            allowfullscreen="" >
    </iframe>
</div>
</body>
</html>

2. 引入 bilibili 视频

定位到 layouts/shortcodes目录，新建一个文件叫 bilibili.html，放入如下代码：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <style type="text/css">
        .bilibili_shortcodes {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 66%;
            margin: auto;
            overflow: hidden;
            text-align: center;
        }
        .bilibili_shortcodes iframe {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }
    </style>
    <title></title>
</head>
<body>
<div class="bilibili_shortcodes">
    <iframe
            src="https://player.bilibili.com/player.html?bvid={{.Get 0 }}&page={{ if .Get 1 }}{{.Get 1}}{{ else }}1&high_quality=1&danmaku=0&as_wide=0{{end}}"
            scrolling="no"
            border="0"
            frameborder="no"
            framespacing="0"
            allowfullscreen="true"
    >
    </iframe>
</div>
</body>
</html>

3. 引入 youtube 视频

定位到 layouts/shortcodes目录，新建一个文件叫 youtube.html，放入如下代码：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <style type="text/css">
        .youtube_shortcodes {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 66%;
            margin: auto;
            overflow: hidden;
            text-align: center;
        }
        .youtube_shortcodes iframe {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }
    </style>
    <title></title>
</head>
<body>
<div class="youtube_shortcodes">
    <iframe
            class="youtube-player"
            type="text/html"
            width="640"
            height="385"
            src="https://www.youtube.com/embed/{{ index .Params 0 }}?autoplay=0"
            style="
                 position: absolute;
                 top: 0;
                 left: 0;
                 width: 100%;
                 height: 100%;
                 border:0;"
            allowfullscreen frameborder="0">
    </iframe>
</div>
</body>
</html>

4. 引入博客文章内链

定位到目录 layouts/shortcodes，新建一个文件叫innerlink.html，放入如下代码：

<div style="height: 200px;margin: 1em auto;position: relative;
        box-shadow: 0 2px 4px rgb(0 0 0 / 25%), 0 0 2px rgb(0 0 0 / 25%);
        border-radius: 15px;padding: 23px;max-width: 780px;background: var(--entry);">
    {{ $url := .Get "src" }}
    {{ with .Site.GetPage $url }}
    <div style="font-size: 22px; font-weight: 600">
        <a target="_blank" href="{{ .Permalink }}" style="box-shadow: none">{{ .Title }}</a>
    </div>
    <span style="font-size: 14px; color: #999">
        日期: {{ .Date.Format ( default "2006-01-02") }}
        {{ if .Params.tags }}&nbsp;
        标签:
        {{ range .Params.tags }}
            #{{ . }}&nbsp;
        {{ end }}
    </span>
    <div style="font-size: 14px; line-height: 1.825;max-height: 75px; overflow: hidden;margin-top: 5px;">
        {{ .Summary | plainify}} ......
    </div>
    {{ end }}
    {{ end }}
</div>

5. 模板使用

5.1 ppt展示




    
    



    
    


 
# 使用的时候把字母a去掉，我加上是为了防止被识别生效

5.2 bilibili视频

{a{< bilibili BV1xW4y1a7NK >}}  
# 使用的时候把字母a去掉，我加上是为了防止被识别生效
# BV1Ab4y117G2 指的是 bilibili 链接中的 bvid
# 如果有集数（默认第一集），例如要播放第5集，则这样使用：{a{< bilibili BV1xW4y1a7NK 5 >}}

5.3 youtube 视频

{a{< youtube WsptdUFthWI >}}  
# 使用的时候把字母a去掉，我加上是为了防止被识别生效

5.4 博客文章内链

{a{< innerlink src="posts/tech/go_slice_map_thread_safety.md" >}}  
# 使用的时候把字母a去掉，我加上是为了防止被识别生效
# 注意：结尾要加md，开头不用加域名

# 卡片获取的文章长度默认是70，需要在config.yaml配置文件添加 summaryLength: 140，即设置为140