博客RSS美化以及部署Umami站点监测

TIP
故事的起因是我出于好奇，加入了开往的 QQ 群，和群友聊天很有启发，折腾了一些新东西

RSS#

老实说，我知道它可以订阅博客以及其他的网站，但真没有深入了解过

美化博客RSS#

原本的 RSS 地址是 xml 格式，看上去跟一团乱码一样，但是可以用 xsl 进行美化。具体的不多叙述，会附上他人的博客教程，这里只记录我具体的实操。

新建 `rss.xsl`#

在 public 目录下新建一个 rss.xsl 的文件，保存具体的样式，作用类似于 CSS。

1
<?xml version="1.0" encoding="UTF-8"?>
2
<xsl:stylesheet
3
  version="1.0"
4
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
5
  xmlns:atom="http://www.w3.org/2005/Atom"
6
  exclude-result-prefixes="atom"
7
>
8
  <xsl:output method="html" doctype-system="about:legacy-compat" />
9

10
  <!-- 月份映射模板 -->
11
  <xsl:template name="month-to-number">
12
    <xsl:param name="month-abbr" />
13
    <xsl:choose>
14
      <xsl:when test="$month-abbr = 'Jan'">1</xsl:when>
15
      <xsl:when test="$month-abbr = 'Feb'">2</xsl:when>
16
      <xsl:when test="$month-abbr = 'Mar'">3</xsl:when>
17
      <xsl:when test="$month-abbr = 'Apr'">4</xsl:when>
18
      <xsl:when test="$month-abbr = 'May'">5</xsl:when>
19
      <xsl:when test="$month-abbr = 'Jun'">6</xsl:when>
20
      <xsl:when test="$month-abbr = 'Jul'">7</xsl:when>
21
      <xsl:when test="$month-abbr = 'Aug'">8</xsl:when>
22
      <xsl:when test="$month-abbr = 'Sep'">9</xsl:when>
23
      <xsl:when test="$month-abbr = 'Oct'">10</xsl:when>
24
      <xsl:when test="$month-abbr = 'Nov'">11</xsl:when>
25
      <xsl:when test="$month-abbr = 'Dec'">12</xsl:when>
26
      <xsl:otherwise>0</xsl:otherwise>
27
    </xsl:choose>
28
  </xsl:template>
29

30
  <xsl:template match="/">
31
    <html lang="{rss/channel/language}">
32
      <head>
33
        <meta charset="UTF-8" />
34
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
35
        <title><xsl:value-of select="rss/channel/title" /> RSS 订阅</title>
36
        <style>
37
          :root {
38
            --primary: #4f46e5;
39
            --primary-hover: #4338ca;
40
            --text: #1f2937;
41
            --light-text: #6b7280;
42
            --bg: #ffffff;
43
            --card-bg: #f9fafb;
44
            --border: #e5e7eb;
45
            --radius: 0.5rem;
46
            --shadow: 0 1px 3px rgba(0,0,0,0.1);
47
            --transition: all 0.2s ease;
48
          }
49

50
          @media (prefers-color-scheme: dark) {
51
            :root {
52
              --primary: #818cf8;
53
              --primary-hover: #6366f1;
54
              --text: #f3f4f6;
55
              --light-text: #9ca3af;
56
              --bg: #111827;
57
              --card-bg: #1f2937;
58
              --border: #374151;
59
              --shadow: 0 1px 3px rgba(0,0,0,0.3);
60
            }
61
          }
62

63
          * {
64
            box-sizing: border-box;
65
            margin: 0;
66
            padding: 0;
67
          }
68

69
          body {
70
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
71
                         Helvetica, Arial, sans-serif, "Apple Color Emoji";
72
            line-height: 1.6;
73
            color: var(--text);
74
            background-color: var(--bg);
75
            padding: 2rem 1rem;
76
            max-width: 900px;
77
            margin: 0 auto;
78
          }
79

80
          header {
81
            text-align: center;
82
            margin-bottom: 3rem;
83
            padding-bottom: 1.5rem;
84
            border-bottom: 1px solid var(--border);
85
          }
86

87
          h1 {
88
            color: var(--primary);
89
            margin-bottom: 0.5rem;
90
            font-size: 2.5rem;
91
            font-weight: 700;
92
          }
93

94
          .subtitle {
95
            color: var(--light-text);
96
            font-size: 1.125rem;
97
            margin-bottom: 1.5rem;
98
            max-width: 600px;
99
            margin-left: auto;
100
            margin-right: auto;
101
          }
102

103
          .article-list {
104
            display: grid;
105
            gap: 2rem;
106
          }
107

108
          article {
109
            background: var(--card-bg);
110
            border-radius: var(--radius);
111
            padding: 2rem;
112
            border: 1px solid var(--border);
113
            box-shadow: var(--shadow);
114
            transition: var(--transition);
115
          }
116

117
          article:hover {
118
            transform: translateY(-3px);
119
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
120
          }
121

122
          h2 {
123
            font-size: 1.5rem;
124
            margin-bottom: 1rem;
125
            font-weight: 600;
126
          }
127

128
          h2 a {
129
            color: inherit;
130
            text-decoration: none;
131
            transition: var(--transition);
132
          }
133

134
          h2 a:hover {
135
            color: var(--primary);
136
          }
137

138
          .meta {
139
            display: flex;
140
            gap: 1.5rem;
141
            color: var(--light-text);
142
            font-size: 0.875rem;
143
            margin-bottom: 1.25rem;
144
            flex-wrap: wrap;
145
            align-items: center;
146
          }
147

148
          .tags-container {
149
            display: flex;
150
            gap: 0.75rem;
151
            flex-wrap: wrap;
152
            margin-top: 0.5rem;
153
          }
154

155
          .tag {
156
            background: rgba(79, 70, 229, 0.1);
157
            color: var(--primary);
158
            padding: 0.375rem 0.75rem;
159
            border-radius: 9999px;
160
            font-size: 0.75rem;
161
            font-weight: 500;
162
            transition: var(--transition);
163
            display: inline-flex;
164
            align-items: center;
165
          }
166

167
          .tag:hover {
168
            background: rgba(79, 70, 229, 0.2);
169
          }
170

171
          .content {
172
            margin-top: 1.5rem;
173
            color: var(--text);
174
          }
175

176
          .content p {
177
            margin-bottom: 1rem;
178
          }
179

180
          .content img {
181
            max-width: 100%;
182
            height: auto;
183
            border-radius: var(--radius);
184
            margin: 1.5rem 0;
185
            box-shadow: var(--shadow);
186
          }
187

188
          .content pre {
189
            background: rgba(0,0,0,0.05);
190
            padding: 1rem;
191
            border-radius: var(--radius);
192
            overflow-x: auto;
193
            margin: 1.5rem 0;
194
            font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
195
            font-size: 0.875rem;
196
          }
197

198
          .content code {
199
            font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
200
            font-size: 0.875rem;
201
            background: rgba(0,0,0,0.05);
202
            padding: 0.2rem 0.4rem;
203
            border-radius: 0.25rem;
204
          }
205

206
          /* 关键修改：减小阅读更多按钮的上边距 */
207
          .read-more {
208
            display: inline-flex;
209
            align-items: center;
210
            gap: 0.5rem;
211
            color: var(--primary);
212
            font-weight: 500;
213
            text-decoration: none;
214
            transition: var(--transition);
215
          }
216

217
          .read-more:hover {
218
            color: var(--primary-hover);
219
          }
220

221
          .read-more svg {
222
            width: 1em;
223
            height: 1em;
224
            transition: var(--transition);
225
          }
226

227
          .read-more:hover svg {
228
            transform: translateX(2px);
229
          }
230

231
          @media (max-width: 768px) {
232
            body {
233
              padding: 1.5rem 1rem;
234
            }
235

236
            h1 {
237
              font-size: 2rem;
238
            }
239

240
            article {
241
              padding: 1.5rem;
242
            }
243

244
            /* 移动端进一步减小间距 */
245
            .read-more {
246
              margin-top: 0.5rem;
247
            }
248
          }
249

250
          @media (max-width: 480px) {
251
            .meta {
252
              gap: 1rem;
253
              flex-direction: column;
254
              align-items: flex-start;
255
            }
256

257
            article {
258
              padding: 1.25rem;
259
            }
260
          }
261
        </style>
262
      </head>
263

264
      <body>
265
        <header>
266
          <h1><xsl:value-of select="rss/channel/title" /></h1>
267
          <p class="subtitle"><xsl:value-of select="rss/channel/description" /></p>
268
          <a href="{rss/channel/link}" class="read-more">
269
            参观站点
270
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
271
              <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
272
            </svg>
273
          </a>
274
        </header>
275

276
        <div class="article-list">
277
          <xsl:for-each select="rss/channel/item">
278
            <article>
279
              <h2>
280
                <a href="{link}">
281
                  <xsl:value-of select="title" />
282
                </a>
283
              </h2>
284

285
              <div class="meta">
286
                <time datetime="{pubDate}">
287
                  <xsl:variable name="pubDateStr" select="pubDate" />
288
                  <xsl:variable name="year" select="substring($pubDateStr, 13, 4)" />
289
                  <xsl:variable name="month-abbr" select="substring($pubDateStr, 9, 3)" />
290
                  <xsl:variable name="day" select="substring($pubDateStr, 6, 2)" />
291
                  <xsl:variable name="month">
292
                    <xsl:call-template name="month-to-number">
293
                      <xsl:with-param name="month-abbr" select="$month-abbr" />
294
                    </xsl:call-template>
295
                  </xsl:variable>
296

297
                  <xsl:value-of select="concat($year, '年', $month, '月', $day, '日')" />
298
                </time>
299

300
                <xsl:if test="category">
301
                  <div class="tags-container">
302
                    <xsl:for-each select="category">
303
                      <span class="tag">
304
                        <xsl:value-of select="." />
305
                        <xsl:if test="position() != last()"> </xsl:if>
306
                      </span>
307
                    </xsl:for-each>
308
                  </div>
309
                </xsl:if>
310
              </div>
311

312
              <xsl:if test="description and description != ''">
313
                <p style="color: var(--light-text); margin-bottom: 1rem;">
314
                  <xsl:value-of select="description" />
315
                </p>
316
              </xsl:if>
317

318
              <div class="content">
319
                <xsl:value-of select="content" disable-output-escaping="yes" />
320
              </div>
321

322
              <a href="{link}" class="read-more">
323
                阅读完整文章
324
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
325
                  <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
326
                </svg>
327
              </a>
328
            </article>
329
          </xsl:for-each>
330
        </div>
331
      </body>
332
    </html>
333
  </xsl:template>
334
</xsl:stylesheet>

引入#

1
import { siteConfig } from "@/config";
2
import rss from "@astrojs/rss";
3
import { getSortedPosts } from "@utils/content-utils";
4
import type { APIContext } from "astro";
5
import MarkdownIt from "markdown-it";
6
import sanitizeHtml from "sanitize-html";
7

8
const parser = new MarkdownIt();
9

10
export async function GET(context: APIContext) {
11
  const blog = await getSortedPosts();
12

13
  return rss({
14
    stylesheet: "/rss.xsl", // 确保启用XSLT
15
    title: siteConfig.title,
16
    description: siteConfig.subtitle || "No description",
17
    site: context.site ?? "https://www.blueke.top",
18
    items: blog.map((post) => {
19
      const content =
20
        typeof post.body === "string" ? post.body : String(post.body || "");
21

22
      return {
23
        title: post.data.title,
24
        pubDate: post.data.published,
25
        description: post.data.description || "",
26
        link: `/posts/${post.slug}/`,
27
        content: sanitizeHtml(parser.render(content), {
28
          allowedTags: sanitizeHtml.defaults.allowedTags.concat(["img"]),
29
        }),
30
        categories: post.data.tags ?? [],
31
      };
32
    }),
33
    customData: `<language>${siteConfig.lang}</language>`,
34
  });
35
}

PS: 为了显示标签，我自己修改了一下，貌似有具体的规范，最好使用 categories 代替 tags

如果你不想自己定义样式，也可以用下面的 beauty 进行一键美化

参考来源#

RSS 阅读器#

~~RSS 还是要通过阅读器来阅读比较方便，考虑到多平台性。我直接在自己的服务器上 docker 部署了一个 FreshRSS，目前体验良好。~~

现在可以看我更新的帖子实现免费部署了

搭建 Umami#

Umami 是一个更加方便且现代化的网站检测工具，今天发现可以 vercel 可以部署后，也是迫不及待的部署体验了一下。

因为自带有公共链接，可以让所有人都能看到站点状态：本站站点状态

至于具体的教程，请参考这篇文章使用 vercel Neon 搭建 umami 统计

在这里真的很感谢这位博主的分享！

RSS#

美化博客RSS#

新建 rss.xsl#

引入#

参考来源#

RSS 阅读器#

搭建 Umami#

新建 `rss.xsl`#