Hugo使用简码Shortcode指南

请去掉"{}“前后的”"字符

code 代码

\{\{<code javascript>\}\}
这里替换你的代码
\{\{</code>\}\}

常规的md插入的代码不支持折叠，如果代码太长会很不友好，所以要用简码让代码展开收起; 以下为接入过程，由于有评友说了些不一样的需求，本人小改了一下： code.html

<div class="highlight-wrapper">
    <div class="highlight-before" style="display:none">{{ .Get 0 }}</div>
    {{ if len .Params | eq 2 }}
        {{ highlight (trim .Inner "\n\r") (.Get 0) (.Get 1) }}
    {{ else }}
        {{ highlight (trim .Inner "\n\r") (.Get 0) "" }}
    {{ end }}
</div>

head引入代码：

javascript
var height = "300px";

if (
  document.readyState === "complete" ||
  (document.readyState !== "loading" && !document.documentElement.doScroll)
) {
  makeCollapsible();
} else {
  document.addEventListener("DOMContentLoaded", makeCollapsible);
}

function toggle(e) {
  e.preventDefault();
  var link = e.target;
  var div = link.parentElement.parentElement;

  if (link.innerHTML == "&nbsp;展开&nbsp;") {
    link.innerHTML = "&nbsp;收起&nbsp;";
    div.style.maxHeight = "";
    div.style.overflow = "none";
  }
  else {
    link.innerHTML = "&nbsp;展开&nbsp;";
    div.style.maxHeight = height;
    div.style.overflow = "hidden";
    div.scrollIntoView({ behavior: 'smooth' });
  }
}

function makeCollapsible() {
  var divs = document.querySelectorAll('.highlight-wrapper');

  for (i = 0; i < divs.length; i++) {
    var div = divs[i];
    if (div.offsetHeight > parseInt(height, 10)) {
      div.style.maxHeight = height;
      div.style.overflow = "hidden";

      var e = document.createElement('div');
      e.className = "highlight-link";

      var html = '<a href="">&nbsp;展开&nbsp;</a>';
      e.innerHTML = html;
      div.appendChild(e);
    }
  }

  var links = document.querySelectorAll('.highlight-link');
  for (i = 0; i < links.length; i++) {
    var link = links[i];
    link.addEventListener('click', toggle);
  }
}

//事件处理
window.onload = function () {
  var divs = document.querySelectorAll('.highlight-wrapper');
  var eleItems = [].slice.call(divs);
  eleItems.forEach(function (item, idx) {
      item.addEventListener('mouseover', function () {
        var tag = item.querySelectorAll('.highlight-before')[0];
        tag.style.display = "block";
      });
      item.addEventListener('mouseout', function () {
        var tag = item.querySelectorAll('.highlight-before')[0];
        tag.style.display = "none";
      });
  });
}

css
.highlight-wrapper {
    position: relative;
}

.highlight-before {
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 2;
    color: white;
    background-color: #333333;
    opacity: .8;
    padding: 2.5px 10px;
    border-radius: 5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.highlight-link {
    position: absolute;
    bottom: 0;
    right: 0;
}

.highlight-link a{
    box-shadow: 0 0px;
    font-size: 14px;
    color: #eea2a4;
}

github 源卡片

\{\{< github title="liuchaowen/hugo-blog-papermod" >\}\}

效果：

只需要把repo的id放入即可，会自动去组装卡片，很方便

youtube 油管视频

\{\{< youtube "AYEeCauuRsA" >\}\}

效果：

bilibili B站视频

\{\{< bilibili "BV1Jo4y167JP" >\}\}

效果：

game 游戏卡片

\{\{< game "https://www.yystv.cn/g/36">\}\}

效果：

远程获取内容失败，请检查 API 有效性。

music 网易云音乐歌单

\{\{< music id="1443928242" >\}\}

效果：

innerlink 内链文章

\{\{< innerlink src="/post/tech/HugoUseShortcode.md" >\}\}

效果：

Hugo使用简码Shortcode指南

日期: 2023-03-09 标签: #shortcode #hugo #简码

我去掉了摘要，因为加上.Summary会运行不成功，未找到原因，如有大神知道请评论留言。

link 外链跳转（带提示）

\{\{< link "林木木" "https://immmmm.com" >\}\}

效果：林木木
注意要修改link.html的跳转地址,注意空格注意空格注意空格
下面是跳转代码jump.html

html
<!DOCTYPE html>
<head>
<style>
    .box {
      height: 100vh;
      background-color: #f4f5f5;
    }
    .box .tip-box {
      position: absolute;
      left: 50%;
      top: 30%;
      max-width: 624px;
      width: 86%;
      background-color: #fff;
      transform: translateX(-50%);
      padding: 30px 40px 0;
      box-sizing: border-box;
      border: 1px solid #e5e6eb;
      border-radius: 2px;
    }
    .box .tip-box .logo-box .text{
        display: block;
        position: absolute;
        top: -38px;
        left: 36px;
        font-size: 24px;
        font-weight: bold;
    }
    .box .tip-box .logo-box .logo {
      display: block;
      width: 35px;
      height: 35px;
      position: absolute;
      top: -40px;
      left: 0;
    }
    .box .tip-box .content .title {
      font-size: 18px;
      line-height: 24px;
    }
    .box .tip-box .content .link {
      padding: 16px 0 24px;
      border-bottom: 1px solid #e5e6eb;
      position: relative;
      color: gray;
      font-size: 14px;
    }
    .box .tip-box .content .btn {
      display: block;
      margin: 20px 0 24px auto;
      color: #fff;
      border-radius: 3px;
      border: none;
      background: #eea2a4;
      height: 32px;
      font-size: 14px;
      padding: 0 14px;
      cursor: pointer;
      outline: 0;
    }
    </style>
    <script>
        // 获取 url
        var url = "";
        function getTargetURL() {
            console.log(window.location.href)
              var query = window.location.href.split("?")[1] || "";
              var target = query.split("target=")[1] || "";
               url = window.decodeURIComponent(target);
              document.getElementById('target-link').innerHTML = url;
              console.log(url)
        }
        // 跳转页面
        function navigateToTarget() {
              if (!url) {
                return;
              }
              window.location.href = url;
        }
        window.onload = function(){
            getTargetURL(); // 获取 url
        }
        </script>
</head>
<body>
    <div class="box">
        <div class="tip-box">
            <div class="logo-box">
                <img
                class="logo"
                src="https://blog.xlap.top/logo.png"
              />
              <span class="text">LapTop</span>
            </div>
          <div class="content">
            <div class="title">
              即将离开 Cheman 的博客，请注意账号财产安全
            </div>
            <div class="link" id="target-link"></div>
            <button class="btn" onclick="navigateToTarget()">继续访问</button>
          </div>
        </div>
      </div>
</body>
</html>

ppt 幻灯片

\{\{< ppt src="ppt网址" >\}\}

详情点击 Sulv

gallery 画廊

\{\{< gallery "images/dirname">\}\}

figure 作者/人物/角色

\{\{< figure src="https://blog.xlap.top/avatar.jpeg" width="50" height="50" title="Cheman" link="https://blog.xlap.top">\}\}

效果：

Cheman

douban 我看过的书影

\{\{< books >\}\} or \{\{< movies>\}\}

详细效果看关于需要搭建服务，详情点击林木木

douban 某个书影

\{\{< douban "https://book.douban.com/subject/35496106/">\}\}
\{\{< douban "https://movie.douban.com/subject/35267208/">\}\}

效果：

流浪地球2

8.2

2023 / 中国大陆 / 科幻冒险灾难 / 郭帆 / 吴京刘德华

需要你在你的豆瓣账户上看过某本书或某部影视，然后Github Action运行同步生成douban db数据，才能起作用。

collapse 可折叠文本

\{\{<collapse summary="**A Title**">\}\}
  this is content
\{\{</collapse>\}\}

效果：

A Title

this is content

html 原代码

\{\{< rawhtml >\}\}
  <p class="speshal-fancy-custom">
    This is <strong>raw HTML</strong>, inside Markdown.
  </p>
\{\{< /rawhtml >\}\}

效果：

This is raw HTML, inside Markdown.

rtl or ltr 右左方向文本(藏文) 未懂

{{ rtl md="Md"}}
这是从右向左的文本
{{/rtl}}

album 动态图集

\{\{< album >\}\}

需要搭建memos，详情点击林木木
效果：

memos 说说动态

\{\{< memos >\}\}

需要搭建memos，详情点击林木木
效果：

code 代码#

github 源卡片#

youtube 油管视频#

bilibili B站视频#

game 游戏卡片#

music 网易云音乐歌单#

innerlink 内链文章#

link 外链跳转（带提示）#

ppt 幻灯片#

gallery 画廊#

figure 作者/人物/角色#

douban 我看过的书影#

douban 某个书影#

collapse 可折叠文本#

html 原代码#

rtl or ltr 右左方向文本(藏文) 未懂#

album 动态图集#

memos 说说动态#