LiuShen/Atom美化代码

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>

<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>