
操练起来!
前言
Shortcodes 翻译为: 短代码或者简码
简码是内容文件中的一个简单片段,Hugo将使用预定义的模板对其进行呈现.
除了更清洁的Markdown外,短代码还可以随时更新以反映新的类,技术或标准. 在网站生成时,Hugo简码将轻松合并到您的更改中. 您避免了可能复杂的搜索和替换操作.
需注意
本博客基于 HUGO, 使用的是 reuixiy 开发的 MemE 主题, 但由于该主题暂时不支持 Shortcodes (与$\LaTeX$ 渲染冲突), 所以, 如果你用的也是该主题, 又想玩玩儿 Shortcodes, 那么你需要作出一些小修改, 修改办法见下方链接.
MemE v4.0.0 breaks Hugo shortcodes
- 为防止
shortcodes
语法被博客生产短代码
, 加 * 使用 {{</* myshortcode */>}}
输出结果为:
{{< myshortcode >}}
Shortcodes 实例
当前年 Year
官网例子, 输出今年的年份.
|
|
今年是 2021 年.
只需建立 ./layouts/shortcodes/year.html
|
|
mark 标记支持
|
|
实现方法很简单, 只需创建 mark.html
|
|
abbr 缩写支持
|
|
实现方法也很简单, 只需创建 abbr.html
|
|
维基百科 Wikipedia
借鉴自GitHub, 举个栗子:
|
|
blockquote
借鉴自GitHub, 举个栗子:
|
|
花开花谢 白天黑夜
一切自然 又不尽然
春夏秋冬 经过才懂
世间冷暖 无非自然
image with caption
|
|

实现稍复杂一些, 依旧建立 imgcap.html
|
|
其中, src
和 title
为必填项, alt
和 width
为选填项, alt
默认与 title
保持一致, width
默认值为:
95%
.
Hugo-notice
This is not a standalone theme. It is a Hugo theme component providing a shortcode: notice to display nice notices. Four notice types are provided: warning, info, note and tip.
hugo-notice
是一个制作十分精美的短代码, 非常感谢原作者的付出, 但使用并不需要把他的仓库 copy 到本地, 只需将 notice.html
copy 到 ./layouts/shortcodes/
下, 如需要翻译, 且使用 MemE 主题
, 只需要在根目录下创建 ./i18n/zh-cn.toml
|
|
显示效果如下:
Warning
|
|
Warning
这是告诫! 请注意!
Info
|
|
Info
这是引言
Tip
|
|
Tips
这是小贴示
Note
|
|
Note
这是注释
音乐 Music
基于 MetingJS 制作 ./layouts/shortcodes/music.html
{{< music id="569200212" type="song" server="netease" >}}
option | default | description |
---|---|---|
id | require | song id / playlist id / album id / search keyword |
server | require | music platform: netease, tencent, kugou, xiami, baidu |
type | require | song, playlist, album, search, artist |
更多选项看这里
显示效果:
Warning
该 shortcodes 存在问题! 会导致 TOC 目录点击失效, 所以, 暂时只能将音乐放到没有目录的页面 👇

视频 Video
YouTube
原生支持 YouTube, 代码如下
|
|
B 站
优酷 YOUKU
还可以创建./layouts/shortcodes/youku.html
使其支持 YOUKU
|
|
GitHub gist
原生支持, 添加 GitHub gist
|
|
好友链接 Friend link
很多博客都支持添加 友链
, 本博客也不例外, 在这里
借鉴自 hugo-friendlinks, 针对本主题, 稍加修改.
|
|
提供下载 download
以上所有 shortcodes
代码都可以访问以下 GitHub
链接下载, 欢迎发现问题的同学提交Issues!
These are shortcodes that I have created for the Hugo static blogging engine.