astro theme cactus
v5.0.0
Astro Cactus 是一个使用 Astro 框架构建的简单的固执的启动器。用它来创建易于使用的博客或网站。
查看 Netlify 上托管的演示
从此模板创建一个新的存储库。
# npm 7+
npm create astro@latest -- --template chrismwilliams/astro-theme-cactus
# pnpm
pnpm dlx create-astro --template chrismwilliams/astro-theme-cactus将 pnpm 替换为您选择的 npm/yarn
| 命令 | 行动 |
|---|---|
pnpm install | 安装依赖项 |
pnpm dev | 在localhost:3000启动本地开发服务器 |
pnpm build | 将您的生产站点构建到./dist/ |
pnpm postbuild | Pagefind 脚本用于构建博客文章的静态搜索 |
pnpm preview | 在部署之前在本地预览您的构建 |
pnpm sync | 根据src/content/config.ts中的配置生成类型 |
src/site.config.ts以获取基本站点元数据astro.config.ts/public文件夹中的文件：src/styles/global.css 。src/site.config.ts中找到。您可以在此处找到更多主题和选项。src/components/SocialList.astro中的社交链接以添加/替换您的媒体配置文件。可以根据 Astro Icon 的说明在 @ icones.js.org 找到图标。src/content/post/和src/content/note/中为您的博客创建/编辑帖子和注释。请参阅下文了解更多详情。src/pages/og-image/[slug].png.ts到标记函数，您可以根据需要编辑 html/tailwind-classes 。您可以使用这个游乐场来帮助您的设计。src/content/post/social-image.md中找到示例。有关 frontmatter 的更多信息可以在这里找到font-mono ，位于全局 css 文件src/styles/global.css中。您可以通过删除变体font-mono来更改字体，之后 TailwindCSS 将默认为font-sans字体系列堆栈。 如果您已分叉模板，则可以将分叉与您自己的项目同步，请记住不要单击“放弃更改”，因为您将丢失自己的更改。
如果您有模板存储库，则可以将此模板添加为远程模板，如此处所述。
该主题利用 Content Collections 组织本地 Markdown 和 MDX 文件，并使用 schema -> src/content/config.ts对 frontmatter 进行类型检查。
添加帖子/注释就像将 .md(x) 文件添加到src/content/post和/或src/content/note文件夹一样简单，其文件名将用作 slug/url。此模板中包含的帖子是如何构建 frontmatter 的示例。此外，Astro 文档有关于 Markdown 页面的详细部分。
| 财产（* 必填） | 描述 |
|---|---|
| 标题 * | 不言自明。用作帖子的文本链接、帖子页面上的 h1 以及页面标题属性。最大长度为 60 个字符，在src/content/config.ts中设置 |
| 描述 * | 与上面类似，用作 seo 描述属性。最小长度为 50 个字符，最大长度为 160 个字符，在帖子架构中设置。 |
| 发布日期 * | 又很简单。要更改日期格式/区域设置（当前为en-GB ） ，请更新src/site.config.ts中的日期选项。请注意，如果需要，您还可以将其他选项传递给组件<FormattedDate> 。 |
| 更新日期 | 这是一个可选日期，表示帖子的更新时间，格式与发布日期相同。 |
| 标签 | 任何创建的帖子的标签都是可选的。任何新标签都将显示在yourdomain.com/posts和yourdomain.com/tags中，并生成页面yourdomain.com/tags/[yourTag] |
| 封面图片 | 这是一个可选对象，它将在帖子顶部添加封面图像。包含src ：“图像路径”和alt ：“图像 alt ”。您可以在src/content/post/cover-image.md中查看示例。 |
| 图像 | 这是一个可选属性。如果未提供此属性，将为每个帖子自动生成 OG 图像。如果您想为特定帖子创建自己的主题，请包含此属性和图像链接，主题将跳过自动生成主题。 |
| 草稿 | 这是一个可选属性，因为它在架构中默认设置为 false。通过添加 true，该帖子将在许多地方从生产版本中过滤掉，包括。 getAllPosts() 调用、og-images、RSS feed 和生成的页面。您可以在src/content/post/draft-post.md中查看示例 |
| 财产（* 必填） | 描述 |
|---|---|
| 标题 * | 字符串，最大长度 60 个字符。 |
| 描述 | 用于头部元描述属性。 |
| 发布日期 * | ISO 8601 格式，允许偏移。 |
Astro Cactus 包含一个有用的 VSCode 片段，它为帖子和注释创建一个 frontmatter“存根”，可在此处找到 -> .vscode/post.code-snippets 。开始在新创建的 .md(x) 文件中输入单词frontmatter以触发它。 Visual Studio 代码片段在 Mac 上通过 (⌃Space)、在 Windows 上通过 (Ctrl+Space) 显示在 IntelliSense 中。
这种集成带来了用于搜索博客文章和笔记的静态搜索功能。在目前的形式中，pagefind 仅在网站建立后才起作用。该主题添加了一个构建后脚本，该脚本应在 Astro 构建网站后运行。您可以通过运行构建和构建后进行本地预览。
搜索结果仅包括帖子和注释的页面。如果您想包含其他/所有页面，请将属性data-pagefind-body删除/重新定位到src/layouts/BlogPost.astro和src/components/note/Note.astro中找到的文章标签。
它还允许您通过在博客文章的 frontmatter 中添加的标签来过滤文章。如果您想删除它，请从src/components/blog/Masthead.astro的链接中删除数据属性data-pagefind-filter="tag" 。
如果您不想包含此集成，只需删除组件src/components/Search.astro ，然后从 package.json 中卸载@pagefind/default-ui和pagefind即可。您还需要从此处删除构建后脚本。
您可以通过延迟加载 Web 组件样式来减少 css 的初始 css 负载，如此处所示。
您可能想要跟踪博客/网站的访问者数量，以便了解趋势和您创建的热门帖子/页面。人们可以使用许多提供商，包括 vercel、netlify 和 cloudflare 等 Web 主机。
该主题/模板不包含特定的解决方案，因为存在一些人可能会或可能不会使用的许多用例和/或选项。
设置时，您可能会被要求在网站的HEAD标签内包含一个片段，该片段可以在src/layouts/Base.astro中找到。或者，您可以在src/components/BaseHead.astro中添加代码片段。
Astro 文档有一个很棒的部分，详细介绍了如何在各种平台上部署您自己的 Astro 网站及其特性。
默认情况下，站点将构建到/dist目录（请参阅上面的命令部分）。
这个主题的灵感来自 Hexo 主题 Cactus
麻省理工学院
