Skip to content

README.zh-CN.md

Latest commit

 

History

History
230 lines (163 loc) · 6.58 KB

README.zh-CN.md

File metadata and controls

230 lines (163 loc) · 6.58 KB
一个简洁、优雅、快速的静态博客模板！🚀 使用 Astro 开发
Frosti Logo

license   release   stackblitz

🖥️ Frosti Demo   /   🌏 中文 README   /   ❤️ My Blog

📷 预览

preview

✨ 特点

  • ✅ 白天 / 黑夜 模式可用
  • ✅ 极速的访问速度与优秀的 SEO
  • ✅ 视图过渡动画（使用 ClientRouter）
  • ✅ 您可以搜索您的文章（使用 Pagefind）
  • ✅ 使用 Tailwind CSS 与 daisyUI 构建自适应页面
  • ✅ RSS 订阅支持
  • 🛠️ 博客易上手
    • 可以在 frosti.config.yaml 自定义您博客的内容

💬 评论系统

✒️ 文章信息

名称 含义 是否必要
title 文章标题 是
description 文章简介 是
pubDate 文章日期 是
image 文章封面 否
categories 文章分类 否
tags 文章标签 否
badge 文章徽标 否
draft 草稿状态 否

Tip

  • 您可以通过把 badge 属性设置为 Pin 来置顶您的文章
  • 设置 draft: true 可将文章标记为草稿，草稿文章不会在列表显示

⬇️ 使用方法

  1. 安装pnpm包管理器（如果您没有安装过的话）
npm i -g pnpm
  1. 克隆项目
git clone https://github.com/EveSunMaple/Frosti.git Frosti
  1. 进入项目文件夹
cd Frosti
  1. 安装依赖
pnpm i
  1. 调试、运行项目

首次运行或更新内容后，请先执行 search:index 来生成搜索索引：

# 生成搜索索引以供开发时使用
pnpm run search:index

pnpm run dev

🔧 配置

Frosti 使用 frosti.config.yaml 作为配置文件，您可以在此文件中配置网站的基本信息、导航栏、页脚等内容。

网站基本信息 (site)

site:
  tab: Frosti # 浏览器标签栏上显示的文本
  title: Frosti # 网站的主标题
  description: A clean, elegant, and fast static blog template! # 网站描述，用于SEO
  language: en # 网站的语言代码，如"en"表示英文，"zh"表示中文
  favicon: /favicon.ico # 网站图标路径

主题设置 (theme)

theme:
  light: winter # 浅色模式的主题，基于daisyUI的主题
  dark: dracula # 深色模式的主题，基于daisyUI的主题
  code: github-dark # 代码块的主题样式
  • 主题基于 daisyUI 提供的主题选项
  • 代码块主题使用 Shiki 提供的样式

日期格式 (date_format)

date_format: ddd MMM DD YYYY # 日期显示格式

菜单配置 (menu)

menu:
  - id: home # 菜单项唯一标识符
    text: Home # 菜单显示的文本
    href: / # 链接地址
    svg: "material-symbols:home-outline-rounded" # 图标
    target: _self # 链接打开方式

每个菜单项包含以下属性：

  • id: 唯一标识符
  • text: 显示的文本
  • href: 链接地址
  • svg: 图标代码，使用 Iconify 的图标集
  • target: 链接打开方式(_self当前窗口或_blank新窗口)

子菜单项 (subItems)

您可以通过添加 subItems 配置子菜单项，格式与主菜单项相同。

用户信息 (user)

user:
  name: EveSunMaple # 用户名称
  site: "https://example.com" # 用户网站
  avatar: /profile.png # 用户头像

社交媒体配置 (social)

侧边栏和页脚可以配置不同的社交媒体链接：

sidebar:
  social:
    - href: "https://github.com/username" # 链接地址
      ariaLabel: Github # 无障碍标签
      title: Github # 鼠标悬停时的提示
      svg: "ri:github-line" # 图标代码

图标设置 (icon)

Frosti 使用 Iconify 作为图标库。您可以在其网站上搜索您喜欢的图标，然后复制图标的代码到配置文件中的 svg 字段。

语言设置 (language)

Frosti 支持多语言，通过以下方式配置：

  1. 在 frosti.config.yaml 中设置网站默认语言：
site:
  language: zh # 设置为 "zh" 使用中文，"en" 使用英文
  1. 通过 src/i18n/translations.yaml 文件管理所有界面文本翻译：
en: # 英文翻译
  label:
    noTag: No tags assigned
    tagCard: Tags
    # 其他英文标签...

zh: # 中文翻译
  label:
    noTag: 未分配标签
    tagCard: 标签
    # 其他中文标签...

添加或修改翻译

要添加新的语言支持或修改现有翻译：

  1. 在 translations.yaml 文件中添加新的语言代码和对应翻译，或修改现有翻译
  2. 在 frosti.config.yaml 中更改 site.language 为您要使用的语言代码

🚀 自动更新

为了让您的项目与 Frosti 的最新版本保持同步，您可以使用我们提供的更新脚本。

bash frosti.update.sh

该脚本将：

  1. 克隆最新版本 的 Frosti 仓库。
  2. 安全地更新 您的项目文件，根据 .updateignore 文件添加和覆盖文件。
  3. 智能地删除 官方仓库中已移除的文件，而不会影响您忽略的文件。
  4. 清理 任何残留的空文件夹和临时文件。
  5. 使用 pnpm 安装或更新 依赖项。

👀 问题

如果您有任何问题或建议，可以通过提交 Issues 来反馈或同开发者交流！

🎉 感谢

@Saicaca 他的启迪是我制作此主题的主要原因

@WRXinYue 在我前期入门时帮助了我很多