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://cdn.jsdelivr.net/gh/pokalo81124/img/lock/22f4b47f4e-5ed5-4bac-b8f1-67c1a9a22971.jpg" title="香味的繼承" rate="10" brief="比良木忍是哥哥,但與弟弟並無血緣關係,而是繼兄。竹藏以繼室之子的身份,進入比良木家。哥哥總是以像在看穢物的眼神,冰冷地俯視竹藏。視線中盈滿深深的嫌惡與憎恨,彷彿要將人射殺致死。每天每分每秒,無時無刻不遭到哥哥殺害。竹藏對哥哥懷有情慾。某天夜晚,竹藏隱瞞真實身份,潛入哥哥的臥室。噴上嫂嫂的香水、掩蔽哥哥的雙眼。然後,放縱自己猖狂的慾望,貫穿哥哥的肉體……描繪繼兄弟間,禁忌情愛與執拗的震撼之作。" tag="book" >}//实际使用请添加双括号

效果预览:

小狗打分:
比良木忍是哥哥,但與弟弟並無血緣關係,而是繼兄。竹藏以繼室之子的身份,進入比良木家。哥哥總是以像在看穢物的眼神,冰冷地俯視竹藏。視線中盈滿深深的嫌惡與憎恨,彷彿要將人射殺致死。每天每分每秒,無時無刻不遭到哥哥殺害。竹藏對哥哥懷有情慾。某天夜晚,竹藏隱瞞真實身份,潛入哥哥的臥室。噴上嫂嫂的香水、掩蔽哥哥的雙眼。然後,放縱自己猖狂的慾望,貫穿哥哥的肉體……描繪繼兄弟間,禁忌情愛與執拗的震撼之作。
book

其实做这个卡片的初衷是想引入游戏介绍,但做完又感觉我写游戏repo用不到这个,那么我什么时候开始看书呢……(?