Hugo Shortcodes

Sat, 26 Aug 2023 10:10:04 +0800

什么是 Shortcodes #

Shortcodes（简码或短代码） 是 Hugo 为了避免内容作者因为 Markdown 语法的不足而插入 HTML 到内容中所创建的

简单地说，Shortcodes 就好比 Hexo 中的 外挂标签（Tag Plugins）

我们可以随意的编写属于自己的 Shortcodes

如何使用 Shortcodes #

你使用的 Hugo Theme 可能自带了一些 Shortcodes

通过翻阅主题文档，我们可以通过简短的语法在 Markdown 中使用这些 Shortcodes

Shortcodes 的调用方式 #

我们可以通过

{{< shortcodename parameters >}}

直接调用短代码

Shortcodes 目录 #

编写 Shortcodes 就像编写 Tag Plugins 一样简单

我们首先需要了解 Shortcodes 目录

Shortcodes 目录位于 ~/layouts/ 下,我们可以通过创建 HTML 文件编写自己的 Shortcodes

了解完目录，我们就可以尝试编写自己的 Shortcodes 了

编写 Shortcodes #

在 ~/layouts/shortcodes 下新建一个 HTML 文件

HTML 文件的名称就是短代码的名称

譬如:

myShortcodes
codeDemo

我们在 Markdown 中写作时就可以通过 {{< myShortcodes parameters >}} 的方式调用

现在我们将它命名为 colorfont

我们在里面写一段简单的 HTML

让我们可以通过 color=colorname 的方式传参给 Shortcodes，所以我们使用 {{ with .Get "color" }}

接着，我们使用 Shortcodes 让文字变红，这时候，我们就需要使用 {{ .Inner }} 来获取我们传给 Shortcodes 的文字

这样我们就完成了一个简单的 Shortcodes

来试试效果吧！

在 Markdown 中使用 {{< colorfont color="red" >}} Content {{</ colorfont >}} 来调用

Content

看，成功了！

它还有更多用法，比如插入一个 Emoji

我们还可以将它们融合在一起

泰库拉！

它还有许多的用法，就等各位去一一发掘了

警告! 如果你想要自定义 Shortcodes 的样式，你应该在另外的 CSS 文件中书写样式，你不应该在 Shortcodes 文件中直接使用 <style /> 语法，也不应该在 Shortcodes 中引入样式，那将会浪费不必要的流量

追溯 | Blog 回忆录

Fri, 25 Aug 2023 20:33:10 +0800

博客的开始 #

2019 年，我跟着互联网上的教程，使用 Hexo 搭建起了我的博客

当时的域名选用的还是 Freenom 的 slblog.ga

主题是 hexo-theme-miho

主题 Demo

后来博客文章慢慢变多，需求也随着扩大，基本的博客功能已经满足不了我了,于是开始了我的第一次换主题之旅

第一次更换主题 #

当时为了兼顾好看和功能多样,我在 Hexo Themes 上挑选了很久，最后看上了一款名为 Butterfly 的主题

OS: 当时 Butterfly 的版本还是 2.3.0，现在 Butterfly 的版本已经迭代到 4.9.0 了，时间过的真快啊

主题 Demo

使用 Butterfly 的这段时间，我学会了一点 HTML、CSS、JavaScript

也知道怎么修改主题达到自己满意的效果了

记得当时看的第一篇修改主题的文章是小康的《Hexo 魔改日记》

之后，我也学着修改主题，当时我做的弱智操作包括但不限于:

给全站的所有卡片添加毛玻璃样式（结果：导致风扇呼呼抱怨）
修改暗黑模式背景（结果：配色十分有一百分的不协调~~看起来和老年人表情包的配色没什么两样~~）

第二次更换主题 #

这次更换主题主要是别的主题实在是太炫酷了

更换的主题叫 Aurora

主题 Demo

不过由于一些不可抗力因素~~其实就是懒~~，这次换主题没有成功

交叉路口 #

看到苏卡卡和宝硕都是 Next.js

我也不能闲着，于是找了个模板套了进去，顺便给它添加了友链的功能

主页

友链页面

后来因为维护太麻烦了~~主要是 React 让我头疼，加上我的技术栈不是 React~~于是果断抛弃

安稳之路 #

最后我选择了 Hugo 作为 Hexo 的替代品

为什么选择 Hugo 作为 Hexo 的替代品:

Fast - 快,推送之后秒部署
Diverse - Go 模板语法
Simple - 主题源码可以通过新建 HTML 进行修改
Convenient - Hugo Module 让我们需要修改主题某处只需本地新建对应的文件即可,无需克隆整个仓库,也无需担心无法 Pull

~~编不下去了＞︿＜~~

在选择了 Hugo 之后,我用了 Congo 作为博客主题

主题 Demo

也许之后还会换上其他的构建工具,

也许会一直保持这样

Blog on FloatSheep's Blog

Hugo Shortcodes

什么是 Shortcodes #

如何使用 Shortcodes #

Shortcodes 的调用方式 #

Shortcodes 目录 #

编写 Shortcodes #

追溯 | Blog 回忆录

博客的开始 #

第一次更换主题 #

第二次更换主题 #

交叉路口 #

安稳之路 #