astro配置笔记 - Raye's Journey

668 字

3 分钟

astro配置笔记

2025-10-29

折腾

博客

/

折腾

由于xlog已经年久失修，于是在 @niracler 的推荐下，将博客迁移到了 astro，最终还是回归到了静态网页，期间增加了一些自定义的功能，如保持和xlog rss订阅链接的兼容，自定义文章url等，代码都是在cursor上使用claude写的

url trailingSlash配置 + 适配xlog rss#

参考了官方文档修改配置文件： astro.config.mjs，将 trailingSlash 选项修改为 ignore

1
export default defineConfig({
2
  site: "https://raye.ink/",
3
  base: "/",
4
  trailingSlash: "ignore",

然后复制原有的 rss.xml.ts 为 feed.ts

这样就可以实现自定义rss的源变成了 https://raye.ink/feed

而不再是强制匹配 https://raye.ink/feed/，这样folo上订阅我的用户们就不用再操作一遍了

代码commit 链接

文章url 自定义#

主要是默认的文章url 是带上文章标题的，这样复制分享给别人都很不方便，于是还是想自定义文章url

直接看修改记录吧

要改的地方有几个：

首页文章链接
文章下一篇链接
rss生成链接

同时要修改scripts/new-post.js 这个文件，这样 pnpm new-post xxx 新建文章的时候，也就自动在 frontmatter 上增加了配置项

ps 目前文章url都是在posts下，和原有的文章url没法兼容，等我找到办法再修改吧

1
const content = `---
2
title: ${args[0]}
3
published: ${getDate()}
4
description: ''
5
customSlug: ''
6
image: ''
7
tags: []
8
category: ''
9
draft: false
10
lang: ''
11
---
12
`

首页文章图片显示位置#

因为我的文章首页图都是有文字的，而默认的是居中显示缩略图导致文字被遮盖挺难受的

修改 src/components/PostCard.astro

1
<ImageWrapper src={image} basePath={path.join("content/posts/", getDir(entry.id))} alt="Cover Image of the Post"
2
      position="left center"
3
      class="w-full h-full">
4
</ImageWrapper>

添加 position 属性， left center 即可

定义rss的返回content-type#

因为我修改了 /feed 为我的rss订阅，但是部署到静态网页上会变成文件下载，比较奇怪

代码修改

1
  return new Response(rssResponse.body, {
2
    status: 200,
3
    headers: {
4
      "Content-Type": "application/xml; charset=utf-8",
5
    },
6
  });