✦ 粉刷匠 ✦ 短代码备忘录

1826字
阿拉霍洞开
备忘一下博客中在用的短代码

遇到的主要困难：看到一些教程写样式放在 _custom.css 里，但我不知道该放在哪个路径，各个主题差别挺大的……（拍大腿）既然都是应用在文章里的效果，放在 article.css 中不就好了！试了试全部正常显示，满意继续。

小撇步：使用 Espanso 快速插入短代码

GPT：Espanso 是一个开源的文本扩展工具，类似于 TextExpander 或 aText。它可以帮助用户通过简短的触发短语快速输入预定义的文本片段或代码段，从而提高输入效率。Espanso 支持多种操作系统，包括 Windows、macOS 和 Linux。更详细复杂的功能说明可以前往 官方文档 查看。

虽然用输入法的自定义短语功能也可以快速输入短代码，但输入码都是字母嘛有时候打字误触发了也很麻烦，于是搜索下载了一个文本扩展工具 Espanso ，优点有：

  • 输入码前添加符号（如 : / > # 等），有效避免误触发
  • 可以设置插入文本后的光标位置
  • 最基础的替换只需要在 yaml 文件中写入 trigger 和 replace 的值
  • 用 lable 添加说明后，可在软件内搜索指令
  • 不用的时候可以点图标 disable，与日常输入完全分隔

这里放上我的 yaml文件链接 ，包含下文中提到的全部短代码，需要的话请自行取用～

先抄一波作业

主要来自眠于水月间的这篇大合集：Hugo | 在 Stack 主题上可行的短代码们 ，感谢天使网友们让我能（几乎）一站式搞定短代码（鞠躬）

合集中搬来的有：

  • 文本折叠
  • 文本高亮
  • 文本模糊
  • 文本黑幕
  • 文字抖动（9/4 添加）
  • 居中引用
  • 键盘样式
  • 卡片样式
  • 图片轮播
  • Spotify
  • NeoDB

多说一嘴 NeoDB

从合集中复制了代码后，结合椒盐豆豉分享的 代码 ，改成了显示个人评分 + 简介。

在爱海的 装修日志 中看到可以更改评分图标！于是也去 Tabler Icons 上搜了想用的图案，选择想要的颜色，点击复制，根据 GPT 的教学，前往 Base64 Encode 进行编码，复制下方生成的编码，css 拉到最下面，粘贴到 background-image: url(data:image/svg+xml;base64,) 的逗号后面。

以及，GPT 说实心图片可以修改 fill 的值为想要的颜色色号（例： fill="#ec4899" ）后再点击 encode，但我这样操作了之后并没有获得上了色的图案，不知道哪里出了问题。

不过用了这个短代码之后本地预览是个难事，可恶的墙，我推送之后苦苦改样式。

我解决本地预览的笨办法是：对 neodb.html 全选剪切保存，然后再把代码粘贴回去 （command+A，+X，+S，+V 一套按下来很顺的！），但不保存不关闭，放置它，正常编辑预览其他文件，全部完成后回来保存 neodb.html，然后正常地 commit 和 push。

别的

点亮星星的 rating

来自：短代码测试 | 咖喱

使用：{< rating 10 7 >} // 总数 点亮数，使用时补全括号

效果：

Fancybox 灯箱：单图与多图

来自：■■Loading：《hugo 装修日志 05》■■ - 天堂错误文件 。

单图使用：<img class="img" data-fancybox src="[单张地址]" width="80%" height="100%[比例或者尺寸]" alt="图片说明" />

效果：

图片说明

看了下 官网 ，想要多张图片在同一个画廊要粘好多链接，图片比例一致展示效果才比较好，一行能显示的数量也与图片宽度有关。

多图使用：

<div class="fancybox">

<a data-fancybox="gallery" data-src="url1"> 
<img src="url1" width="200" alt="图片说明" /></a>

<a data-fancybox="gallery" data-src="url2"> 
<img src="url2" width="200" alt="图片说明" /></a>

<a data-fancybox="gallery" data-src="url3"> 
<img src="url3" width="200" alt="图片说明" /></a>

</div>

每张图的格式都是一样的，前后加上 <div> 容器好规范样式（不知道有没有更简便的方法）

效果：

晚

上

好

CSS 样式：

// fancybox多图画廊
.fancybox {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding:0 5px;
}

.fancybox a {
  max-width: calc(100% - 10px); /* 确保图片宽度不超过其容器 */
  box-sizing: border-box;
}

自制：仿 iMessage 对话效果

再次：代码和备注均来自于 ChatGPT，我只是调整样式的粉刷匠

新建 chat. html，代码如下，css 样式也在其中。可以删掉图片的部分，我觉得只有标题没有头像有些单调，排版不好看。

<div class="chat-container">
<div class="chat-head">  <!-- head包括title和image -->
<div class="chat-image">
<img src="{{ .Get "image" }}" alt="Profile Image" class="profile-image">
</div>
<div class="chat-title">
{{ .Get "title" }}
</div>
</div>
<div class="chat-timestamp">{{ .Get "time" }}</div>
{{ .Inner }}
</div>

<style>
.chat-container {
margin:10px 20px;
position: relative;
padding: 20px;
border-radius: 5px;
background-color: #eaeff7d9;
}

.chat-head {
display: flex;
flex-direction: column; /* 将 chat-image 和 chat-title 垂直排列 */
align-items: center; /* 垂直居中 */
margin-bottom: 5px;
}

.profile-image {
width: 40px; /* 根据需要调整图片大小 */
height: 40px;
border-radius: 50%; /* 将图片变成圆形 */
}

.chat-title {
display: flex;
align-items: center;
font-weight:bold;
font-size: 0.9em;
}

.chat-timestamp {
text-align: center;
font-size: 0.8em;
color: #888;
margin-bottom: 10px;
}

.chat-bubble {
padding: 5px 10px;
margin: 10px;
border-radius: 9px;
display: inline-block;
max-width: 75%;
font-size: 0.9em;
}

.chat-bubble-left {
text-align: left;
clear: both;
box-shadow: 0 0 2px #9da2d3;
}

.chat-bubble-right {
background-color: #5a68df;
color: white;
text-align: left;
float: right;
clear: both;
}

</style>

另外新建 chatbubble.html，代码如下：

<div class="chat-bubble {{ if eq (.Get "side") "left" }}chat-bubble-left{{ else }}chat-bubble-right{{ end }}">

{{ .Inner }}

</div>

<div style="clear: both;"></div>

使用：

//使用时补全双括号
//增加对话时，按需复制左边or右边气泡的部分即可

{< chat title="名字" time="01/01 22:22" image="头像地址">} 

{< chatbubble side="left" >} 
[左边气泡]
{< /chatbubble >} 

{< chatbubble side="right" >} 
[右边气泡]
{< /chatbubble >} 

{< /chat >}

效果：

Profile Image
我是一个标题
01/01 22:22
左边讲话
右边讲话

对话短的话感觉去掉标题和头像比较好看呢……

ㆆᵕㆆ…