Like 0
Fork 0

Last active 5 months ago

Atom通过XSL代码进行HTML化并进行美化

atom feed hexo pretty xml xsl

LiuShen's Avatar LiuShen revised this gist 5 months ago. Go to revision

1 file changed, 344 insertions

atom.xsl(file created)

@@ -0,0 +1,344 @@
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>
Newer Older

Powered by Opengist ⋅ Load: 27ms⋅

English
⋅ 个人主页 ⋅ 站长博客