atom.xsl
· 12 KiB · XML
Raw
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="3.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:atom="http://www.w3.org/2005/Atom">
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">
<xsl:variable name="title">
<xsl:value-of select="/atom:feed/atom:title"/>
</xsl:variable>
<xsl:variable name="description">
<xsl:value-of select="/atom:feed/atom:subtitle"/>
</xsl:variable>
<xsl:variable name="link">
<xsl:value-of select="/atom:feed/atom:link[@rel='alternate']/@href | /atom:feed/atom:link[not(@rel)]/@href"/>
</xsl:variable>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>
<xsl:value-of select="$title"/>
- 清羽飞扬の订阅源</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://bing.liushen.fun/daily.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;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<div class="header-top">
<div class="header-avatar">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="40" height="40">
<circle cx="6" cy="18" r="2"></circle>
<path d="M4 4a16 16 0 0 1 16 16"></path>
<path d="M4 11a9 9 0 0 1 9 9"></path>
</svg>
</div>
<h1 class="header-title">
<xsl:value-of select="$title" disable-output-escaping="yes"/>
</h1>
</div>
<p class="header-description-cn">
清羽飞扬的技术博客，提供建站教程、编程实战笔记、生活点滴，个人经验，融合技术开发与人文思考，定期更新深度指南与创意灵感，给大家提供更多帮助。
</p>
<p class="header-description-en">
LiuShen’s Tech Blog, Sharing tutorials, coding notes, life moments, personal experiences, blending tech and humanities, with regularly updated guides and creative inspiration.
</p>
<div class="header-subscribe">
<p>
不要诧异于异常精美的页面，你可以直接使用 RSS 阅读器比如：
<a href="https://feedly.com/i/subscription/feed/{$link}" target="_blank" rel="noopener noreferrer">Feedly</a>,
<a href="https://www.inoreader.com/feed/{$link}" target="_blank" rel="noopener noreferrer">Inoreader</a>,
<a href="https://www.newsblur.com/?url={$link}" target="_blank" rel="noopener noreferrer">Newsblur</a>,
<a href="follow://add?url={$link}" rel="noopener noreferrer">Follow</a> 或者
<a href="feed:{$link}" rel="noopener noreferrer">RSS Reader</a> 等工具，来订阅这个 RSS 源链接。
</p>
</div>
</header>
<div class="article-list">
<xsl:for-each select="/atom:feed/atom:entry">
<article class="article-card">
<h2 class="article-title">
<a href="{atom:link/@href}" target="_blank">
<xsl:value-of select="atom:title" disable-output-escaping="yes"/>
</a>
</h2>
<div class="article-meta">
<time>
<xsl:value-of select="substring(atom:published, 1, 10)"/>
</time>
<span>·</span>
<span>
<xsl:value-of select="atom:category/@term"/>
</span>
</div>
<p class="article-summary">
<xsl:value-of select="atom:summary" disable-output-escaping="yes"/>
</p>
<xsl:if test="atom:category">
<div class="article-tags">
<xsl:for-each select="atom:category">
<span class="tag">
<xsl:value-of select="@term"/>
</span>
</xsl:for-each>
</div>
</xsl:if>
</article>
</xsl:for-each>
</div>
<footer class="footer">
<div class="footer-line">
<a href="https://www.dogecloud.com/" target="_blank" rel="nofollow noopener noreferrer">多吉云</a>
<span>|</span>
<a href="https://www.aliyun.com/" target="_blank" rel="nofollow noopener noreferrer">阿里云</a>
<span>|</span>
<a href="https://cloud.tencent.com/" target="_blank" rel="nofollow noopener noreferrer">腾讯云</a>
<span>|</span>
<a href="https://atom.io/" target="_blank" rel="nofollow noopener noreferrer">Atom</a>
</div>
<div class="footer-line">
<a href="https://github.com/willow-god/hexo-pretty-feed" target="_blank" rel="nofollow noopener noreferrer">项目地址</a>
<span>|</span>
<span>MIT License © 2025</span>
<span>|</span>
<a href="https://www.liushen.fun/" target="_blank" rel="nofollow noopener noreferrer">LiuShen</a>
</div>
<div class="footer-line">
<a href="https://blog.liushen.fun/" target="_blank" rel="nofollow noopener noreferrer">清羽飞扬</a>
<span>|</span>
<a href="https://bing.liushen.fun/" target="_blank" rel="nofollow noopener noreferrer">Bing每日一图</a>
</div>
</footer>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
| 1 | <?xml version="1.0" encoding="utf-8"?> |
| 2 | <xsl:stylesheet version="3.0" |
| 3 | xmlns:xsl="http://www.w3.org/1999/XSL/Transform" |
| 4 | xmlns:atom="http://www.w3.org/2005/Atom"> |
| 5 | <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/> |
| 6 | |
| 7 | <xsl:template match="/"> |
| 8 | <xsl:variable name="title"> |
| 9 | <xsl:value-of select="/atom:feed/atom:title"/> |
| 10 | </xsl:variable> |
| 11 | <xsl:variable name="description"> |
| 12 | <xsl:value-of select="/atom:feed/atom:subtitle"/> |
| 13 | </xsl:variable> |
| 14 | <xsl:variable name="link"> |
| 15 | <xsl:value-of select="/atom:feed/atom:link[@rel='alternate']/@href | /atom:feed/atom:link[not(@rel)]/@href"/> |
| 16 | </xsl:variable> |
| 17 | |
| 18 | <html> |
| 19 | <head> |
| 20 | <meta charset="utf-8"/> |
| 21 | <meta name="viewport" content="width=device-width, initial-scale=1"/> |
| 22 | <title> |
| 23 | <xsl:value-of select="$title"/> |
| 24 | - 清羽飞扬の订阅源</title> |
| 25 | <style> |
| 26 | :root { |
| 27 | --bg-color: #f8fafc; |
| 28 | --text-color: #1e293b; |
| 29 | --card-bg:rgba(255, 255, 255, 0.8); |
| 30 | --border-color: #e2e8f0; |
| 31 | --accent-color: #4f46e5; |
| 32 | --muted-color: #64748b; |
| 33 | --overlay: rgba(255, 255, 255, 0.5); |
| 34 | --header-text-light: #1f2937; |
| 35 | --header-muted-light: #6b7280; |
| 36 | --subscribe-bg-light: #f3f4f6; |
| 37 | |
| 38 | --header-text-dark: #f3f4f6; |
| 39 | --header-muted-dark: #9ca3af; |
| 40 | --subscribe-bg-dark: #1f2937; |
| 41 | |
| 42 | --header-text: var(--header-text-light); |
| 43 | --header-muted: var(--header-muted-light); |
| 44 | --subscribe-bg: var(--subscribe-bg-light); |
| 45 | } |
| 46 | |
| 47 | @media (prefers-color-scheme: dark) { |
| 48 | :root { |
| 49 | --bg-color: #0f172a; |
| 50 | --text-color: #f8fafc; |
| 51 | --card-bg:rgba(30, 41, 59, 0.8); |
| 52 | --border-color: #334155; |
| 53 | --accent-color: #818cf8; |
| 54 | --muted-color: #94a3b8; |
| 55 | --overlay: rgba(15, 23, 42, 0.5); |
| 56 | --header-text: var(--header-text-dark); |
| 57 | --header-muted: var(--header-muted-dark); |
| 58 | --subscribe-bg: var(--subscribe-bg-dark); |
| 59 | } |
| 60 | } |
| 61 | |
| 62 | * { |
| 63 | box-sizing: border-box; |
| 64 | margin: 0; |
| 65 | padding: 0; |
| 66 | } |
| 67 | |
| 68 | body { |
| 69 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; |
| 70 | line-height: 1.5; |
| 71 | color: var(--text-color); |
| 72 | background-color: var(--bg-color); |
| 73 | min-height: 100vh; |
| 74 | -webkit-font-smoothing: antialiased; |
| 75 | background-image: url('https://bing.liushen.fun/daily.webp'); |
| 76 | background-size: cover; |
| 77 | background-attachment: fixed; |
| 78 | background-position: center; |
| 79 | } |
| 80 | |
| 81 | body::before { |
| 82 | content: ""; |
| 83 | position: fixed; |
| 84 | top: 0; |
| 85 | left: 0; |
| 86 | right: 0; |
| 87 | bottom: 0; |
| 88 | background-color: var(--overlay); |
| 89 | backdrop-filter: blur(5px); |
| 90 | z-index: -1; |
| 91 | } |
| 92 | |
| 93 | a { |
| 94 | color: var(--accent-color); |
| 95 | text-decoration: none; |
| 96 | } |
| 97 | |
| 98 | a:hover { |
| 99 | text-decoration: underline; |
| 100 | } |
| 101 | |
| 102 | .container { |
| 103 | width: 100%; |
| 104 | max-width: 800px; |
| 105 | margin: 0 auto; |
| 106 | padding: 2rem 1rem; |
| 107 | } |
| 108 | |
| 109 | .header { |
| 110 | padding: 2rem 0; |
| 111 | color: var(--header-text); |
| 112 | text-align: left; |
| 113 | max-width: 800px; |
| 114 | margin: 0 auto; |
| 115 | } |
| 116 | |
| 117 | .header-top { |
| 118 | display: flex; |
| 119 | align-items: center; |
| 120 | gap: 0.75rem; |
| 121 | margin-bottom: 1rem; |
| 122 | padding-bottom: 1rem; |
| 123 | border-bottom: 1px dashed var(--header-text); |
| 124 | } |
| 125 | |
| 126 | .header-avatar svg { |
| 127 | flex-shrink: 0; |
| 128 | color: var(--header-text); |
| 129 | } |
| 130 | |
| 131 | .header-title { |
| 132 | font-size: 1.75rem; |
| 133 | font-weight: 700; |
| 134 | } |
| 135 | |
| 136 | .header-description-cn, |
| 137 | .header-description-en { |
| 138 | margin-bottom: 1rem; |
| 139 | font-size: 1rem; |
| 140 | color: var(--header-text); |
| 141 | line-height: 1.6; |
| 142 | } |
| 143 | |
| 144 | .header-subscribe { |
| 145 | margin-top: 2rem; |
| 146 | padding: 1rem; |
| 147 | background: var(--subscribe-bg); |
| 148 | border-radius: 0.5rem; |
| 149 | border-left: 4px solid var(--header-text); |
| 150 | font-size: 0.95rem; |
| 151 | color: var(--header-muted); |
| 152 | } |
| 153 | |
| 154 | .header-subscribe a { |
| 155 | color: var(--header-text); |
| 156 | font-weight: bold; |
| 157 | text-decoration: underline; |
| 158 | transition: color 0.3s ease; |
| 159 | } |
| 160 | |
| 161 | .header-subscribe a:hover { |
| 162 | color:rgb(9, 147, 197); |
| 163 | } |
| 164 | |
| 165 | .article-list { |
| 166 | display: grid; |
| 167 | gap: 1.5rem; |
| 168 | } |
| 169 | |
| 170 | .article-card { |
| 171 | background-color: var(--card-bg); |
| 172 | backdrop-filter: blur(5px); |
| 173 | border-radius: 0.8rem; |
| 174 | padding: 1.5rem; |
| 175 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
| 176 | border: 1px solid var(--border-color); |
| 177 | transition: transform 0.2s, box-shadow 0.2s; |
| 178 | } |
| 179 | |
| 180 | .article-card:hover { |
| 181 | transform: translateY(-5px); |
| 182 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| 183 | } |
| 184 | |
| 185 | .article-title { |
| 186 | font-size: 1.25rem; |
| 187 | font-weight: 600; |
| 188 | margin-bottom: 0.5rem; |
| 189 | } |
| 190 | |
| 191 | .article-meta { |
| 192 | display: flex; |
| 193 | gap: 1rem; |
| 194 | color: var(--muted-color); |
| 195 | font-size: 0.875rem; |
| 196 | margin-bottom: 1rem; |
| 197 | } |
| 198 | |
| 199 | .article-summary { |
| 200 | margin-bottom: 1rem; |
| 201 | color: var(--text-color); |
| 202 | } |
| 203 | |
| 204 | .article-tags { |
| 205 | display: flex; |
| 206 | flex-wrap: wrap; |
| 207 | gap: 0.5rem; |
| 208 | margin-top: 1rem; |
| 209 | } |
| 210 | |
| 211 | .tag { |
| 212 | background-color: var(--border-color); |
| 213 | color: var(--text-color); |
| 214 | padding: 0.25rem 0.5rem; |
| 215 | border-radius: 0.25rem; |
| 216 | font-size: 0.75rem; |
| 217 | } |
| 218 | |
| 219 | .footer { |
| 220 | margin-top: 3rem; |
| 221 | padding: 2rem 1rem; |
| 222 | text-align: center; |
| 223 | color: var(--muted-color); |
| 224 | font-size: 1.0rem; |
| 225 | transition: color 0.2s ease-in-out; |
| 226 | } |
| 227 | |
| 228 | .footer-line { |
| 229 | margin: 0.5rem 0; |
| 230 | } |
| 231 | |
| 232 | .footer-line a, .footer-line span { |
| 233 | color: var(--muted-color, #6b7280); |
| 234 | text-decoration: none; |
| 235 | margin: 0 0.5rem; |
| 236 | transition: color 0.3s ease; |
| 237 | } |
| 238 | |
| 239 | .footer-line a:hover { |
| 240 | color:rgb(50, 124, 189); |
| 241 | } |
| 242 | |
| 243 | .footer-line span { |
| 244 | user-select: none; |
| 245 | } |
| 246 | </style> |
| 247 | </head> |
| 248 | <body> |
| 249 | <div class="container"> |
| 250 | <header class="header"> |
| 251 | <div class="header-top"> |
| 252 | <div class="header-avatar"> |
| 253 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="40" height="40"> |
| 254 | <circle cx="6" cy="18" r="2"></circle> |
| 255 | <path d="M4 4a16 16 0 0 1 16 16"></path> |
| 256 | <path d="M4 11a9 9 0 0 1 9 9"></path> |
| 257 | </svg> |
| 258 | </div> |
| 259 | <h1 class="header-title"> |
| 260 | <xsl:value-of select="$title" disable-output-escaping="yes"/> |
| 261 | </h1> |
| 262 | </div> |
| 263 | |
| 264 | <p class="header-description-cn"> |
| 265 | 清羽飞扬的技术博客，提供建站教程、编程实战笔记、生活点滴，个人经验，融合技术开发与人文思考，定期更新深度指南与创意灵感，给大家提供更多帮助。 |
| 266 | </p> |
| 267 | <p class="header-description-en"> |
| 268 | LiuShen’s Tech Blog, Sharing tutorials, coding notes, life moments, personal experiences, blending tech and humanities, with regularly updated guides and creative inspiration. |
| 269 | </p> |
| 270 | |
| 271 | <div class="header-subscribe"> |
| 272 | <p> |
| 273 | 不要诧异于异常精美的页面，你可以直接使用 RSS 阅读器比如： |
| 274 | <a href="https://feedly.com/i/subscription/feed/{$link}" target="_blank" rel="noopener noreferrer">Feedly</a>, |
| 275 | <a href="https://www.inoreader.com/feed/{$link}" target="_blank" rel="noopener noreferrer">Inoreader</a>, |
| 276 | <a href="https://www.newsblur.com/?url={$link}" target="_blank" rel="noopener noreferrer">Newsblur</a>, |
| 277 | <a href="follow://add?url={$link}" rel="noopener noreferrer">Follow</a> 或者 |
| 278 | <a href="feed:{$link}" rel="noopener noreferrer">RSS Reader</a> 等工具，来订阅这个 RSS 源链接。 |
| 279 | </p> |
| 280 | </div> |
| 281 | </header> |
| 282 | |
| 283 | <div class="article-list"> |
| 284 | <xsl:for-each select="/atom:feed/atom:entry"> |
| 285 | <article class="article-card"> |
| 286 | <h2 class="article-title"> |
| 287 | <a href="{atom:link/@href}" target="_blank"> |
| 288 | <xsl:value-of select="atom:title" disable-output-escaping="yes"/> |
| 289 | </a> |
| 290 | </h2> |
| 291 | <div class="article-meta"> |
| 292 | <time> |
| 293 | <xsl:value-of select="substring(atom:published, 1, 10)"/> |
| 294 | </time> |
| 295 | <span>·</span> |
| 296 | <span> |
| 297 | <xsl:value-of select="atom:category/@term"/> |
| 298 | </span> |
| 299 | </div> |
| 300 | <p class="article-summary"> |
| 301 | <xsl:value-of select="atom:summary" disable-output-escaping="yes"/> |
| 302 | </p> |
| 303 | <xsl:if test="atom:category"> |
| 304 | <div class="article-tags"> |
| 305 | <xsl:for-each select="atom:category"> |
| 306 | <span class="tag"> |
| 307 | <xsl:value-of select="@term"/> |
| 308 | </span> |
| 309 | </xsl:for-each> |
| 310 | </div> |
| 311 | </xsl:if> |
| 312 | </article> |
| 313 | </xsl:for-each> |
| 314 | </div> |
| 315 | |
| 316 | <footer class="footer"> |
| 317 | <div class="footer-line"> |
| 318 | <a href="https://www.dogecloud.com/" target="_blank" rel="nofollow noopener noreferrer">多吉云</a> |
| 319 | <span>|</span> |
| 320 | <a href="https://www.aliyun.com/" target="_blank" rel="nofollow noopener noreferrer">阿里云</a> |
| 321 | <span>|</span> |
| 322 | <a href="https://cloud.tencent.com/" target="_blank" rel="nofollow noopener noreferrer">腾讯云</a> |
| 323 | <span>|</span> |
| 324 | <a href="https://atom.io/" target="_blank" rel="nofollow noopener noreferrer">Atom</a> |
| 325 | </div> |
| 326 | <div class="footer-line"> |
| 327 | <a href="https://github.com/willow-god/hexo-pretty-feed" target="_blank" rel="nofollow noopener noreferrer">项目地址</a> |
| 328 | <span>|</span> |
| 329 | <span>MIT License © 2025</span> |
| 330 | <span>|</span> |
| 331 | <a href="https://www.liushen.fun/" target="_blank" rel="nofollow noopener noreferrer">LiuShen</a> |
| 332 | </div> |
| 333 | <div class="footer-line"> |
| 334 | <a href="https://blog.liushen.fun/" target="_blank" rel="nofollow noopener noreferrer">清羽飞扬</a> |
| 335 | <span>|</span> |
| 336 | <a href="https://bing.liushen.fun/" target="_blank" rel="nofollow noopener noreferrer">Bing每日一图</a> |
| 337 | </div> |
| 338 | </footer> |
| 339 | |
| 340 | </div> |
| 341 | </body> |
| 342 | </html> |
| 343 | </xsl:template> |
| 344 | </xsl:stylesheet> |