【Notes】短代码测试帖

在 ~/blog/assets/scss/custom/_custom.scss 文件(没有自建)中添加想要的短代码scss文件,在layouts/shortcodes文件夹中创建对应的html文件。

文本效果语法

文本折叠

折叠↓ 实际使用时别忘了换成双括号!

文本黑幕

数据删除!数据删除!

文本位置

文字居左

文字居中

文字居右

文字渐变效果

我挑的配色很好看吧!
好喜欢蓝色(再次)(再次)
但总之换行的话就加个空标签。

键盘标签样式

Ctrl+Alt+Del

标签块样式

Warning:需要双括号。

info:这是一条信息。

note:可以标注一下,但是没必要。

tip:在示例里胡说八道会使观看者会心一笑。

简易标签块

我们间歇性地拥有灵魂。

摘录引用

There is no possibility that any perceptible change will happen within our own lifetime. We are the dead. Our only true life is in the future. We shall take part in it ashandfuls of dust and splinters of bone. But how far away that future may be, there is no knowing.

George Orwell 《1984》

诗歌居中引用

我们间歇性地拥有灵魂,
没有人能永远且
不停地拥有它。
辛波斯卡 | 《小谈灵魂》

在博客内引用其他博文

2024 7-9月小结

插入图片

图1

调整大小:

Alt Text

轮播图

调整轮播图大小:

时间轴test

2024-01-01
技能
建站
test
2023-12-25
同人
写文
test

插入网易云音乐

{< netease XXXXXXXXX 0 >} //歌曲的id;是否自动播放(1为自动播放,0为手动播放)

插入B站视频

参考Hugo | 记录MemE主题美化过程

{< bilibili XXXXXXXXXXX 0 >} //BV号,分p数,0/1为是否自动播放;使用记得双括号

如果有集数(默认第一集),例如要播放第5集,则这样使用:{a{< bilibili BV1xW4y1a7NK 5 >}} 使用记得双括号

插入youtube视频

网页前端加密功能

参考天堂错误文件-Loading:《hugo 装修日志 03》操作后,在文章头部添加

password: "xxxx"

password_hint: "xxxxx"

即可对显示的网页加密。

友链样式

添加点赞按钮

参考了■■Loading:《hugo 装修日志 10》■■Hugo Stack 主题装修笔记 Part 3

在layouts/custom里建立kudos.html

在assets/scss/custom/_custom.scss里修改CSS样式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* Kudos reaction style */
open-heart {
  margin: var(--card-padding);
  margin-top: 30px;
  display: block;  /* Center alignment */
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  border: 1px solid #f6e8ed;
  border-radius: .4em;
  padding: .4em;
}

open-heart:not([disabled]):hover,
open-heart:not([disabled]):focus {
  border-color: var(--accent-color);
  cursor: pointer;
}

open-heart[disabled] {
  background: #f6e8ed;
  border: 1px solid #f6e8ed;
  cursor: not-allowed;
  color: #fff;
}

open-heart[count]:not([count="0"])::after {
  content: attr(count);
  padding: .2em;
}

在layouts/partials/pages/post.html里的{{ partial "components/minimal-footer-about.html" . }}和{{ partial "components/post-nav.html" . }}之间添加:

1
2
3
        {{ if and (ne .Params.showkudos false) }}
        {{ partial "custom/kudos.html" . }}
        {{ end }}

然后在about里的_index.md开头写上showkudos = false就可隐藏about页的点赞按钮。

❤️