跳到主要内容
  1. Posts/

自用短代码 & 零碎代码集合

整理一下方便我自己抄作业。

·· 4439 字·10 分钟

其实之前在别的博文里都写过了,但觉得还是集合到一篇里比较好抄作业。

注意事项:

  • 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 >}

效果展示

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>示例HTML5文档</title>
</head>
<body>
  <p>测试</p>
</body>
</html>

其他:缩写、下标、上标、键盘、标记 #

<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 >}
&nbsp; // 这个只是为了空行,实际使用时无需添加
{< 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>

效果展示

不进行任何字母转换:

HellO WorlD
全字母大写:
Hello World
全字母小写:
Hello World
不添加任何参数:
Hello World

Neodb 卡片 #

参考作业:Hi, NeoDB,并抄了薯饼的修改

{< neodb "https://book.douban.com/subject/24882304/" >}

效果展示

8.8
牧童雀鹰天生拥有法力,他渴求更强大的力量和更深奥的知识,于是选择离开故乡,前往传奇的巫师学院学习,以求出人头地。为了证明实力,他当众施展禁忌法术,召唤亡灵,却铸成大错。他召唤出的恶灵追捕着他,太古的邪恶诱惑着他。为了弥补过错,他步上了一段从未有人完成的追寻之旅,直到海洋的尽头、世界终结之处……
book

长毛象嘟文 #

参考作业 again:Hugo | 在 Stack 主题上可行的短代码们

{< mastodon server="示例名称" user="用户名" status="嘟文 ID" >}

比如,链接为https://bgme.me/@bizarre71/113300529271001752的一条嘟文,server处填bgme.meuser处填bizarre71status处填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>

效果展示

2024-10-30
页面
Timeline
博客时间轴上线

友链 #

参考作业:第一份友链短代码,第二份友链格式短代码

{< 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 >}

效果展示

图片相关 #

首先是 Hugo 自带的 figure 短代码,事实上 Congo 修改了 Hugo 内置的 figure 短代码,但我感觉区别不大)。

表情包 #

参考作业:Hugo 表情包 Shortcode

{< meme name="nice2" ext="gif" width="150" >}

实际使用偶尔会有一些微妙的 bug,需要随机应变地修改。

效果展示

nice2

图片文字并列布局 #

写博文时直接在.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,有关于参数的更加详细的说明。

国外平台:SpotifyApple MusicYouTube 播放列表(注意不是单个视频)


  1. 词作青释,歌曲链接。 ↩︎