前言
众所周知,我在随机任务:指导者的牢里寂寞地缝着天阳马,于是便开始思索如何在博客周记里美观地分享导随记录,最后锁定了简单神奇的hugo短代码功能,在ChatGPT的协助下,花了两三个摸鱼时间研究,大致做出了自己想要的效果。
非常感谢鹤辞博客里记录的Hugo短代码存档,易读好用的完美抄作业模板,我的小玩具引入百科全书!这个日随卡片就是基于里面的仿github样式修改而成的。卡片的样式则参考了导随统计器。
一言以蔽之,这个日随卡片的优点:美丽。缺点:废物。因为我根本,完全不会写导入ff14副本模板的数据库,所以一切数据都需要机械地手动输入,如果要记录您所有的副本,还是建议使用导随统计器或者excel表格。
使用方法
引入
-
下载这里的icon文件,解压后整个文件夹放在
/static
目录下。 -
在
/layouts/shortcodes
内新建一个ff14.html
复制以下内容:
<div class="ff14 {{ .Get "class" }}">
<div class="logo-container">
<div class="logo">
<img src="{{ .Get "logo" }}" alt="Logo">
</div>
</div>
<div class="info">
{{ if .Get "level" }}
<span class="level-name">
<span class="level">LV.{{ .Get "level" }}</span>
<span class="name">{{ .Get "name" }}</span>
</span>
{{ else }}
<span class="name">{{ .Get "name" }}</span>
{{ end }}
<div class="description"> {{ .Get "description" }}</div>
<div class="tag">
<span class="tag-color"></span>
<span class="tag-name">{{ .Get "tag" }}</span>
</div>
</div>
<div class="time">{{ .Get "time" }}</div>
</div>
- 在自定义css里丢入
css
代码。
注意:文字颜色设置的具体变量会因主题不同而改变。
.ff14 {
border: 1px solid var(--color-text-primary);
border-radius: 20px;
margin: 0 auto;
margin-bottom: 1em;
padding: 0.5em;
display: flex;
align-items: center; /* 垂直居中 */
position: relative;
&.t {
background-color: rgba(0, 47, 167, 0.3);
.tag-color {
background-color: #5e86c1;
}
}
&.n {
background-color: rgba(34, 139, 34, 0.3);
.tag-color {
background-color: #8fbc8f;
}
}
&.d {
background-color: rgba(128, 0, 0, 0.3);
.tag-color {
background-color: #cd5c5c;
}
}
&.s{
background-color: rgba(189, 183, 107, 0.3);
.tag-color {
background-color: #e6c35c;
}
}
.logo-container {
width: 5.5rem; /* 设置图片容器的宽度 */
float: left; /* 左浮动,使文字不会覆盖图片 */
margin-right: 1.5em; /* 可选的右边距 */
}
.logo {
width: 5.5rem;
height: 5.5rem;
display: flex;
align-items: center; /* 垂直居中 */
justify-content: flex-start; /* 左对齐 */
margin-right:10px;
}
.info {
display: flex;
flex-direction: column;
position: relative;
}
.level {
color: var(-color-text-primary); /* 数字模块的文本颜色 */
font-weight: bold;
font-size: 28px;
margin-right: 10px;
}
.name {
font-weight: bold;
font-size: 28px;
color: var(-color-text-primary);
}
.description {
margin-top: 0.5em;
margin-bottom: 0.5em;
color: var(-color-text-primary);
text-align: justify;
font-size: 95%;
margin-right: 0.5em;
}
.tag-color {
position: relative;
top: 1px;
display: inline-block;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
}
.tag-name {
color: var(-color-text-primary);
font-size: 90%;
margin-left: 0.5em;
}
.time {
position: absolute;
bottom: 0.5em;
right: 0.5em;
padding: 5px;
color: var(-color-text-primary);
font-size: 16px;
text-align: right; /* 将文本右对齐 */
}
}
@media screen and (max-width: 768px) {
.ff14 {
padding: 0.4em;
.logo-container {
width: 5rem; /* 设置图片容器的宽度 */
float: left; /* 左浮动,使文字不会覆盖图片 */
margin-right: 0.5em; /* 可选的右边距 */
}
.logo {
width: 5rem;
height: 5rem;
display: flex;
align-items: center; /* 垂直居中 */
justify-content: flex-start; /* 左对齐 */
margin-right:5px;
}
.level {
font-size: 22px;
margin-right: 5px;
}
.name {
font-size: 22px;
}
.description {
font-size: 75%;
}
.tag-name {
font-size: 70%;
margin-left: 0.3em;
}
.time {
display: none;
}
}
}
短代码
实际使用时要在外面再加一层大括号。
{< ff14
class=""
logo=""
level=""
name=""
description=""
tag=""
time="">}
class:可选t
、n
、d
、s
(生产采集),改变卡片的背景颜色。
logo:你的职业图标文件路径,例如/icon/paladin.png
。
level(可选):副本等级。
name:副本名。
description:感想。
tag:副本类型,也可以填你喜欢的标注。
time(可选):时间,会显示在右下角。
![Logo](/pic/paladin.png)
LV.10
讨伐彷徨死灵
啵啵!
2.0 行会令
2023-09-14
全职业示例
防护职业
![Logo](/pic/gladiator.png)
LV.24
监狱废墟托托拉克千狱
老二add忘记拉仇恨差点打死奶妈(目移)
2.0 迷宫挑战
![Logo](/pic/paladin.png)
LV.50
最终决战天幕魔导城
白魔妹光同事,机工抢开熟练得像疯掉的剑导,但是魔导城抢开无罪,召唤初见,左边校服,右边一堆一级首饰,id“给我顶住”,嗯嗯,很有戏剧性,打尼禄时带着分摊跑了,是真豆芽。
2.0 主线任务
![Logo](/pic/marauder.png)
LV.20
魔兽领域日影地修炼所
永远年轻,永远在日影地修炼所迷路。
2.0 迷宫挑战
![Logo](/pic/warrior.png)
LV.60
坚牢铁壁巴埃萨长城
妈妈!!别奶了!!我要吸血!!!
3.0 迷宫挑战
![Logo](/pic/darkknight.png)
LV.70
鏖战红莲阿拉米格
开了活死人结果被妈妈狂奶没触发,这下变成死死人了。
4.0 迷宫挑战
2023-09-13
![Logo](/pic/gunbreaker.png)
末日暗影■■■■■
这个本枪刃能单挑老一吗感觉应该可以(?
5.0 迷宫挑战
2023-09-13 10:46
治疗职业
![Logo](/pic/conjurer.png)
LV.16
地下灵殿塔姆·塔拉墓园
能不能让元灵奶t。
2.0 迷宫挑战
![Logo](/pic/whitemage.png)
LV.80
光之战士歼灭战
一场拉了六个人,没事都能奶。
5.0 讨伐歼灭
![Logo](/pic/scholar.png)
LV.70
保镖歼灭战
怎么死这么多我含泪吃掉了自己的妻子。
4.0 讨伐歼灭
![Logo](/pic/astrologian.png)
LV.80
伊甸希望乐园 共鸣之章2
我最喜欢的脑死亡环节。
5.0 大型任务
2022-08-15
![Logo](/pic/sage.png)
水妖幻园多恩美格禁园
我和剑导dk配合的无敌完美,甚至无敌全放生给dps一点行尸走肉震撼,独木桥甚至是第一个走过去的,完美!!贤者手感瞬间回归!
5.0 迷宫挑战
2022-08-15 10:51:22
近战职业
![Logo](/pic/pugilist.png)
LV.10
讨伐彷徨死灵!
没玩过。
2.0 行会令
![Logo](/pic/monk.png)
LV.10
讨伐彷徨死灵!
也没玩过。
2.0 行会令
![Logo](/pic/lancer.png)
LV.10
讨伐彷徨死灵!
这个也没玩过。
2.0 行会令
![Logo](/pic/dragoon.png)
LV.10
讨伐彷徨死灵!
这个还没玩过。
2.0 行会令
![Logo](/pic/rogue.png)
LV.10
讨伐彷徨死灵!
对不起都没玩过。
2.0 行会令
![Logo](/pic/ninja.png)
LV.10
讨伐彷徨死灵!
啊啊啊好想玩。
2.0 行会令
![Logo](/pic/samurai.png)
水晶塔 古代人迷宫
雪月花中断了TVT。
2.0 团队任务
![Logo](/pic/reaper.png)
LV.80
复制工厂废墟
只要大家都死了我的输出就是第一了!
5.0 团队任务
2023-09-13
远程物理职业
![Logo](/pic/archer.png)
LV.15
天然要害沙斯塔夏溶洞
一个aoe下去ot了我死了。
2.0 迷宫挑战
![Logo](/pic/bard.png)
LV.80
魔术工房玛托雅工作室
手一抖同时按了两首歌。
5.0 迷宫挑战
![Logo](/pic/machinist.png)
LV.50
神兵要塞帝国南方堡
过热!!过热!!过热!!
2.0 主线任务
![Logo](/pic/dancer.png)
亚历山大机神城 律动之章2
全场只有我的舞伴死了。
3.0 大型任务
2022-08-15 22:22:22
远程魔法职业
![Logo](/pic/thaumaturge.png)
LV.10
讨伐彷徨死灵!
吃了直升包。
2.0 行会令
![Logo](/pic/blackmage.png)
LV.79
伪造天界格鲁格火山
妈妈我为什么只能打第四啊啊黑魔好难呜呜呜自闭了。
5.0 迷宫挑战
![Logo](/pic/arcanist.png)
LV.28
名门府邸静语庄园
t怎么快死了我医术一下吧.jpg
2.0 迷宫挑战
![Logo](/pic/summoner.png)
LV.83
■■■■歼灭战
巴哈姆特对齐boss上天。
5.0 讨伐歼灭
![Logo](/pic/redmage.png)
欧米茄时空狭缝 阿尔法幻境4
奶妈忽然都被击退下去了,该赤天开门了。
4.0 大型任务
生产采集职业
![Logo](/pic/alchemist.png)
复活吧!死去的爱人!
“笨蛋……我就是喜欢你这一点……”
职业任务
2022-08-15
![Logo](/pic/fisher.png)
挥杆降龙绝境战
没钓过我随便写的。
鱼王
2022-08-15
Freetalk
做完啦!虽然感觉没人会用但是使用随意!如果有朋友用了并且成功了,请务必和我说一声我超级想看。如果有神仙老师魔改了,也希望能告诉我,因为我也想用!!!!(草