Astro/fuwai博客配置教程#

前言#

新博客站点部署也有2周多时间了，新站的访问量不是很多，但是我发现有人是用我的fuwai_zyplj仓库去修改配置然后再部署自己的博客，因为我个人喜欢对博客乱改，所以我这边出一个教程，来讲讲如何部署和我一样的博客。

本篇文章重点讲解博客配置！！！

为了方便大家使用我的仓库，我特意将原本的仓库改为私有，新建了一个公共的仓库，包括不限于没有我的文章、其他第三方配置。

我的博客只是在原作者fuwari仓库的基础上增加了：

音乐播放器
文章置顶固定（原作者仓库PR中的）
评论系统
友链页面
首图支持视频

如果对于上述功能不感兴趣的可以直接clone原作者的仓库。

页面基础配置#

大部分页面配置都在src/config.ts文件中完成,大部分配置都有注释。重点讲解我添加的配置。

将type设置为video，然后将src指向视频MP4格式的视频文件，注意视频文件放在 public/videos/ 目录下。

1
banner: {
2
    enable: true,
3
    src: "assets/images/banner.jpg", // Relative to the /src directory. Relative to the /public directory if it starts with '/'
4
    // 如果要使用MP4视频，可以这样配置：
5
    // src: "/videos/banner-video.mp4", // 视频文件放在 public/videos/ 目录下
6
    // type: "video", // 设置为视频类型
7
    position: "center", // Equivalent to object-position, only supports 'top', 'center', 'bottom'. 'center' by default
8
    type: "image", // Support 'image' or 'video' format
9
    credit: {
10
        enable: false, // Display the credit text of the banner image
11
        text: "", // Credit text to be displayed
12
        url: "", // (Optional) URL link to the original artwork or artist's page
13
    },
14
},

Microsoft Clarity 分析#

Microsoft Clarity是微软提供的用于网站流量分析的工具，如果用不上改成false即可，如果想用就需要去官网注册个账号：https://clarity.microsoft.com/

1
clarity: {
2
    enable: false, // 是否启用 Microsoft Clarity 分析
3
    projectId: "", // Clarity 项目 ID
4
},

音乐播放器#

在public/lib/MasterMusic.js中修改音乐数据源。

1
musicPlayer: {
2
    enable: true, // 是否启用音乐播放器
3
},

评论系统#

envId替换成你部署的评论系统的域名或者ip地址。

本博客集成的快速上手 | Twikoo 文档评论系统，如果想部署这个评论系统，官网的部署文档还是很详细的，推荐有服务器的人使用宝塔+Docker部署。

如果不想用或者部署不好评论系统，修改enable为false就能关闭评论。

1
export const commentConfig = {
2
  enable: true,
3
  provider: "twikoo",
4
  twikoo: {
5
    envId: "https://api.pljzy.top", // 移除末尾的斜杠
6
    region: "",
7
    lang: "zh-CN",
8
  },
9
};

如果发现评论系统没有出现，可能是CDN文件引入的问题，可以在src/components/Comment.astro组件中修改CDN文件路径。

1
// https://twikoo.js.org/frontend.html CDN指南
2
const script = document.createElement('script');
3
script.src = 'https://registry.npmmirror.com/twikoo/1.6.44/files/dist/twikoo.min.js'

友链页面#

src/content/spec/links.md友链页面其实就是md文件，如果有新的友链，将参考的div复制一份修改里面的内容就行了，对于没有评论系统的，也想使用友链，可以将自己仓库的issues地址放出来，让其他博主在github上体积issues来达到友链提交的效果

文章置顶#

pinned 属性设置为true即为置顶显示

1
---
2
title: ***文章标题
3
published: 2025-06-21 发布时间
4
description: 文章简介
5
image: ./5.png 文章首图,非必须可删除。
6
tags: [日常,测试] 文章标签 可多个
7
category: 记录生活 文章分类
8
draft: false
9
pinned: false 文章是否固定、置顶
10
---