内嵌 bilibili 视频

模板及样式

{{ $id := index .Params 0 }}{{ $page := index .Params 1 | default 1}}
<iframe sandbox="allow-scripts allow-same-origin allow-popups" class="bili-player"
  src="//player.bilibili.com/player.html?{{ if (findRE "^[bB][vV][0-9a-zA-Z]+$" $id) }}bvid{{ else }}aid{{ end }}={{ $id }}&page={{ $page }}&danmaku=0"
  scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" loading="lazy"></iframe>
.bili-player {
  width: 100%;
  height: 550px;
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    width: 100%;
    height: 250px;
  }
}

使用

模板保存到/layouts/shortcodes/bilibili.html, 添加样式.

使用aid: {{ <bilibili 414397078> }}
使用bid: {{ <bilibili BV1VV411S7rx> }}
带分P: {{ <bilibili BV1VV411S7rx 3> }}

萌娘百科黑幕效果

我好饿啊

模板及样式

<span class="heimu" title="你知道的太多了">{{.Inner}}</span>
.heimu {
  color: black;
  background-color: black;
  &:hover {
    color: white;
  }
}

使用

模板保存到/layouts/shortcodes/heimu.html, 添加样式.

{{ <heimu> }}你需要遮挡的内容{{ </heimu> }}

内嵌 Pixiv 图片

模板及样式

{{ $id := index .Params 0 }}
{{ $size := index .Params 1 | default "medium" }}
{{ $border := index .Params 2 | default "on" }}
<script async src="https://source.pixiv.net/source/embed.js" charset="utf-8"></script>
<div class="pixiv-embed" data-id="{{ $id }}" data-size="{{ $size }}" data-border="{{ $border }}"></div>
.pixiv-embed {
  max-width: 100%;
  display: inline-block;
  iframe {
    max-width: 100%;
  }
  &[data-size*="large"] {
    text-align: center;
  }
}

.pixiv-embed-title,
.pixiv-embed-meta {
  display: none;
}

使用

模板保存到/layouts/shortcodes/pixiv.html, 添加样式.

{{ <pixiv 77941126 small> }}
{{ <pixiv 77941126 medium off> }}
{{ <pixiv 77941126 large on> }}

9

 

模板及样式

<span style="background-size:cover;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TRSsVBzsUcchQxcGCqIijVLEIFkpboVUHk0u/oElDkuLiKLgWHPxYrDq4OOvq4CoIgh8gTo5Oii5S4v+SQosYD4778e7e4+4dIDQqTDW7JgBVs4xUPCZmc6tizysCCAMYQ0Bipp5IL2bgOb7u4ePrXZRneZ/7c/QreZMBPpF4jumGRbxBPLNp6Zz3iUOsJCnE58TjBl2Q+JHrsstvnIsOCzwzZGRS88QhYrHYwXIHs5KhEk8TRxRVo3wh67LCeYuzWqmx1j35C4N5bSXNdZrDiGMJCSQhQkYNZVRgIUqrRoqJFO3HPPxDjj9JLplcZTByLKAKFZLjB/+D392ahalJNykYA7pfbPtjBOjZBZp12/4+tu3mCeB/Bq60tr/aAGY/Sa+3tcgRMLANXFy3NXkPuNwBwk+6ZEiO5KcpFArA+xl9Uw4YvAX61tzeWvs4fQAy1NXyDXBwCIwWKXvd4929nb39e6bV3w9XYnKckAw/jgAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAADEwAAAxMBPWaDxwAAAAd0SU1FB+QJGAAxL7Qw1N4AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAaklEQVQ4y2NgoDJgRBf4////V6wKGRm5ybIBm4H/////CsMkuRCmAZdrkA3EpYaJFK8R420mSoODoIFEhRM+XxAbTsSEH1YDcbmUkZGRm1CkUSVJURQpxAAmarqO6t4dOC8PmHdp4uURCABxr0elMAN5CQAAAABJRU5ErkJggg==');"> </span>

使用

{{ <9> }}