关于这个博客主题

博客使用 Astro 框架，结合 TailwindCSS 样式，支持 Dark / Light 模式，页面搜索，PWA，以及响应式设计，支持移动端，轻量简洁，适合个人博客使用。

使用方法

• 下载安装

  下载或克隆本项目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/     # 博客模板使用静态资源
  content/    # 文章目录，包含drafts、posts、notes目录，posts和notes目录与config.ts对应
  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  # 生成文章脚本

QA

• 如何更换文章的链接？

  文章的链接默认由 abbrlink 属性决定，abbrlink 由脚本自动生成，如果未用脚本生成，可以手动在文章头信息中添加 abbrlink 属性。或者在 constant.ts 中通过函数getPostLink修改文章链接地规则。

• 如何更换博客字体？

  首先在需要在 components/html-head.astro 文件中删除引用的 google 字体，在 constant.ts 中globalVars修改相关内容。

• 其他问题—可以在issues中提出。