
前言
这个博客模板是用 Astro + Fuwari 构建的。对于本指南中未提及的内容,您可以在 Astro 文档 中找到答案。
你需要准备的东西
- 一个会动的脑子,支持并行运算至少两个单位以上的事件。遇到问题先思考,想不通就搜索,搜索不到就去和AI调情,不要上来就问问问
- Git:版本控制器,这里用于对Github进行操作,可参见Git使用指南
- Node.js — Run JavaScript Everywhere:Fuwari基于Node.js,你需要安装这个来搭建博客
- Visual Studio Code - 代码编辑:因为Fuwari的每一篇文章/页面都是MarkDown,所以需要一个好用的编辑器
- 一个Github账号:用于创建一个代码仓库存放Fuwari文件
- 你得会用MarkDown语法来编写文章,如果你不会可以参见:Markdown 基本语法 | Markdown 官方教程
部署
推荐【使用此模板】创建相关仓库
-
然后将仓库克隆到本地:
git clone <你的仓库URL>
(推荐使用SSH,可以不用魔法来推送更改)也可以在vscode中使用git拉取仓库直接管理 -
首先,全局安装pnpm:
npm install -g pnpm
(如果npm国内拉取过慢,请尝试cnpm:npmmirror 镜像站) -
然后在项目根目录安装依赖:
pnpm install
和pnpm add sharp
命令 | 行动 |
---|---|
pnpm install和pnpm add sharp | 安装依赖项 |
pnpm dev | 启动本地开发服务器localhost:4321 |
pnpm build | 构建您的生产站点./dist/ |
pnpm preview | 在部署之前在本地预览您的构建 |
pnpm new-post | 创建新帖子 |
pnpm astro … | 运行 CLI 命令astro add,例如astro check |
pnpm astro —help | 获取使用 Astro CLI 的帮助 |
- 至此,你即可通过
pnpm dev
在本地部署Fuwari,地址栏输入localhost:4321
即可直接访问该博客
TIP你也可以使用创建一个新的空仓库然后手动上传文件,并且可以将仓库可见性设为:
Private
改写Fuwari的基本信息并且清理多余文件
刚创建的Fuwari可能带有一些示例的博主名,ICON,URL,介绍和示例文章,为了让用户知道这是你的博客,我们需要一一改写
- 在根目录下的
src
文件夹中,你可以找到config.ts
来开始改写title
:你的博客主标题subtitle
:你的博客副标题。可选,在首页会显示为“主标题 - 副标题”lang
:博客显示语言。注释已经列出了一些常用的值,如:en, zh_CN, zh_TW, ja, kothemeColor
:hue值则是你的博客主题色,可以在你的博客右上角的画板图标确定喜欢的颜色再填写banner
:src:即banner图片,支持http/https URLfavicon
:src:即网站图标,支持http/https URLlinks
:即友情链接,这些链接在导航栏上avatar
:即你的头像name
:即你的名字bio
:即个性签名,会显示在头像和名字下面NavBarConfig
为导航栏设置的超链接。ProfileConfig
为你的用户的超链接,分别如图icon
:你需要前往 icones.js 去搜索你想要的图标,比如QQ,则填写fa6-brands:qq
,如图。Fuwari默认支持这几种类型:fa6-brands
,fa6-regular
,fa6-solid
,material-symbols
。可以在项目根目录终端输入pnpm add -D @iconify-json/fa6-brands
即可安装相关依赖,然后在 astro.config.mjs 中搜索关键字进行配置- 提供一份添加了注释的
config.ts
import type { LicenseConfig, NavBarConfig, ProfileConfig, SiteConfig,} from "./types/config";import { LinkPreset } from "./types/config";
export const siteConfig: SiteConfig = { title: "你的标题", subtitle: "你的副标题", lang: "en", // 'en', 'zh_CN', 'zh_TW', 'ja', 'ko', 'es', 'th' themeColor: { hue: 250, // 主题色的默认色调,范围从0到360。例如:红色:0,青色:200,青蓝色:250,粉色:345 fixed: false, // 隐藏访客的主题色选择器 }, banner: { enable: false, src: "assets/images/demo-banner.png", // 相对于 /src 目录。如果以 '/' 开头,则相对于 /public 目录 position: "center", // 对应于 object-position,仅支持 'top'、'center'、'bottom'。默认为 'center' credit: { enable: false, // 显示横幅图片的署名文字 text: "", // 要显示的署名文字 url: "", // (可选) 链接到原始艺术作品或艺术家页面 }, }, toc: { enable: true, // 在文章右侧显示目录 depth: 2, // 显示的最大标题深度,从1到3 }, favicon: [ // 留空此数组以使用默认的图标 // { // src: '/favicon/icon.png', // 图标路径,相对于 /public 目录 // theme: 'light', // (可选) 仅当您有浅色和深色模式的图标时设置,值为 'light' 或 'dark' // sizes: '32x32', // (可选) 图标大小,仅当您有不同大小的图标时设置 // } ],};
export const navBarConfig: NavBarConfig = { links: [ LinkPreset.Home, LinkPreset.Archive, LinkPreset.About, { name: "GitHub", url: "https://github.com/saicaca/fuwari", // 内部链接不应包含基础路径,因为它会自动添加 external: true, // 显示外部链接图标并在新标签页中打开 }, ],};
export const profileConfig: ProfileConfig = { avatar: "assets/images/demo-avatar.png", // 相对于 /src 目录。如果以 '/' 开头,则相对于 /public 目录 name: "Lorem Ipsum", //主页名字 bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", links: [ { name: "Twitter", icon: "fa6-brands:twitter", // 访问 https://icones.js.org/ 获取图标代码 // 如果未包含相应图标集,则需要安装它 // `pnpm add @iconify-json/<icon-set-name>` url: "https://twitter.com", }, { name: "Steam", icon: "fa6-brands:steam", url: "https://store.steampowered.com", }, { name: "GitHub", icon: "fa6-brands:github", url: "https://github.com/saicaca/fuwari", }, ],};
export const licenseConfig: LicenseConfig = { enable: true, name: "CC BY-NC-SA 4.0", url: "https://creativecommons.org/licenses/by-nc-sa/4.0/",};
- 清理多余文件。在根目录下的
src/content/posts
文件夹中会有一些示例文章,这些文章介绍了一些MarkDown语法和技巧,可以让你更快上手astro和fuwari,我们可以将其保存到别处 可以酣畅淋漓的码字了
让我们开始写作!
首先,在项目根目录终端执行:pnpm new-post <这里填写你的文章标题>
然后,在根目录下的 src/content/posts
文件夹中会多出一个xxx.md
文件
我们使用VSCode打开这个文件,你可以看到一些基本信息,我们只需要关注几个重要的信息
文章的前置元数据
---title: 我的第一个博客文章published: 2023-09-09description: 这是我的新 Astro 博客的第一篇文章。image: ./cover.jpgtags: [Foo, Bar]category: 前端draft: falselang: enpinned: truecomments: trueseries: ""---
属性 | 描述 |
---|---|
title | 文章的标题。 |
published | 文章发布的日期。 |
description | 文章的简短描述。显示在索引页面上。 |
image | 文章的封面图片路径。 1. 以 http:// 或 https:// 开头:使用网络图片2. 以 / 开头:用于 public 目录中的图片3. 无前缀:相对于 Markdown 文件 |
tags | 文章的标签。 |
category | 文章的分类。 |
draft | 如果这篇文章仍然是草稿,则不会显示 |
lang | 文章的语言与博客语言不同时需要填写 |
pinned | 文章是否置顶于博客首页 |
comments | 文章是否开启评论功能 |
series | 文章被分配到的系列名 |
NOTE以上内容为后续添加内容 请点击相关页面查看如何修改
放置文章文件的位置
您的文章文件应放置在 src/content/posts/
目录中。您还可以创建子目录来更好地组织您的文章和资源。
src/content/posts/├── post-1.md└── post-2/ ├── cover.png └── index.md
站点URL修改
我们还需要更改根目录下的 astro.config.mjs
。在第34行更改 stie: 为你的站点URL,如: site: "https://p1ume.vercel.app"
// https://astro.build/configexport default defineConfig({ site: "https://p1ume.vercel.app/", //修改的站点地址 base: "/", trailingSlash: "always", integrations: [ tailwind({ nesting: true, }),
图片置入
欸?有的人就会问了,MarkDown固然好,但是我要如何处理图片的置入呢?,很简单直接往VSCode的IDE中粘贴图片即可在该文章目录处复制一份图片,参考放置文章文件的位置,要做好文件管理嗷
NOTE记得在vscode中安装
Markdown all in one
astro
Biome
插件嗷
TIP本地图片塞太多会显得项目愈发臃肿,有能力最好搭建一个线上图床进行调用
本地预览(preview)
- 当你觉得文章已经写得差不多时,想要看看效果?请到项目根目录执行:
pnpm dev
,稍等片刻,你就可以通过localhost:4321
本地预览你的博客啦 - 好!接下来我们需要使用Git将我们所做的更改发布到Github
- 首先,你需要让Git知道你是谁:
git config --global user.name "你的Github用户名"
和git config --global user.email "你的Github邮箱@example.com"
- 然后,更改远程仓库为ssh*(如果是通过ssh克隆的不用改):
git remote set-url origin git@github.com:xxx/xxx
- 随后,让我们提交所有文件:
git add
. - 之后,让我们发布一个本地提交:
git commit -m "项目初始化"
- 最后,让我们将本地更改提交到远程仓库:
git push
。此时,你的Github仓库应该已经有了新的提交
- 首先,你需要让Git知道你是谁:
构筑(Build)
在终端执行pnpm build
即可开始构建目录dist,随后将dist目录下的内容丢到服务器/Vercel/CloudFlare等地后绑定域名即可通过域名/IP访问你的博客辣
格式化(Format)
在终端执行 npx biome check --fix
即可格式化除md文档外的astro相关文件,这对于主动对fuwari进行修改的用户相当重要,biome 2.0
对代码的格式要求更加严格
.md
文档的格式化使用 vscode
的 markdown
拓展 即可在保存时自动处理相关格式
升级到最新版本
为什么要更新?
补丁更改是最小干扰的更改。它们不会改变你使用 Astro 的方式,当你更新时也不需要对你的代码进行任何更改。
当 Astro 发布一个“补丁”版本时,最后的数字会增加。(例如,astro@4.3.14 -> astro@4.3.15)
可能出于以下原因发布补丁:
不改变 Astro 功能的内部变更:
重构
性能提升
增加或改变测试覆盖率
与声明的文档和预期行为保持一致
日志和错误消息的改进。
发布失败后的重新发布。
补丁更改还包括大多数 bug 修复
,即使在用户利用现有的非预期或不希望的行为的情况下也是如此。
同时升级 Astro 及其官方集成,仅需在终端执行pnpm dlx @astrojs/upgrade
写作
向你的网站添加内容
TIPAstro 包含了 GitHub 风格的 Markdown,它结合了为内容设计熟悉的书写格式、 Astro 组件语法以及架构的灵活性。
自定义你的fuwari
添加到各个组件的api
一言API
插入到合适的地方(astro组件)即可
<p>:D 获取中...</p><script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
或者
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
随机图
<img src="https://t.mwm.moe/pc"># 备份 https://t.mwm.moe/pc | https://imgapi.xl0408.top/index.php
建站天数信息
在对应的页脚中插入以下代码即可实现。
<span id="runtime_span" style="text-align: center;"></span> <script type="text/javascript"> function show_runtime() { window.setTimeout("show_runtime()", 1000); X = new Date("20XX/XX/XX 12:00:00"); Y = new Date(); T = (Y.getTime() - X.getTime()); M = 24 * 60 * 60 * 1000; a = T / M; A = Math.floor(a); b = (a - A) * 24; B = Math.floor(b); c = (b - B) * 60; C = Math.floor((b - B) * 60); D = Math.floor((c - C) * 60); runtime_span.innerHTML = "⏱️本站已运行 " + A + "天" + B + "小时" + C + "分" + D + "秒" } show_runtime(); </script>