“Astro-Blog-Plus”是基于Astro官方博客模板构建的模板。它增加了许多新功能,并对移动端布局进行了优化。
您可以通过点击“Deploy”按钮,fork此仓库并将其部署到Vercel。
- ✅ 包含原始“博客”模板的所有功能。
- ✅ 移动端布局优化。
- ✅ 支持Astro内置分页与文章置顶。
- ✅ 集成Waline评论系统。
- ✅ 支持黑暗模式。
- ✅ 国际化(i18n)路由支持。
- ✅ 添加了许多新页面,例如:友链、归档、标签、留言板等。
该模板包含以下文件夹和文件:
│ astro.config.mjs
│ package.json
│ tsconfig.json
└───src
│ env.d.ts
├───components
│ BaseHead.astro
│ BlogPostLicense.astro
│ Footer.astro
│ FormattedDate.astro
│ Header.astro
│ HeaderLink.astro
│ LanguageSelector.astro
│ MainBlogHead.astro
│ MobileMenu.astro
│ SinglePageHead.astro
│ ThemeIcon.astro
│ WalineComment.astro
├───content
│ │ config.ts
│ ├───draft
│ └───{lang}
├───layouts
│ BlogPost.astro
├───locales
│ └───{lang}
│ friends.json
│ translation.json
├───pages
│ │ index.astro
│ ├───{lang}
│ │ │ about.astro
│ │ │ archives.astro
│ │ │ friends.astro
│ │ │ index.astro
│ │ │ messageBoard.astro
│ │ │ tags.astro
│ │ │ [...slug].astro
│ │ │ [page].astro
│ │ └───tags
│ │ [tag].astro
│ └───rss
│ └───{lang}.xml.js
└───styles
global.css
main-blog.css
single-page.css-
Astro会在
src/pages/目录中查找.astro或.md文件。每个文件根据其文件名生成一个路由。 -
components文件夹包含了许多复用率高的组件。要开发新的组件,您可以在此文件夹中添加.astro文件,并在需要的地方导入它。 -
对于国际化,此模板默认支持三种语言:zh-hans(简体中文)、zh-hant(繁体中文)和en(英语)。要添加新的语言,例如日语,您需要在
pages、content和locales目录中创建一个名为"jp"的新文件夹。此外,在src/pages/rss中添加一个jp.xml.js文件。最后,在/src/locales/jp中添加translation.json和friends.json,并添加您的内容翻译。 -
src/content/目录包含相关的Markdown和MDX文档的“集合”。Astro使用getCollection()从src/content/blog/中检索文章,并使用可选的模式进行前置数据的类型检查。有关更多详细信息,请参阅Astro的内容集合文档。 -
任何静态资源,如字体和图像,应该放置在
public/目录中。
此主题基于Astro的官方博客模板。在开发过程中,Astro的官方文档帮助我解决了许多问题。
