aplayer
突然很想在博客里放点喜欢的ost，遂选择了之前在友友博客里看到的aplayer，相关介绍和使用方法可以看aplayer的github项目仓库与相关的MetingJS，安装方式非常简单，只需要在layouts\partials\head.html里引入。
<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
我在这里复制了aplayer的css，用格式转换网站转换格式后，复制到了static/css下进行了样式魔改，主要修改了颜色和动画效果，魔改好后，将之前引入的代码第一行的href后面改成你的css文件路径就可以生效了。我在博客中引用的基本是网易云音乐，代码如下。参数可以参考aplayer官方文档，和MetingJS傻瓜教程。
<meting-js
server="netease"
theme="#8aa2d3"
type="song"
id="4932570">
</meting-js>
为了显示歌词又放了一首。
全局歌单
通过开启aplayer的fixed参数，可以实现左下角全局音乐播放器，因为我想要设置自定义封面，所以先在网易云上下载好曲目，和需要的封面图片一起放在static/aplayer路径下。
之后在layouts\partials下新建music.html。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="music">
<div id="player">
</div>
</div>
<script>
var ap = new APlayer
({
element: document.getElementById('player'),
fixed: true,
autoplay: false,
fixed: true,
theme: '#8aa2d3',
loop: 'all',
order: 'list',
preload: 'auto',
volume: 0.7,
mutex: true,
listFolded: true,
listMaxHeight: 50,
lrcType: 0,
music:[
{
name:'moment',
url:'/aplayer/moment.mp3',
artist:'dream',
cover:'/aplayer/moment.png'},
{
name:'数式に囚われた者',
url:'/aplayer/数式に囚われた者.mp3',
artist:'dream',
cover:'/aplayer/moment.png'},
{
name:'冥き水底 ～テンペスト：深部',
url:'/aplayer/冥き水底 ～テンペスト：深部.mp3',
artist:'dream',
cover:'/aplayer/moment.png'},
{
name:'转瞬即逝',
url:'/aplayer/转瞬即逝.mp3',
artist:'dream',
cover:'/aplayer/moment.png'},
{
name:'侦探事务所',
url:'/aplayer/侦探事务所.mp3',
artist:'dream',
cover:'/aplayer/moment.png'},
{
name:'Musa',
url:'/aplayer/Musa.mp3',
artist:'dream',
cover:'/aplayer/moment.png'},
]
});
//ap.init();
</script>
</body>
然后在head.html文件里渲染。
{{ partial "music" . }}
然后你就可以在博客左下角看到一只可爱的小熊玩偶带来的音乐啦！歌单不定期更新——
Fancybox灯箱
参考了freeya老师的装修记录，因为fuji主题自带的图片放大jsmediazoom与实现图片轮播的swiper插件不兼容，几番折腾都无法调和，遂将目光放到了简单可行的fancybox上。
首先在head.html或者footer.html里引入。
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.css">
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.umd.js"></script>
之后在layouts\_default\_markup\render-image中给img标签添加data-fancybox的属性，根据官网使用手册，只显示单张图片时属性后留空，举例：
<img class="img" data-fancybox src="{{ .Destination | safeURL }}" alt="{{ .Text }}" />
然后推送github就没问题啦！有请图片系统御用测试员母肥————
咦我居然有猫男照片那轮播测试就猫猫来吧（何
引入neodb卡片
2024.04.07更新：因neodb网站API问题已暂时停用
2024.04.08 更新了手动输入版本
依旧参考了鹤辞的Hugo | 在 Stack 主题上可行的短代码们，在原版基础上进行了一些魔改，并把打分栏改为在短代码里手动输入。
在\layouts\shortcodes里新建neodb.html：
{{ $dbUrl := .Get 0 }}
{{ $dbApiUrl := "https://neodb.social/api/" }}
{{ $dbType := "" }}
{{ $itemRating := .Get 1 }}
{{ if ( findRE `^.*neodb\.social\/.*` $dbUrl ) }}
{{ $dbType = replaceRE `.*neodb.social\/(.*\/.*)` "$1" $dbUrl }}
{{ else }}
{{ $dbType = $dbUrl }}
{{ $dbApiUrl = "https://neodb.social/api/catalog/fetch?url=" }}
{{ end }}
{{ $dbFetch := getJSON $dbApiUrl $dbType }}
{{ if $dbFetch }}
<div class="db-card">
<div class="db-card-subject">
<div class="db-card-post"><img loading="lazy" decoding="async" referrerpolicy="no-referrer" src="{{ $dbFetch.cover_image_url }}"></div>
<div class="db-card-content">
<div class="db-card-title"><a href="{{ $dbUrl }}" class="cute" target="_blank" rel="noreferrer">{{ $dbFetch.title }}</a></div>
<div class="rating"><span class="rating_nums">小狗打分：</span><span class="allstardark"><span class="allstarlight" style="width:{{ $itemRating }}0%"></span></span></div>
<div class="db-card-abstract">{{ $dbFetch.brief }}</div>
</div>
<div class="db-card-cate">{{ $dbFetch.category }}</div>
</div>
</div>
{{else}}
<p style="text-align: center;"><small>远程获取内容失败，请检查 API 有效性。</small></p>
{{end}}
丢入自定义css！我把原版的星星图标替换成了Tabler Icons的小心心。
/* db-card -------- start */
.db-card {
margin: 2.5rem 2.5rem;
background: var(--color-codebg);
border-radius: 7px;
box-shadow: 0 6px 10px 0 #00000053;
}
.db-card-subject {
display: flex;
align-items: flex-start;
line-height: 1.6;
padding: 12px;
position: relative;
}
.dark .db-card {
background: var(--color-codebg);
}
.db-card-content {
flex: 1 1 auto;
}
.db-card-post {
width: 100px;
margin-right: 15px;
display: flex;
flex: 0 0 auto;
}
.db-card-title {
margin-bottom: 3px;
font-size: 15px;
color: var(--card-text-color-main);
font-weight: bold;
}
.db-card-title a {
text-decoration: none!important;
}
.db-card-abstract,
.db-card-comment {
font-size: 13px;
overflow: auto;
max-height: 6rem;
color: var(--card-text-color-main);
}
.db-card-cate {
position: absolute;
top: 0;
right: 0;
background: #8aa2d3;
padding: 1px 8px;
font-size: small;
font-style: italic;
border-radius: 0 8px 0 8px;
text-transform: capitalize;
}
.db-card-post img {
width: 100px!important;
height: 150px!important;
border-radius: 4px;
-o-object-fit: cover;
object-fit: cover;
}
.rating {
margin: 0 0 5px;
font-size: 13px;
line-height: 1;
display: flex;
align-items: center;
}
.rating .allstardark {
position: relative;
color: #ff8099;
height: 16px;
width: 80px;
background-size: auto 100%;
margin-right: 8px;
background-repeat: repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ff8099' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572' /%3E%3C/svg%3E");
}
.rating .allstarlight {
position: absolute;
left: 0;
color: #ff8099;
height: 16px;
overflow: hidden;
background-size: auto 100%;
background-repeat: repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23ff8099' stroke='%23ff8099' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572' /%3E%3C/svg%3E");
}
.rating_nums {
color: #8aa2d3;
}
@media (max-width: 600px) {
.db-card {
margin: 0.8rem 1rem;
}
.db-card-comment {
display: none;
}
.db-card-title {
font-size: 13px;
}
.rating {
font-size: 12px;
}
.db-card-abstract,
.db-card-comment {
font-size: 11px;
}
}
/* db-card -------- end */
使用方法如下，注意评分只能是1-10的整数。
{< neodb "https://neodb.social/book/5SJvkuHNGL4XhBddW2J4EJ(条目链接)" "10(评分)" >} //实际使用请添加双括号
大概完全不会有人用的手动输入版
在\layouts\shortcodes里新建book.html
<div class="db-card">
<div class="db-card-subject">
<div class="db-card-post"><img loading="lazy" decoding="async" referrerpolicy="no-referrer" src="{{ .Get "image" }}"></div>
<div class="db-card-content">
<div class="db-card-title"><a href="{{ .Get "url" }}" class="cute" target="_blank" rel="noreferrer">{{ .Get "title" }}</a></div>
<div class="rating"><span class="rating_nums">小狗打分：</span><span class="allstardark"><span class="allstarlight" style="width:{{ .Get "rate" }}0%"></span></span></div>
<div class="db-card-abstract">{{ .Get "brief" }}</div>
</div>
<div class="db-card-cate">{{ .Get "tag" }}</div>
</div>
</div>
css同上。
使用方法，注意rate一栏只能是1-10的整数。
{< book url="https://book.douban.com/subject/26980816/" image="https://img.naturaleki.one/lock/22f4b47f4e-5ed5-4bac-b8f1-67c1a9a22971.jpg" title="香味的繼承" rate="10" brief="比良木忍是哥哥，但與弟弟並無血緣關係，而是繼兄。竹藏以繼室之子的身份，進入比良木家。哥哥總是以像在看穢物的眼神，冰冷地俯視竹藏。視線中盈滿深深的嫌惡與憎恨，彷彿要將人射殺致死。每天每分每秒，無時無刻不遭到哥哥殺害。竹藏對哥哥懷有情慾。某天夜晚，竹藏隱瞞真實身份，潛入哥哥的臥室。噴上嫂嫂的香水、掩蔽哥哥的雙眼。然後，放縱自己猖狂的慾望，貫穿哥哥的肉體……描繪繼兄弟間，禁忌情愛與執拗的震撼之作。" tag="book" >}//实际使用请添加双括号
效果预览：
比良木忍是哥哥，但與弟弟並無血緣關係，而是繼兄。竹藏以繼室之子的身份，進入比良木家。哥哥總是以像在看穢物的眼神，冰冷地俯視竹藏。視線中盈滿深深的嫌惡與憎恨，彷彿要將人射殺致死。每天每分每秒，無時無刻不遭到哥哥殺害。竹藏對哥哥懷有情慾。某天夜晚，竹藏隱瞞真實身份，潛入哥哥的臥室。噴上嫂嫂的香水、掩蔽哥哥的雙眼。然後，放縱自己猖狂的慾望，貫穿哥哥的肉體……描繪繼兄弟間，禁忌情愛與執拗的震撼之作。
book
其实做这个卡片的初衷是想引入游戏介绍，但做完又感觉我写游戏repo用不到这个，那么我什么时候开始看书呢……（？