添加安知鱼主题页面卡片并美化

安知鱼的主题做的挺好看的,但博客毕竟是一个比较个性化的东西,需要自定义的方面比较多。最近发现新增加的页面总是不对味,总是差点东西。最后发现是页面顶部的图片卡片没有,这就很蛋疼了。找了一圈没有教程,自己研究了一下,大概能用。

上演示

下面两步搞定

第一步

在你的页面文件source/books/index.md 顶部添加这个代码

<div class="author-content author-content-item single" style="background:url(https://t.alcy.cc/pc/) center /cover no-repeat!important">
<div class="card-content">
<div class="author-content-item-tips">朋友圈</div>
<span class="author-content-item-title">看看朋友们写了什么</span>
<div class="content-bottom">
<div class="tips">今日听君歌一曲,暂凭杯酒长精神。</div>
</div>
<div class="banner-button-group">
<a class="banner-button" style="padding: 8px 12px;color: var(--anzhiyu-pink);" onclick="pjax.loadUrl("/about")" data-pjax-state="">
<i class="anzhiyufont anzhiyu-icon-arrow-circle-right" style="font-size:22px;margin-right:.25rem"></i>
<span class="banner-button-text">关于本人</span>
</a>
</div>
</div>
</div>

第二步

添加完成之后你发现

有侧边栏(直接在index.md 配置区域aside:false 不显示)

有标题修改替换这个文件解决

themes\anzhiyu\layout\page.pug
extends includes/layout.pug

block content
#page
//- 已移除标题显示逻辑(原条件判断top_img和top_single)[1](@ref)
case page.type
when 'tags'
include includes/page/tags.pug
when 'link'
include includes/page/flink.pug
when 'categories'
include includes/page/categories.pug
when 'essay'
include includes/page/essay.pug
when 'books'
include includes/page/books.pug
when 'movies'
include includes/page/movies.pug
when 'games'
include includes/page/games.pug
when 'room'
include includes/page/room.pug
when 'about'
include includes/page/about.pug
when 'album'
include includes/page/album.pug
when 'fcircle'
include includes/page/fcircle.pug
when 'album_detail'
include includes/page/album_detail.pug
when 'music'
include includes/page/music.pug
when 'equipment'
include includes/page/equipment.pug
when 'anniversary'
include includes/page/anniversary.pug
default
include includes/page/default-page.pug

if page.comments !== false && theme.comments && theme.comments.use
- var commentsJsLoad = true
!=partial('includes/third-party/comments/index', {}, {cache: true})

背景太小用修改这个解决

themes\anzhiyu\source\css\_page\common.styl
#body-wrap {
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: space-between;
background: var(--anzhiyu-background);
background-size: cover;
background-attachment: fixed;
background-position: center;
}

/* 新增:全局透明容器 */
#page {
background: transparent !important; /* 关键透明设置 */
}

@media (max-width: 768px) {
#body-wrap {
background-size: 100% 100%;
background-attachment: scroll;
}
.layout {
padding: 0;
}
#archive {
background: var(--anzhiyu-background);
border: none;
padding-top: 0;
}
}

.layout {
display: flex;
flex: 1 auto;
margin: 0 auto;
padding: 1.25rem 1.5rem;
max-width: 1200px;
width: 100%;
justify-content: center;
}

@media (max-width: 1200px) {
.layout {
flex-direction: column;
padding-top: 10px;
}
}

@media (max-width: 768px) {
.layout {
padding: 20px 15px;
z-index: 3;
}
}

@media (min-width: 2000px) {
.layout {
max-width: 1700px;
}
}

/* 移除透明效果 */
.layout > div:first-child:not(.recent-posts) {
padding: 2rem 2.5rem;
border-radius: 12px;
width: calc(100% - 300px);
align-self: flex-start;
animation: slide-in 0.6s 0.1s backwards;
background: var(--anzhiyu-background) !important; /* 覆盖透明 */
}

@media (max-width: 768px) {
.layout > div:first-child:not(.recent-posts) {
padding: 1rem;
background: transparent; /* 移动端特殊处理 */
}
}

.layout > div:first-child {
width: calc(100% - 300px);
transition: all 0.3s ease 0s;
}

@media (max-width: 900px) {
.layout > div:first-child {
width: 100% !important;
}
}

.layout.hide-aside {
max-width: 1000px;
}

@media (min-width: 2000px) {
.layout.hide-aside {
max-width: 1200px;
}
}

.layout.hide-aside > div {
width: 100% !important;
}

/* 核心修改:移除内容区块透明 */
.card, .post-block {
background: var(--anzhiyu-background) !important; /* 实体背景色 */
box-shadow: none !important;
}

/* 苹果设备适配 */
.apple #page-header.full_page {
background-attachment: scroll !important;
}
.apple #body-wrap {
background-attachment: scroll !important;
}