Skip to content
Go back

博客折腾小记,文章子目录和图片网格组件

3 min read
Edit
上海野生动物园的两只耳廓狐(Fennec Fox)
上海野生动物园的两只耳廓狐(Fennec Fox)

文章子目录

astro-paper v5.1.0 主题更新了一项对我来说非常有用的功能,博客文章支持子目录方式整理。

我的博客是使用 astro paper 主题搭建的,在 v5.1.0 之前,博客文章的 md 文件只能在 v5.0 版本前 src/page/blog,v5.0 版本后 src/data/blog 目录下,不支持子目录组织文件。在 v5.1.0 版本,开发者总算是支持了子目录组织,并且很天才的是,以 _ 开头的文件,比如 _subdir 是不会加入博客文章路径里的。这样我就可以保证所有的博客文章都在 post/ 路径下,但是文件可以以子目录的方式组织了。避免写了太多的文章,一个目录下组织太多的文件。

详细介绍可以看官方文章,我非常喜欢这个功能,大赞。

为防止官方后续修改文章链接,或者删除文章之类的行为,我摘录在下面。

Starting from AstroPaper v5.1.0, you can now organize blog posts into subdirectories, making it easier to manage your content.

For example, if you want to group posts under 2025, you can place them in src/data/blog/2025/. This also affects the post URL, so src/data/blog/2025/example-post.md will be available at /posts/2025/example-post.

If you don’t want subdirectories to affect the post URL, just prefix the folder name with an underscore _.

Example: blog post structure and URLs

src/data/blog/very-first-post.md          -> mysite.com/posts/very-first-post
src/data/blog/2025/example-post.md        -> mysite.com/posts/2025/example-post
src/data/blog/_2026/another-post.md       -> mysite.com/posts/another-post
src/data/blog/docs/_legacy/how-to.md      -> mysite.com/docs/how-to
src/data/blog/Example Dir/Dummy Post.md   -> mysite.com/example-dir/dummy-postCopy

💡 Tip: You can override a blog post’s slug in the frontmatter as well. See the next section for more details.

If the subdirectory URL doesn’t appear in the build output, remove node_modules, reinstall packages, and then rebuild.

图片网格组件

我之前为博客引入 mdx 格式,主要就是为了方便展示图片网格,让 AI IDE 帮我写了这个组件功能。

详细的 demo 可以看这篇文章,我觉得勉强是可用的。


Edit
文章标题:博客折腾小记,文章子目录和图片网格组件
文章链接: https://blog.guanglai.me/posts/astro-blog-post-subdir-and-image-grid/

商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接。您可以自由地在任何媒体以任何形式复制和分发作品,也可以修改和创作,但分发衍生作品时必须采用相同的许可协议。

本文采用 CC BY-NC-SA 4.0 进行许可。


Previous Post
已读乱码 017 | 接触相机
Next Post
已读乱码 016 | 人生即体验