Fuwari+Vercel博客搭建教程#

基本信息设置#

• 博客标题设置

  • title：设置你的博客主标题
  • subtitle：设置博客副标题（可选）。这两个会在首页组合显示为”主标题 - 副标题”的形式

• 界面设置

  • lang：设置博客的显示语言
    • 支持的语言包括：英文(en)、简体中文(zh_CN)、繁体中文(zh_TW)、日语(ja)、韩语(ko)等
  • themeColor：设置博客的主题色
    • 你可以点击博客右上角的调色板图标，选择喜欢的颜色，然后填写对应的数值

图片和链接配置#

• 网站装饰

  • banner.src：设置网站顶部的横幅图片（支持 http/https 链接）
  • favicon.src：设置网站图标，就是浏览器标签页显示的小图标（支持 http/https 链接）
  • links：设置导航栏上的友情链接

• 个人信息

  • avatar：设置你的头像
  • name：填写你的名字
  • bio：设置个性签名，会显示在头像和名字的下方

导航栏和社交链接#

网站有两个主要的链接区域：

• NavBarConfig：配置导航栏的链接
• ProfileConfig：配置个人资料区域的社交媒体链接

图标设置#

Fuwari 内置了多种图标库支持：fa6-brands、fa6-regular、fa6-solid 和 material-symbols。

设置图标的步骤：

1. 访问 Iconify 网站
2. 搜索你想要的图标（比如 “bilibili”）
3. 复制图标的完整名称（如 fa6-brands:bilibili）
4. 粘贴到配置文件的 icon 字段中

提示：图标库已通过 @iconify-json/fa6-brands 预装，你可以直接使用，无需额外安装。

这里附上我的配置文件，供大家参考：

import type {
  LicenseConfig,
  NavBarConfig,
  ProfileConfig,
  SiteConfig,
} from './types/config'
import { LinkPreset } from './types/config'

export const siteConfig: SiteConfig = {
  title: '陌灬离的博客',
  subtitle: '心之所向',
  lang: 'zh_CN',         // 'en', 'zh_CN', 'zh_TW', 'ja', 'ko', 'es', 'th'
  themeColor: {
    hue: 112,         // Default hue for the theme color, from 0 to 360. e.g. red: 0, teal: 200, cyan: 250, pink: 345
    fixed: false,     // Hide the theme color picker for visitors
  },
  banner: {
    enable: true,
    src: 'assets/images/demo-banner.png',   // Relative to the /src directory. Relative to the /public directory if it starts with '/'
    position: 'center',      // Equivalent to object-position, only supports 'top', 'center', 'bottom'. 'center' by default
    credit: {
      enable: false,         // Display the credit text of the banner image
      text: '',              // Credit text to be displayed
      url: ''                // (Optional) URL link to the original artwork or artist's page
    }
  },
  toc: {
    enable: true,           // Display the table of contents on the right side of the post
    depth: 2                // Maximum heading depth to show in the table, from 1 to 3
  },
  favicon: [    // Leave this array empty to use the default favicon
    // {
    //   src: '/favicon/icon.png',    // Path of the favicon, relative to the /public directory
    //   theme: 'light',              // (Optional) Either 'light' or 'dark', set only if you have different favicons for light and dark mode
    //   sizes: '32x32',              // (Optional) Size of the favicon, set only if you have favicons of different sizes
    // }
  ]
}

export const navBarConfig: NavBarConfig = {
  links: [
    LinkPreset.Home,
    LinkPreset.Archive,
    LinkPreset.About,
    {
      name: 'GitHub',
      url: 'https://github.com/saicaca/fuwari',     // Internal links should not include the base path, as it is automatically added
      external: true,                               // Show an external link icon and will open in a new tab
    },
  ],
}

export const profileConfig: ProfileConfig = {
  avatar: 'assets/images/avatar.jpg',  // Relative to the /src directory. Relative to the /public directory if it starts with '/'
  name: '陌灬离',
  bio: 'A long way to go./还差的远！',
  links: [
    {
      name: 'Twitter',
      icon: 'fa6-brands:twitter',       // Visit https://icones.js.org/ for icon codes
      // You will need to install the corresponding icon set if it's not already included
      // `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/moli721',
    },
    {
      name: 'Bilibili',
      icon: 'fa6-brands:bilibili',
      url: 'https://space.bilibili.com/1920382429?spm_id_from=333.1007.0.0',
    },
  ],
}

export const licenseConfig: LicenseConfig = {
  enable: true,
  name: 'CC BY-NC-SA 4.0',
  url: 'https://creativecommons.org/licenses/by-nc-sa/4.0/',
}

创建新文章#

1. 打开终端，在项目根目录下执行以下命令来创建新文章：

   pnpm new-post "你的文章标题"

   执行后，系统会在 src/content/posts 目录下自动生成一个新的 .md 文件。

文章配置说明#

当你用 YankNote 打开新创建的文章，会看到文件头部有这样一段配置信息：

title: xxx
published: 2024-10-14
description: ''
image: ''
tags: []
category: ''
draft: false 
lang: ''

让我们来了解每个字段的含义：

• title：文章标题
• published：发布日期
• description：文章简介，会显示在文章列表中
• image：文章封面图片
  • 如果使用本地图片，需要以 ./ 开头
  • 例如：./assets/images/cover.webp
• tags：文章标签，可以添加多个
  • 例如：['教程', '博客', 'Fuwari']
• category：文章分类
• draft：是否为草稿（true/false）
• lang：文章语言（可选）

图片处理神器：YankNote 的使用技巧#

很多人会问：“用 Markdown 写作很好，但处理图片是不是很麻烦？” 别担心！YankNote 为我们提供了超简单的图片处理方案。

开始写作#

现在，你可以：

• 直接使用 Ctrl + V 粘贴图片
• 使用标准的 Markdown 语法写作
• 实时预览文章效果

有了这些设置，你就可以像使用普通文本编辑器一样流畅地创作博客文章了！