自用短代码 & 零碎代码集合
整理一下方便我自己抄作业。
目录
其实之前在别的博文里都写过了，但觉得还是集合到一篇里比较好抄作业。
注意事项：
- 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 语法直接空两格换行，我还是喜欢空行的。
Neodb 卡片 #
参考作业：Hi, NeoDB
{< neodb "https://book.douban.com/subject/24882304/" >}
效果展示
鉴于有墙在，我的 Neodb 卡片不仅刷不出来还会报错导致无法本地预览，暂且先这样。
{< neodb “https://book.douban.com/subject/24882304/" >}
友链 #
{< 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); /* 一张图片 */
}
}
效果展示
