安知鱼主题美化教程

本文所有教程均经过博主实操,为更好适配我的博客,我对某些内容进行过修改
如果您有教程想要分享,有疑惑想寻求帮助,或认为我不因将您的教程转载到这里,请在评论区提出,谢谢

请务必先详细阅读 anzhiyu 主题文档 + 勤备份,以免操作失误导致对博客的破坏

本站教程索引

外站教程索引

给博客添加定位个性欢迎(腾讯地图版)

给主题侧边栏添加来访者卡片

留言板页添加全屏弹幕

博客自定义字体

给主题侧边栏添加倒计时

美化你的 RSS 订阅地址

截至本文发布前,原作者文章中提供的atom.xsl文件似乎不能重现原作者 RSS 订阅界面的效果,故这里提供一个与原作者 RSS 订阅界面差不多的模板文件

atom.xsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
<xsl:output method="html"/>
<xsl:template match="/">
<html>
<head>
<title>Atom Feed</title>
<style>
:root{--bg-color:#f8fafc;--text-color:#1e293b;--card-bg:rgba(255,255,255,0.8);--border-color:#e2e8f0;--accent-color:#4f46e5;--muted-color:#64748b;--overlay:rgba(255,255,255,0.5);--header-text-light:#1f2937;--header-muted-light:#6b7280;--subscribe-bg-light:#f3f4f6;--header-text-dark:#f3f4f6;--header-muted-dark:#9ca3af;--subscribe-bg-dark:#1f2937;--header-text:var(--header-text-light);--header-muted:var(--header-muted-light);--subscribe-bg:var(--subscribe-bg-light);}@media (prefers-color-scheme:dark){:root{--bg-color:#0f172a;--text-color:#f8fafc;--card-bg:rgba(30,41,59,0.8);--border-color:#334155;--accent-color:#818cf8;--muted-color:#94a3b8;--overlay:rgba(15,23,42,0.5);--header-text:var(--header-text-dark);--header-muted:var(--header-muted-dark);--subscribe-bg:var(--subscribe-bg-dark);}}*{box-sizing:border-box;margin:0;padding:0;}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5;color:var(--text-color);background-color:var(--bg-color);min-height:100vh;-webkit-font-smoothing:antialiased;background-image:url('https://bu.dusays.com/2025/06/15/684ddd2726b50.webp');background-size:cover;background-attachment:fixed;background-position:center;}body::before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--overlay);backdrop-filter:blur(5px);z-index:-1;}a{color:var(--accent-color);text-decoration:none;}a:hover{text-decoration:underline;}.container{width:100%;max-width:800px;margin:0 auto;padding:2rem 1rem;}.header{padding:2rem 0;color:var(--header-text);text-align:left;max-width:800px;margin:0 auto;}.header-top{display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px dashed var(--header-text);}.header-avatar svg{flex-shrink:0;color:var(--header-text);}.header-title{font-size:1.75rem;font-weight:700;}.header-description-cn,.header-description-en{margin-bottom:1rem;font-size:1rem;color:var(--header-text);line-height:1.6;}.header-subscribe{margin-top:2rem;padding:1rem;background:var(--subscribe-bg);border-radius:0.5rem;border-left:4px solid var(--header-text);font-size:0.95rem;color:var(--header-muted);}.header-subscribe a{color:var(--header-text);font-weight:bold;text-decoration:underline;transition:color 0.3s ease;}.header-subscribe a:hover{color:rgb(9,147,197);}.article-list{display:grid;gap:1.5rem;}.article-card{background-color:var(--card-bg);backdrop-filter:blur(5px);border-radius:0.8rem;padding:1.5rem;box-shadow:0 1px 3px rgba(0,0,0,0.1);border:1px solid var(--border-color);transition:transform 0.2s,box-shadow 0.2s;}.article-card:hover{transform:translateY(-5px);box-shadow:0 4px 6px rgba(0,0,0,0.1);}.article-title{font-size:1.25rem;font-weight:600;margin-bottom:0.5rem;}.article-meta{display:flex;gap:1rem;color:var(--muted-color);font-size:0.875rem;margin-bottom:1rem;}.article-summary{margin-bottom:1rem;color:var(--text-color);}.article-tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1rem;}.tag{background-color:var(--border-color);color:var(--text-color);padding:0.25rem 0.5rem;border-radius:0.25rem;font-size:0.75rem;}.footer{margin-top:3rem;padding:2rem 1rem;text-align:center;color:var(--muted-color);font-size:1.0rem;transition:color 0.2s ease-in-out;}.footer-line{margin:0.5rem 0;}.footer-line a,.footer-line span{color:var(--muted-color,#6b7280);text-decoration:none;margin:0 0.5rem;transition:color 0.3s ease;}.footer-line a:hover{color:rgb(50,124,189);}.footer-line span{user-select:none;}.homeindex[data-v-7eb2bc79]{margin-top:12px;overflow-y:auto;max-height:675px;min-height:600px;}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="header-top">
<div class="header-avatar">
<svg width="40" height="40" viewBox="0 0 40 40">
<image href="/svg/rss-avatar.svg" width="40" height="40" preserveAspectRatio="xMidYMid meet"/>
</svg>
</div>
<div><h1 class="header-title">Roxy_Magicの咖啡馆</h1></div>
</div>
<div class="header-description-cn">Roxy_Magicの咖啡馆,提供建站教程、学习笔记分享、生活点滴,个人经验,融合技术开发与人文思考,定期更新深度指南与创意灵感,给大家提供更多帮助。</div>
<div class="header-description-en">Roxy_Magic’s Blog, Sharing tutorials, coding notes, life moments, personal experiences, blending tech and humanities, with regularly updated guides and creative inspiration.</div>
<div class="header-subscribe">不要诧异于异常精美的页面,你可以直接使用 RSS 阅读器比如:<a href="https://feedly.com/" target="_blank">Feedly</a>,<a href="https://www.inoreader.com/" target="_blank">Inoreader</a>,<a href="https://newsblur.com/" target="_blank">Newsblur</a>,<a href="https://follow.it/" target="_blank">Follow</a>或者 RSS Reader 等工具,来订阅这个 RSS 源链接。</div>
</div>
<div class="article-list">
<xsl:for-each select="atom:feed/atom:entry">
<div class="article-card">
<h2 class="article-title"><a href="{atom:link/@href}"><xsl:value-of select="atom:title"/></a></h2>
<div class="article-meta">
<span><xsl:value-of select="substring(atom:published,1,10)"/></span>
<span><xsl:value-of select="atom:author/atom:name"/></span>
</div>
<div class="article-summary"><xsl:value-of select="atom:summary"/></div>
<div class="article-tags">
<xsl:for-each select="atom:category"><span class="tag"><xsl:value-of select="@term"/></span></xsl:for-each>
</div>
</div>
</xsl:for-each>
</div>
<div class="footer">
<div class="footer-line">
<span>© 2025</span>
<span><a href="https://blog.roxymagic.top." target="_blank">Roxy_Magicの咖啡馆</a></span>
</div>
</div>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

友链朋友圈改为轻量友链朋友圈

首页背景图渐进式加载

安全跳转页面・插件版

文章主色调 (插件)

添加一个统计页面

添加待办清单页

添加游戏收藏页