事先准备#

一个善于思考问题脑子，最好是多核心的那种，并且遇到问题会自己先思考
一个Github账号
Git - Downloads (git-scm.com)：提交代码用的
Node.js — Run JavaScript Everywhere (nodejs.org)：Fumomo基于Node.js，你一定要安装这个
一个Vercel账号：用于托管
一个编辑器，比如VSCode

流程图#

本地预览与修改 -> 推送更改到远程Github仓库 -> Vercel检测到仓库更新自动构建新的网站静态文件 -> 网站成功更改

本地部署教程#

下载源代码！

GitHub - Hakutyan-bai/Fumomo-nuxt

Contribute to Hakutyan-bai/Fumomo-nuxt development by creating an account on GitHub.

github.com

Contribute to Hakutyan-bai/Fumomo-nuxt development by creating an account on GitHub.

1
cd Fumomo-nuxt
2

3
#全局安装pnpm，装过的可以不装
4
npm install -g pnpm
5

6
#安装项目依赖
7
pnpm i

启动项目

1
#启动项目dev环境
2
pnpm dev

在浏览器输入控制台输出的网址即可预览

修改基本信息#

在”fumomo-nuxt/app/config”有一个”index.ts”文件，这里控制着个人主页的基本信息,也写了较为详细的注释

1
// ========================================
2
//  Fumomo 网站配置文件
3
// ========================================
4
//
5
// 这个文件包含了网站的所有配置信息。你可以通过修改这些值来：
6
// 更改网站标题和描述
7
// 设置文章RSS订阅地址
8
// 自定义首页内容和介绍
9
// 修改个人信息和社交链接
10
// 调整主题色彩和样式
11
//
12
// 修改后保存文件，网站会自动更新！
13
// ========================================
14

15
// 网站配置文件 - 集中管理所有网站设置
16
export const siteConfig = {
17
  // ========================================
18
  // 🌟 核心网站设置 - 最重要的配置
19
  // ========================================
20
  site: {
21
    // 网站标题 - 显示在浏览器标签页和导航栏
22
    title: "Haku Fumomo-Nuxt",
23

24
    // 网站副标题 - 显示在首页标题下方
25
    subtitle: "你好，欢迎来到Haku的个人主页Fumomo！",
26

27
    // 网站描述 - 用于SEO和社交媒体分享
28
    description: "欢迎来到Haku Fumomo的温柔世界，在这里分享技术、生活和思考",
29

30
    // 网站URL - 完整的域名地址
31
    url: "https://haku.sakura.ink",
32

33
  },
34

35
  // ========================================
36
  // 文章设置 - 配置文章来源
37
  // ！！！如果要订阅文章请在server/api/rss.get.ts中修改订阅链接！！！
38
  // ========================================
39
  articles: {
40

41

42
    // 文章页面标题
43
    pageTitle: "我的文章",
44

45
    // 文章页面描述
46
    pageDescription: "技术分享与生活感悟",
47

48
    // 每页显示文章数量
49
    postsPerPage: 10,
50

51
    // 文章来源说明
52
    sourceDescription: "文章内容来自我的博客"
53
  },
54

55
  // ========================================
56
  // 首页内容设置 - 自定义首页展示
57
  // ========================================
58
  home: {
59
    // 主标题（通常使用site.title）
60
    mainTitle: "Fumomo",
61

62
    // 欢迎语句
63
    welcomeText: "一个充满温暖与创意的小窝",
64

65
    // 首页特色介绍卡片 - 可以自由修改图标、标题和描述
66
    features: [
67
      {
68
        title: "技术分享",
69
        description: "分享编程技巧、框架使用心得和技术思考"
70
      },
71
      {
72
        title: "生活记录",
73
        description: "记录日常生活中的美好瞬间和感悟"
74
      },
75
      {
76
        title: "创意项目",
77
        description: "展示个人项目和创意作品"
78
      }
79
    ]
80
  },
81

82
  // ========================================
83
  // 页面配置
84
  // ========================================
85
  pages: {
86
    home: {
87
      title: "首页",
88
    },
89
    articles: {
90
      title: "我的文章",
91
      description: "技术分享与生活感悟"
92
    },
93
    about: {
94
      title: "关于",
95
    },
96
    projects: {
97
      title: "项目作品",
98
      description: "我的一些项目作品"
99
    },
100
    website: {
101
      title: "我的网站",
102
      description: "正在运行的网站信息"
103
    }
104
  },
105

106
  // ========================================
107
  // 个人信息设置
108
  // ========================================
109
  personal: {
110
    // 基本信息
111
    name: "Haku",
112
    bio: "平时喜欢整点新奇玩意，喜欢做点小项目。",
113
    hobby: "编程开发、网页设计",
114
    location: "广东深圳",
115
    learning: "Astro、VUE、C#",
116
    avatar: "https://q2.qlogo.cn/headimg_dl?dst_uin=2731443459&spec=5",
117

118
    // 关于页面社交媒体链接
119
    social: {
120
      github: "https://github.com/Hakutyan-bai",
121
      email: "lzj159035@foxmail.com"
122
    }
123
  },
124

125
  // ========================================
126
  // 网站UI设置
127
  // ========================================
128

129

130
  // 导航菜单
131
  navigation: [
132
    { name: "首页", href: "/", key: "home"},
133
    { name: "文章", href: "/articles", key: "articles"},
134
    { name: "关于", href: "/about", key: "about"},
135
    { name: "项目", href: "/projects", key: "projects"},
136
    { name: "网站", href: "/website", key: "website"}
137
  ],
138

139
  // 主题配置
140
  theme: {
141
    primaryColor: "#8b5a8c",
142
    secondaryColor: "#f0f9ff",
143
    accentColor: "#ffeef8",
144
    textColor: "#666",
145
    fontFamily: "'Comic Sans MS', 'XiaokeNailao', cursive, sans-serif"
146
  },
147

148
  // ========================================
149
  // Umami统计配置 - 记得在layout插入Umami的脚本
150
  // ========================================
151
  umami: {
152
    enable: false, // 是否显示umami统计
153
    shareId: "VAARDWeRY31dw6ug", // 填入共享URL最后面那一串  比如：https://eu.umami.is/api/share/2dKQ5T0WrUn6AYtr 你就填入2dKQ5T0WrUn6AYtr
154
    region: "eu", // Umami有两个区域，按需选择即可  比如：https://eu.umami.is 你就填入eu
155
  },
156
};
157

158
// ========================================
159
// 类型定义和辅助函数
160
// ========================================
161

162
// 页面类型定义
163
export type PageKey = keyof typeof siteConfig.pages;
164

165
// 获取页面配置的辅助函数
166
export function getPageConfig(pageKey: PageKey) {
167
  return siteConfig.pages[pageKey];
168
}
169

170
// 获取页面标题的辅助函数
171
export function getPageTitle(pageKey: PageKey) {
172
  return siteConfig.pages[pageKey].title;
173
}
174

175
// 获取社交媒体链接的辅助函数
176
export function getSocialLinks() {
177
  return Object.entries(siteConfig.personal.social).map(([platform, url]) => ({
178
    platform,
179
    url,
180
    name: platform.charAt(0).toUpperCase() + platform.slice(1)
181
  }));
182
}
183

184
// 获取网站完整标题的辅助函数
185
export function getFullTitle(pageTitle?: string) {
186
  return pageTitle ? `${pageTitle} - ${siteConfig.site.title}` : siteConfig.site.title;
187
}

文章订阅#

修改高亮部分内代码

1
import { XMLParser } from 'fast-xml-parser'
2

3
export interface RSSItem {
4
  title: string
5
  link: string
6
  pubDate: string
7
  description: string
8
  guid?: string
9
}
10

11
export interface RSSResponse {
12
  items: RSSItem[]
13
  total: number
14
  error?: string
15
}
16

17
export default defineEventHandler(async (event): Promise<RSSResponse> => {
18
  try {
19
    // 从配置中获取 RSS URL
20
    const rssUrl = 'https://blog.sakura.ink/rss.xml'//自定义文章的RSS地址
21

22
    // 获取 RSS 数据，设置超时和重试
23
    const response = await $fetch<string>(rssUrl, {
24
      timeout: 10000, // 10秒超时
25
      headers: {
26
        'User-Agent': 'Mozilla/5.0 (compatible; Nuxt RSS Reader; +https://haku.sakura.ink)',
27
        'Accept': 'application/rss+xml, application/xml, text/xml, */*'
28
      }
29
    })
30

31
    // 解析 XML
32
    const parser = new XMLParser({
33
      ignoreAttributes: false,
34
      attributeNamePrefix: '@_',
35
      textNodeName: '#text',
36
      parseTagValue: false,
37
      parseAttributeValue: false,
38
      trimValues: true,
39
      processEntities: true
40
    })
41

42
    const result = parser.parse(response)
43

44
    // 提取文章数据
45
    let items: RSSItem[] = []
46

47
    if (result.rss && result.rss.channel && result.rss.channel.item) {
48
      const rssItems = Array.isArray(result.rss.channel.item)
49
        ? result.rss.channel.item
50
        : [result.rss.channel.item]
51

52
      items = rssItems.map((item: any) => {
53
        // 清理描述内容，移除HTML标签
54
        let description = item.description || item['content:encoded'] || '暂无描述'
55
        if (typeof description === 'string') {
56
          description = description
57
            .replace(/<[^>]*>/g, '') // 移除HTML标签
58
            .replace(/&nbsp;/g, ' ') // 替换空格实体
59
            .replace(/&amp;/g, '&')  // 替换&实体
60
            .replace(/&lt;/g, '<')   // 替换<实体
61
            .replace(/&gt;/g, '>')   // 替换>实体
62
            .trim()
63
            .substring(0, 200) // 限制长度
64
        }
65

66
        return {
67
          title: item.title || '无标题',
68
          link: item.link || '#',
69
          pubDate: item.pubDate || new Date().toISOString(),
70
          description,
71
          guid: item.guid?.['#text'] || item.guid || item.link
72
        }
73
      })
74

75
      // 按日期排序，最新的在前
76
      items.sort((a, b) => new Date(b.pubDate).getTime() - new Date(a.pubDate).getTime())
77
    }
78

79
    return {
80
      items,
81
      total: items.length
82
    }
83

84
  } catch (error) {
85
    console.error('RSS 获取失败:', error)
86

87
    return {
88
      items: [],
89
      total: 0,
90
      error: `RSS 获取失败: ${error instanceof Error ? error.message : '未知错误'}`
91
    }
92
  }
93
})

我的项目&我的网站#

在app/pages目录下，分别是website.vue和projects.vue

我的历程&个人履历#

在app/components目录下，分别是Myjourney.vue和Qualification.vue

本地预览，然后发布到Github#

当你认为你修改得差不多时，想要看看效果？请到项目根目录执行：pnpm dev，稍等片刻，你就可以本地预览你的个人主页啦!
接下来我们要用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