封面来源

瀬來ちゃん

NOTE

简单记录下自己使用Astro框架以及Fuwari主题搭建博客的过程以及踩过的坑

使用方法流程#

1. 使用此模板生成新仓库或 Fork 此仓库
2. 进行本地开发，Clone 新的仓库，并执行
   安装依赖 pnpm install pnpm add sharp
   若未安装 pnpm，执行→命令后，重新执行↑安装依赖 npm install -g pnpm
3. 通过配置文件 src/config.ts 自定义博客
4. 执行 pnpm new-post <filename> 创建新文章，并在 src/content/posts/ 目录中编辑
5. 参考官方指南将博客部署至 Vercel, Netlify, GitHub Pages 等
   部署前需编辑 astro.config.mjs 中的站点设置

更换npm/pnpm镜像源#

在国内因为众多原因，导致使用 npm/pnpm 进行包管理时，有时会遇到下载速度极慢或连接不稳定等问题
为了解决这个问题，可以更换镜像源

查看当前源 npm config get registry
更换为淘宝镜像源npm config set registry https://registry.npmmirror.com/
还原默认源npm config set registry https://registry.npmjs.org/

config.ts部分配置参考#

站点信息&顶部图

1
export const siteConfig: SiteConfig = {
2
  title: '你的标题',
3
  subtitle: '你的副标题',
4
  lang: 'zh_CN',  // 'en', 'zh_CN', 'zh_TW', 'ja', 'ko'
5
  themeColor: {  // 主题色部分，按个人喜好配置
6
    hue: 250,
7
    fixed: false,
8
  },
9
  banner: {
10
    enable: true,  // 是否开启顶部图
11
    src: 'assets/images/你的图片',  // 顶部图存放路径
12
    position: 'center',  //  defaults或者center
13
    credit: {
14
      enable: true,  // 是否显示顶部图文本描述
15
      text: '想显示的文本',  // 输入文本等描述
16
      url: 'https://xxxxxxxxxxxxx'  // 顶部图的来源url等
17
    }
18
  },

顶部导航栏github部分

1
export const navBarConfig: NavBarConfig = {
2
  links: [
3
    LinkPreset.Home,
4
    LinkPreset.Archive,
5
    LinkPreset.About,
6
    {
7
      name: 'GitHub',
8
      url: 'https://github.com/saicaca/fuwari',  // 想要跳转的url
9
      external: true,  //是否显示外部链接图标并将在新标签中打开
10
    },
11
  ],
12
}

左侧信息页配置

1
export const profileConfig: ProfileConfig = {
2
  avatar: 'assets/images/avatar.png',  // 头像图片文件路径
3
  name: 'AULyPc',     // 你的昵称
4
  bio: '这片大地...',  // 你的签名
5
  links: [           // 社交栏配置
6
    {
7
      name: 'Twitter',
8
      icon: 'fa6-brands:twitter',  // https://icones.js.org/ icon图标网站
9
      url: 'https://twitter.com/AULyPc1',
10
    },
11
    {
12
      name: 'Steam',
13
      icon: 'fa6-brands:steam',
14
      url: 'https://steamcommunity.com/profiles/76561198813644850/',
15
    },
16
    {
17
      name: 'GitHub',
18
      icon: 'fa6-brands:github',
19
      url: 'https://github.com/AULyPc',
20
    },
21
    {
22
      name: 'Email',
23
      icon: 'material-symbols:mail',
24
      url: 'mailto:cecilybenson8@gmail.com',
25
    },
26
  ],
27
}

文章Frontmatter#

执行 pnpm new-post <filename> 创建新文章页面后
就可以在 src/content/posts/ 目录中编辑你的第一篇文章了
文章需包含以下内容

1
---
2
title: My First Blog Post  <!-- 你的文章标题 -->
3
published: 2023-09-09  <!-- 文章发布时间 -->
4
description: This is the first post of my new Astro blog.  <!-- 简单描述你的文章，可有可无 -->
5
image: /images/cover.jpg  <!-- 文章主页的封面，可有可无 -->
6
tags: [Foo, Bar]  <!-- 文章标签 -->
7
category: Front-end  <!-- 文章分类 -->
8
draft: false  <!-- 文文章是否为草稿，默认false；设置为true后部署后不可见，但本地开发预览时仍可见 -->
9
language: ''  <!-- 可有可无，按需设置 -->
10
---

1
<style is:global>
2
  :root {
3
    --hue: var(--configHue);
4
    --page-width: 75rem; /*👈这里改全局页面宽度 */
5
  }
6
</style>