STACK | 晴空号维修日志01

更换背景图片

发现切换其他页面时，图片会被放大显示模糊，chatgpt老师说需要多写一行：background-attachment: fixed。

总之，在/assets/scss/custom.scss中填写如下内容：

body {
    background-image: url('https://res.cloudinary.com/xpihxb/image/upload/v1705496820/chihiro032_g6voto.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

使用Shortcodes引用neodb

参考作业：Hugo | 在 Stack 主题上可行的短代码们

感谢鹤辞！完全照抄！

在layouts/shortcodes中新建新建neodb.html，内容如下：

{{ $dbUrl := .Get 0 }}
{{ $dbApiUrl := "https://neodb.social/api/" }}
{{ $dbType := "" }}

{{ 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 }}
    {{ $itemRating := 0 }}{{ with $dbFetch.rating }}{{ $itemRating = . }}{{ end }}
    <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="allstardark"><span class="allstarlight" style="width:{{mul 10 $itemRating }}%"></span></span><span class="rating_nums">{{ $itemRating }}</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}}

在/assets/scss/custom.scss中填入css的样式代码，内容如下：

/* db-card -------- start*/
.db-card{margin:2.5rem 3rem;background:var(--card-background);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(--card-background);}
.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: 14px;color: var(--card-text-color-main);;}
.db-card-title a{text-decoration: none!important}
.db-card-abstract,.db-card-comment{font-size:13px;overflow: auto;max-height:5rem;color: var(--card-text-color-main);;}
.db-card-cate{position: absolute;top:0;right:0;background:#f99b01;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: #f99b01;height: 16px;width: 80px;background-size: auto 100%;margin-right: 8px;background-repeat: repeat;background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6TTY2NC44IDU2MS42bDM2LjEgMjEwLjNMNTEyIDY3Mi43IDMyMy4xIDc3MmwzNi4xLTIxMC4zLTE1Mi44LTE0OUw0MTcuNiAzODIgNTEyIDE5MC43IDYwNi40IDM4MmwyMTEuMiAzMC43LTE1Mi44IDE0OC45eiIgZmlsbD0iI2Y5OWIwMSIvPjwvc3ZnPg==);
}
.rating .allstarlight{position: absolute;left: 0;color: #f99b01;height:16px;overflow: hidden;background-size: auto 100%;background-repeat: repeat;background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6IiBmaWxsPSIjZjk5YjAxIi8+PC9zdmc+);}
@media (max-width:550px) {
	.db-card{margin:0.8rem 1rem;}
	.db-card-comment{display: none;}
}
/* db-card -------- end */

使用时出现过卡片显示文字不完全，卡片底部留白过多的情况，调整css样式代码中max-height的值后显示正常。

我暂时不知道输入时怎么让它好好显示为代码，而不生效样式。
就，看看示例吧：

南海十三郎

9.2

开片是说书人因聚众滋事，被警察（黄霑饰）带到了警局问话，借说书人之口讲述了粤剧金牌编剧——南海十三郎艺海浮沉的一生。作为江太史公的十三子，江誉镠（谢君豪饰）自由顽皮，出入名流场所。一次偶然的舞会，他遇到了上海的千金小姐莉莉（吴绮莉饰），然而双方有缘相逢，无份结亲。后来，他跟随她来到上海，竟落得穷困潦倒。 2年后，回到了广东的家中，他已被学校除名。当时太史公已经年事已高，他便天天去看戏，从不受戏班老板薛老五赏识，到后来成为御用编剧一鸣惊人，人送绰号——南海十三郎。然而，时局动荡，他到了江西写剧本慰劳前线战士，因看不过同行媚俗之作，愤然出手，不欢而散。这时一次车祸，让他与昔日恋人重逢，可惜她已嫁给老外。十三郎郁郁寡欢，后来入寺修行，却在一次代人祈福的对话中，得知了自己家道中落的败局，他疯了……

movie

设置RSS地址

经过好心象友提醒，在config.yaml中填写baseurl。

代码块增加限高

参考作业：Hugo | 另一篇 Stack 主题装修记录 | 小球飞鱼

在/assets/scss/partials/layout/article.scss中的pre下塞入代码：

pre {
    overflow-x: auto;
    max-height: 230px;
    }

友链插入图片

没有技术含量只是加了图片喊大家看啦hhh

友链图片与背景图片均来自：今月から、スタジオジブリ作品の場面写真の提供を開始します - スタジオジブリ｜STUDIO GHIBLI

修改鼠标指针

直接让chatgpt老师写的。主要困难来自于，使用外部链接的鼠标指针巨大啊！巨大！我最后使用了30*30的图片大小，在/assets/scss/style.scss插入，终于可以了。

不知道错在哪，成了就行T_T。
图标来自：免费矢量图标——下载1,328,700个图标（SVG、PNG）

/* 默认时的鼠标样式 */
body {
    cursor: url('tupian.png'), default;
}
/* 指向链接时的鼠标样式 */
a:hover {
    cursor: url('tupian.png'), pointer;
}

卡片样式

照抄鹤辞。