关于这个博客主题

使用方法

• 下载安装

  下载或克隆本项目astro-blog，安装依赖：yarn install，确保 Node 版本>=20+。

• 文章目录

  将 Markdown 文件放入 posts 目录，或者 notes 目录，并修改 YAML 头信息 (添加 abbrlink 属性作为文章链接，或者参考下面的QA修改文章链接)。

• 基础配置

  constant.ts 文件中存放了一些常用的变量，如网站地址，标题，描述等信息，以及 public/ 目录下存放的静态资源包含网站图标，PWA 安装图标信息，可以根据需要改更。

• 本地运行

  yarn dev运行项目，访问 http://localhost:4321 即可看到博客页面。

创建文章

yarn run new --title='关于这个博客主题' --dir=drafts

你可以运行脚本快速创建一篇文章，以上命令会在 drafts 文件夹下创建一个名为 2024-11-14-关于这个博客主题.md 的文件，文件包含基本 YAML 头信息，并且创建一个唯一的属性 abbrlink，博客默认以该标识符作为文章的链接。

文章头信息

title: 关于这个博客主题
date: 2024-11-14T02:59:57.109Z
abbrlink: c3009907
tags:
- Astro
- Theme
- Blog
  description: '这是一个使用 Astro 框架搭建的播客，样式大量使用了 TailwindCSS，支持标签，toc, dark/light 模式，页面搜索，PWA 等功能，页面简单，响应式设计，适合个人博客使用。'
  cover: '@images/c3009907.png'

目录结构

src/
  assets/     # 博客模板使用静态资源
  data/       # 文章目录
  images/     # 文章图片资源
  components/
    content-render.astro  # 文章渲染组件 包含控制文章样式的 CSS 代码
    html-head.astro       # 博客页面的 HTML 头部组件
    nav-header.astro      # 导航栏组件
    post-list.astro       # 文章列表组件 (archive/tag 列表)
    basic/
      avatar-image.astro    # 头像组件
      theme-button.astro    # 切换主题按钮
      pagefind-search.astro # 页面搜索组件
      reload-prompt.astro   # PWA 刷新提示组件
      nav-link.astro        # 导航链接组件
      toc.astro             # TOC 组件
  ...
constants.ts  # 变量配置
generate.cjs  # 生成文章脚本

Markdown 特殊样式

A note¹

one or two tildes.

• Eat
• Sleep

This is a blockquote.
hello there