前言

众所周知，我在随机任务：指导者的牢里寂寞地缝着天阳马，于是便开始思索如何在博客周记里美观地分享导随记录，最后锁定了简单神奇的 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">&nbsp;&nbsp;{{ .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>
Copy
Copy

• 在自定义 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;
        }
     }
}
Copy
Copy

短代码

实际使用时要在外面再加一层大括号。

{< ff14 
class="" 
logo="" 
level="" 
name="" 
description="" 
tag="" 
time="">}
Copy
Copy

LV.10 讨伐彷徨死灵

  啵啵！

2.0 行会令

2023-09-14

全职业示例

防护职业

LV.24 监狱废墟托托拉克千狱

  老二 add 忘记拉仇恨差点打死奶妈（目移）

2.0 迷宫挑战

LV.50 最终决战天幕魔导城

  白魔妹光同事，机工抢开熟练得像疯掉的剑导，但是魔导城抢开无罪，召唤初见，左边校服，右边一堆一级首饰，id“给我顶住”，嗯嗯，很有戏剧性，打尼禄时带着分摊跑了，是真豆芽。

2.0 主线任务

LV.20 魔兽领域日影地修炼所

  永远年轻，永远在日影地修炼所迷路。

2.0 迷宫挑战

LV.60 坚牢铁壁巴埃萨长城

  妈妈！！别奶了！！我要吸血！！！

3.0 迷宫挑战

LV.70 鏖战红莲阿拉米格

  开了活死人结果被妈妈狂奶没触发，这下变成死死人了。

4.0 迷宫挑战

2023-09-13

末日暗影■■■■■

  这个本枪刃能单挑老一吗感觉应该可以（？

5.0 迷宫挑战

2023-09-13 10:46

治疗职业

LV.16 地下灵殿塔姆 · 塔拉墓园

  能不能让元灵奶 t。

2.0 迷宫挑战

LV.80 光之战士歼灭战

  一场拉了六个人，没事都能奶。

5.0 讨伐歼灭

LV.70 保镖歼灭战

  怎么死这么多我含泪吃掉了自己的妻子。

4.0 讨伐歼灭

LV.80 伊甸希望乐园 共鸣之章 2

  我最喜欢的脑死亡环节。

5.0 大型任务

2022-08-15

水妖幻园多恩美格禁园

  我和剑导 dk 配合的无敌完美，甚至无敌全放生给 dps 一点行尸走肉震撼，独木桥甚至是第一个走过去的，完美！！贤者手感瞬间回归！

5.0 迷宫挑战

2022-08-15 10:51:22

近战职业

LV.10 讨伐彷徨死灵！

  没玩过。

2.0 行会令

LV.10 讨伐彷徨死灵！

  也没玩过。

2.0 行会令

LV.10 讨伐彷徨死灵！

  这个也没玩过。

2.0 行会令

LV.10 讨伐彷徨死灵！

  这个还没玩过。

2.0 行会令

LV.10 讨伐彷徨死灵！

  对不起都没玩过。

2.0 行会令

LV.10 讨伐彷徨死灵！

  啊啊啊好想玩。

2.0 行会令

水晶塔 古代人迷宫

  雪月花中断了 TVT。

2.0 团队任务

LV.80 复制工厂废墟

  只要大家都死了我的输出就是第一了！

5.0 团队任务

2023-09-13

远程物理职业

LV.15 天然要害沙斯塔夏溶洞

  一个 aoe 下去 ot 了我死了。

2.0 迷宫挑战

LV.80 魔术工房玛托雅工作室

  手一抖同时按了两首歌。

5.0 迷宫挑战

LV.50 神兵要塞帝国南方堡

  过热！！过热！！过热！！

2.0 主线任务

亚历山大机神城 律动之章 2

  全场只有我的舞伴死了。

3.0 大型任务

2022-08-15 22:22:22

远程魔法职业

LV.10 讨伐彷徨死灵！

  吃了直升包。

2.0 行会令

LV.79 伪造天界格鲁格火山

  妈妈我为什么只能打第四啊啊黑魔好难呜呜呜自闭了。

5.0 迷宫挑战

LV.28 名门府邸静语庄园

  t 怎么快死了我医术一下吧. jpg

2.0 迷宫挑战

LV.83 ■■■■歼灭战

  巴哈姆特对齐 boss 上天。

5.0 讨伐歼灭

欧米茄时空狭缝 阿尔法幻境 4

  奶妈忽然都被击退下去了，该赤天开门了。

4.0 大型任务

生产采集职业

复活吧！死去的爱人！

  “笨蛋…… 我就是喜欢你这一点……”

职业任务

2022-08-15

挥杆降龙绝境战

  没钓过我随便写的。

鱼王

2022-08-15

Freetalk

做完啦！虽然感觉没人会用但是使用随意！如果有朋友用了并且成功了，请务必和我说一声我超级想看。如果有神仙老师魔改了，也希望能告诉我，因为我也想用！！！！（草