自用短代码 & 零碎代码集合
整理一下方便我自己抄作业。
目录
其实之前在别的博文里都写过了,但觉得还是集合到一篇里比较好抄作业。
注意事项:
- CSS 代码都折叠了,因为一般比较长而且我抄作业用不上()。
- 所有短代码的双花括号都用单花括号代替,抄作业时注意要使用
{{ }}
。 - 有时候代码里会出现
<br />
,单纯是因为我不想在快捷保存的时候因为过于智能的 VSCode 导致原本应该分成好几行的代码都糊到一起,可以无视。
代码基本都来自 ChatGPT 和网友作业,感谢大家。
Congo 和 Hugo 自带的短代码 #
首先是这个页面里有用的代码,大多复制自 Congo example site 源代码。
脚注 #
按文档所说,其实<footer>
也可以用,但发现它框起来的内容(1)不会斜体,(2)会自动换新行,觉得对我来说还是<cite>
好用。
「血中郁火,不肯认命;心头纵剑,不能辍锋。」<br />
——<cite>《辍锋》[^1]</cite>
[^1]: 词作青释,[歌曲链接](https://5sing.kugou.com/fc/14556253.html)。
效果展示
「血中郁火,不肯认命;心头纵剑,不能辍锋。」
——《辍锋》1
代码高亮 #
{< highlight html "linenos=table, hl_lines=4 7-9" >}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>示例HTML5文档</title>
</head>
<body>
<p>测试</p>
</body>
</html>
{< /highlight >}
效果展示
|
|
其他:缩写、下标、上标、键盘、标记 #
<abbr title="Graphics Interchange Format">GIF</abbr> 是一种位图图像格式。
H<sub>2</sub>O <br />
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup> <br />
按下 <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> 结束会话。
大多数<mark>蝾螈</mark>是夜行动物,捕食昆虫、蠕虫和其他小动物。
效果展示
GIF 是一种位图图像格式。
H2O
Xn + Yn = Zn
按下 CTRL+ALT+Delete 结束会话。
大多数蝾螈是夜行动物,捕食昆虫、蠕虫和其他小动物。
另外就是 Congo 自带的短代码。里面还有其他挺多有用的,但我不常用就不汇集到这里来了。
Icon & alert #
{< icon "full-moon" >},我就是用这个 icon 短代码添加了很多 emoji,因为网页显示出来的 emoji 样式不好看。
{< alert >}
**警告!** 这个操作是破坏性的!
{< /alert >}
// 这个只是为了空行,实际使用时无需添加
{< alert "circle-info" >}
我直到现在才发现要把图标名称放在双引号里,但看了一下我没加双引号也成功显示了,神奇……
{< /alert >}
效果展示
,我就是用这个 icon 短代码添加了很多 emoji,因为网页显示出来的 emoji 样式不好看。
文字相关 #
折叠 & 模糊 #
参考作业:Hugo | 在 Stack 主题上可行的短代码们,有非常多的好短代码!
{< detail "折叠" >}
示例
{< /detail >}
<span class="blur">模糊</span>
这个模糊在深色模式下会失效。因为 Congo 这个主题似乎设置了文字在某些时候会变白,所以直接抄作业的 CSS 代码来我会看到纯白一片,修改之后就深色模式下失效了,目前还在思考怎么办。 好像不失效了,不确定再看看。有遇到模糊失效的话请务必告知我。
效果展示
折叠
示例模糊
引用 #
由于直接用 markdown 语法引用会出现我不想要的双引号,像这样:
> Congo 自带的 markdown 引用
Congo 自带的 markdown 引用
所以我进行了一些修改。
在assets/css/custom.css
内添加:
.custom-blockquote {
quotes: none;
}
.custom-blockquote:before,
.custom-blockquote:after {
content: none;
}
这个代码的区分非常复杂,让我直接展示。
修改前
<blockquote>没修改的单行引用</blockquote>
<blockquote>
没修改的前后空行的单行引用
</blockquote>
<blockquote>
没修改的
多行引用
</blockquote>
<blockquote>
前后空行的没修改的
多行引用
</blockquote>
没修改的单行引用
没修改的前后空行的单行引用
没修改的 多行引用
前后空行的没修改的
多行引用
可以看到情况相当混乱。一空行引号就会重新冒出来,很不友好。
修改后
<blockquote class="custom-blockquote">修改后的单行引用</blockquote>
<blockquote class="custom-blockquote">
修改后的前后空行的单行引用
</blockquote>
<blockquote class="custom-blockquote">
修改后的
多行引用
</blockquote>
<blockquote class="custom-blockquote">
前后空行的修改后的
多行引用
</blockquote>
修改后的单行引用
修改后的前后空行的单行引用
修改后的 多行引用
前后空行的修改后的
多行引用
这就省心多了。而且不空行的话无法使用 markdown 语法直接空两格换行,我还是喜欢空行的。
分隔线 #
参考作业:Short Code Hugo 短代码
{< divider "HellO WorlD" "capitalize" >}
{< divider "Hello World" "uppercase" >}
{< divider "Hello World" "lowercase" >}
{< divider "Hello World" >}
原本的作业只适用于end
这一个单词,于是我抽打 GPT 帮我调教了一个所有英文字母都能写的版本:
<style>
@import url('https://fonts.googleapis.com/css2?family=Playwrite+MX&display=swap');
.divider {
display: flex;
align-items: center;
margin: 20px 0;
font-size: 12px;
}
.divider::before, .divider::after {
content: '';
flex: 1;
border-bottom: 1px solid #333;
}
.divider::before {
margin-right: 10px;
}
.divider::after {
margin-left: 10px;
}
.divider span.uppercase {
font-family: 'Playwrite MX', cursive;
text-transform: uppercase; /* 全大写 */
font-size: 16px;
}
.divider span.capitalize {
font-family: 'Playwrite MX', cursive;
text-transform: none; /* 不应用文本转换 */
font-size: 16px;
}
.divider span.lowercase {
font-family: 'Playwrite MX', cursive;
text-transform: lowercase; /* 全小写 */
font-size: 16px;
}
</style>
<div class="divider">
{{- if .Get 0 -}}
{{- $text := .Get 0 -}}
{{- $format := .Get 1 | lower -}} <!-- 第二个参数指定格式 -->
<span class="{{ if eq $format "uppercase" }}uppercase{{ else if eq $format "capitalize" }}capitalize{{ else if eq $format "lowercase" }}lowercase{{ end }}">{{ if eq $format "capitalize" }}{{- $text | title }}{{ else }}{{ $text }}{{ end }}</span>
{{- end -}}
</div>
效果展示
不进行任何字母转换:
Neodb 卡片 #
{< neodb "https://book.douban.com/subject/24882304/" >}
效果展示

长毛象嘟文 #
参考作业 again:Hugo | 在 Stack 主题上可行的短代码们
{< mastodon server="示例名称" user="用户名" status="嘟文 ID" >}
比如,链接为https://bgme.me/@bizarre71/113300529271001752
的一条嘟文,server
处填bgme.me
,user
处填bizarre71
,status
处填113300529271001752
。
效果展示
时间轴 #
参考作业:Hugo | 在 Stack 主题上可行的短代码们,以及薯饼提供的作业!
{< timeline date="2024-10-30" title="Timeline" description="博客时间轴上线" tags="页面" url="/about/#博客时间轴" >}
也抽打 GPT 帮我进行了一些改动,包括把 url 的值改成相对永久链接,有无 url 的情况分开处理,不同屏幕上的单个时间轴事件的高度设置:
{{- $date := .Get "date" -}}
{{- $title := .Get "title" -}}
{{- $description := .Get "description" -}}
{{- $tags := .Get "tags" -}}
{{- $url := .Get "url" -}}
<div class="timeline__row">
<div class="timeline__time">
<div class="timeline__time">{{ $date }}</div>
<div class="timeline__split-line"></div>
</div>
<div class="timeline__content">
<div class="timeline__tags">
{{- with split $tags ", " -}} {{- range . }}{{- if eq . "样式" }}
<span class="timeline__tag timeline__tag-style">{{ . }}</span> {{- else if eq . "文章" }}
<span class="timeline__tag timeline__tag-article">{{ . }}</span> {{- else if eq . "页面" }}
<span class="timeline__tag timeline__tag-page">{{ . }}</span> {{- else }}
<span class="timeline__tag">{{ . }}</span> {{- end }} {{- end }} {{- end }}
</div>
<div class="timeline__title">{{ $title }}</div>
<!-- title 可点击,默认就是跳转时间轴所在页 -->
<div class="timeline__description">
{{- if $url }}
{{ $description }} <a href="{{ $url | relURL }}">➤</a>
{{- else }}
{{ $description }}
{{- end }}
</div>
</div>
</div>
<style>
.timeline {
display: flex;
flex-direction: column;
}
.timeline__row {
display: flex;
padding-left: 4%;
height: 90px;
}
.timeline__time {
flex: 0 0 110px;
color: #5d5d5d;
font-size: 16px;
text-transform: uppercase;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 0.5rem 0;
}
.timeline__time-text {
margin: 0;
}
.timeline__split-line {
position: absolute;
top: 0.5rem;
right: -20px;
height: 100%;
width: 2px;
background-color: #5F9EA040;
z-index: 0;
}
.timeline__split-line:before {
content: "";
position: absolute;
top: 24%;
right: -4px;
transform: translateY(-50%);
width: 10px;
height: 10px;
background-color: #acd5d5;
box-shadow: 0 0 0 4px var(--theme);
border-radius: 50%;
border: 0px solid var(--body-background);
z-index: -1;
}
.timeline__content {
flex: 1;
margin-left: 4rem;
padding: 0.5rem 0 1.2rem 0;
height: 80%;
}
.timeline__title {
margin: 0;
margin-bottom: 2px;
padding-top: 3px;
margin-left: 0.5rem;
color: var(--content);
font-family: var(--font-family-teshu);
font-size: 19px;
font-weight: 600;
width: fit-content;
display: inline-block;
vertical-align: middle;
/* 垂直居中对齐 */
color: #5d5d5d; /* 悬停时保持文字颜色不变 */
background-color: transparent; /* 去掉背景色 */
}
.timeline__title a:hover,
.timeline__title a:focus,
.timeline__title a:active {
background-color: transparent !important;
}
.timeline__description {
font-size: 15px;
line-height: 1.6;
color: #5d5d5d;
overflow: hidden;
text-overflow: ellipsis;
margin: 0.5rem 0 0.4rem 1.5rem;
/* 添加 1.5rem 的左侧内边距 */
}
/* 为类名为 "timeline__tag-style" 的标签定义颜色 */
.timeline__tags {
display: inline-block;
padding: 0;
margin-left: 0.3rem;
align-items: center;
gap: 0.3rem;
}
.timeline__tag {
display: inline-block;
color: #ffffff;
background-color: #a63c06;
border: 1.5px solid #a63c06;
border-radius: 999px;
padding: 0rem 0.5rem;
font-size: 12px;
white-space: nowrap;
line-height: 1.4rem;
opacity: 0.8;
vertical-align: middle;
/* 垂直居中对齐 */
}
.timeline__tag-style {
background-color: #a17375;
/* 替换为你希望的颜色 */
border-color: #a17375;
/* 与背景色相同或不同,根据需要自定义 */
color: #ffffff;
/* 根据需要选择文本颜色 */
}
/* 为类名为 "timeline__tag-article" 的标签定义颜色 */
.timeline__tag-article {
background-color: #00798c;
/* 替换为你希望的颜色 */
border-color: #00798c;
/* 与背景色相同或不同,根据需要自定义 */
color: #ffffff;
/* 根据需要选择文本颜色 */
}
/* 为类名为 "timeline__tag-page" 的标签定义颜色 */
.timeline__tag-page {
background-color: #3d405b;
/* 替换为你希望的颜色 */
border-color: #3d405b;
/* 与背景色相同或不同,根据需要自定义 */
color: #ffffff;
/* 根据需要选择文本颜色 */
}
@media screen and (max-width: 768px) {
.timeline__time {
font-size: 14px;
/* 在小屏幕上使用较小的字体大小 */
}
.timeline__title {
font-size: 16px;
/* 在小屏幕上使用较小的字体大小 */
}
.timeline__description {
font-size: 14px;
/* 在小屏幕上使用较小的字体大小 */
}
.timeline__row {
height: auto;
}
}
</style>
效果展示
友链 #
{< friend name="夜航南飞" url="https://banshou-air.netlify.app/" avatar="https://banshou-air.netlify.app/img/logo.png" bio="The world is beautiful. Let me come through it to you." >}
{< friend-css >}
效果展示

The world is beautiful. Let me come through it to you.
图片相关 #
首先是 Hugo 自带的 figure 短代码,事实上 Congo 修改了 Hugo 内置的 figure 短代码,但我感觉区别不大)。
表情包 #
参考作业:Hugo 表情包 Shortcode
{< meme name="nice2" ext="gif" width="150" >}
实际使用偶尔会有一些微妙的 bug,需要随机应变地修改。
效果展示

图片文字并列布局 #
写博文时直接在.md
文件内添加 HTML 代码:
<div class="flex-container">
<div class="flex-text">
<p class="flex-start">第一行</p>
<p>第二行</p>
<p class="flex-end">最后一行</p>
</div>
<img src="http://image.url/" class="flex-image" />
</div>
在assets/css/custom.css
内添加:
.flex-container {
display: flex;
align-items: flex-start;
margin: 15px 0;
}
.flex-image {
max-width: 300px; /* 根据需要调整图片宽度 */
margin-left: 20px; /* 图文间距 */
margin-top: 0;
margin-bottom: 0;
}
.flex-text {
flex: 1;
}
.flex-text p {
margin-bottom: 1.25em;
}
/* 以下代码是我自行添加的,为确保第一行前面和最后一行后面不会多出奇怪的空白 */
.flex-start {
margin-top: 0 !important;
}
.flex-end {
margin-bottom: 0 !important;
}
/* 响应式设计 */
@media (max-width: 600px) {
.flex-container {
flex-direction: column; /* 垂直排列 */
}
.flex-image {
margin-left: 0; /* 取消左边距 */
margin-top: 20px; /* 增加上边距,分隔内容 */
max-width: 100%; /* 使图片宽度自适应容器 */
}
}
效果展示
图片在左的布局可以通过一些小改动轻松地达成,即将插入图片的代码img src="http://image.url/" class="flex-image"
放到插入文字的代码div class="flex-text"
上方(注意要加尖括号,这里没加是因为这段话在HTML代码内,加上尖括号就也会被识别,就无法显示代码了),再对 CSS 进行一些小改动,如把.flex-image {margin-left: 20px;}
里的margin-left
改成margin-right
。
如果图片在右和图片在左的布局都要使用,那么在 HTML 代码部分为两种布局分别设置class="flex-image-left"
和class="flex-image-right"
,再在 CSS 代码里为两个 class 分别设置样式即可。
多图并列布局 #
利用 figure 短代码,写博文时直接在.md
文件内添加 HTML 代码:
<div class="image-row">
{<figure src="http://image1.url/" title="image1" caption="image1">}
{<figure src="http://image2.url/" title="image2" caption="image2">}
{<figure src="http://image3.url/" title="image3" caption="image3">}
</div>
在assets/css/custom.css
内添加:
.image-row {
display: flex;
flex-wrap: wrap;
justify-content: space-around; /* 可调整为 space-between, space-evenly, center 等 */
margin: 20px 0;
}
.image-row figure {
flex: 1 1 calc(33.333% - 20px); /* 三张图片 */
margin: 1px;
text-align: center;
}
.image-row img {
width: 100%;
height: auto;
}
.image-row figcaption {
margin-top: 8px;
font-size: 0.9em;
color: #666;
}
/* 响应式设计:根据屏幕尺寸调整图片宽度 */
@media (max-width: 1024px) {
.image-row figure {
flex: 1 1 calc(50% - 20px); /* 两张图片 */
}
}
@media (max-width: 768px) {
.image-row figure {
flex: 1 1 calc(100% - 20px); /* 一张图片 */
}
}
效果展示
音乐 & 视频播放 #
国内音乐平台:作业 1,作业 2
两份作业其实应该是同一份。第二份是 OG,有关于参数的更加详细的说明。
国外平台:Spotify,Apple Music,YouTube 播放列表(注意不是单个视频)