@mete0r/minimal-homepage 2.0.1 → 2.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README-en.md +277 -0
- package/main.config.js +75 -0
- package/package.json +5 -2
package/README-en.md
ADDED
|
@@ -0,0 +1,277 @@
|
|
|
1
|
+
# Personal Homepage Template (Vue 3 + Vite)
|
|
2
|
+
[中文版本](./README.md)
|
|
3
|
+
|
|
4
|
+
A personal homepage project built with Vue 3 + Vite + Tailwind CSS, supporting:
|
|
5
|
+
|
|
6
|
+
- Home / About Me route switching
|
|
7
|
+
- Light/Dark theme toggle (nice touch)
|
|
8
|
+
- Social link cards
|
|
9
|
+
- GitHub repository display (API mode / manual mode optional)
|
|
10
|
+
- RSS blog post fetching and display
|
|
11
|
+
- Global configuration (`main.config.js`)
|
|
12
|
+
|
|
13
|
+
## Preview
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## Table of Contents
|
|
18
|
+
|
|
19
|
+
- [Live Demo](#live-demo)
|
|
20
|
+
- [Features](#features)
|
|
21
|
+
- [Tech Stack](#tech-stack)
|
|
22
|
+
- [Quick Start](#quick-start)
|
|
23
|
+
- [Deployment Methods](#deployment-methods)
|
|
24
|
+
- [Configuration File Guide](#configuration-file-guide)
|
|
25
|
+
- [GitHub Repository Configuration (Important)](#github-repository-configuration-important)
|
|
26
|
+
- [RSS Configuration Guide](#rss-configuration-guide)
|
|
27
|
+
- [FAQ](#faq)
|
|
28
|
+
- [Open Source Tips](#open-source-tips)
|
|
29
|
+
|
|
30
|
+
## Live Demo
|
|
31
|
+
|
|
32
|
+
- `https://www.xscnet.cn`
|
|
33
|
+
|
|
34
|
+
## Features
|
|
35
|
+
|
|
36
|
+
1. Page Structure
|
|
37
|
+
- Home: Avatar/Bio, Social Section, Projects Section, Articles Section
|
|
38
|
+
- About Me: Separate route page
|
|
39
|
+
|
|
40
|
+
2. Animation Experience
|
|
41
|
+
- Route transition animations
|
|
42
|
+
- Article expand/collapse animations
|
|
43
|
+
- Theme toggle animations
|
|
44
|
+
- Heart effect on mouse click
|
|
45
|
+
|
|
46
|
+
3. Configuration-Driven
|
|
47
|
+
- Site title, favicon, background image
|
|
48
|
+
- Author info, navigation, social links
|
|
49
|
+
- GitHub repository source mode switching
|
|
50
|
+
- RSS URL and article cover strategy
|
|
51
|
+
|
|
52
|
+
## Tech Stack
|
|
53
|
+
|
|
54
|
+
- Vue 3
|
|
55
|
+
- Vue Router 4
|
|
56
|
+
- Vite 8
|
|
57
|
+
- Tailwind CSS 4
|
|
58
|
+
|
|
59
|
+
## Quick Start
|
|
60
|
+
|
|
61
|
+
### 1) Installation
|
|
62
|
+
#### Install via npm
|
|
63
|
+
1. Install
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
npm install @mete0r/minimal-homepage
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
2. Enter the project directory
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
cd @mete0r/minimal-homepage
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
3. Install dependencies
|
|
76
|
+
|
|
77
|
+
```bash
|
|
78
|
+
npm install
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
#### Install via Git
|
|
82
|
+
|
|
83
|
+
1. Clone the repository
|
|
84
|
+
|
|
85
|
+
```bash
|
|
86
|
+
git clone https://github.com/mete0rxsc/minimal-homepage.git
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
2. Enter the project directory
|
|
90
|
+
|
|
91
|
+
```bash
|
|
92
|
+
cd minimal-homepage
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
3. Install dependencies
|
|
96
|
+
|
|
97
|
+
```bash
|
|
98
|
+
npm install
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
### 2) Local Development
|
|
102
|
+
|
|
103
|
+
```bash
|
|
104
|
+
npm run dev
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
### 3) Production Build
|
|
108
|
+
|
|
109
|
+
```bash
|
|
110
|
+
npm run build
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### 4) Local Preview of Build Output
|
|
114
|
+
|
|
115
|
+
```bash
|
|
116
|
+
npm run preview
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
## Deployment Methods
|
|
120
|
+
|
|
121
|
+
### Method A: Static Hosting Platform (Recommended)
|
|
122
|
+
|
|
123
|
+
Suitable for Vercel / Netlify / Cloudflare Pages / GitHub Pages, etc.
|
|
124
|
+
|
|
125
|
+
- Build Command: `npm run build`
|
|
126
|
+
- Output Directory: `dist`
|
|
127
|
+
|
|
128
|
+
### Method B: Nginx / BT Panel / Cloud Server
|
|
129
|
+
|
|
130
|
+
1. Build locally:
|
|
131
|
+
|
|
132
|
+
```bash
|
|
133
|
+
npm run build
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
2. Upload the `dist` directory to your server's website root
|
|
137
|
+
3. Nginx Example (Required for History Mode Routing):
|
|
138
|
+
|
|
139
|
+
```nginx
|
|
140
|
+
location / {
|
|
141
|
+
try_files $uri $uri/ /index.html;
|
|
142
|
+
}
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
## Configuration File Guide
|
|
146
|
+
|
|
147
|
+
Core configuration file: [`main.config.js`](./main.config.js)
|
|
148
|
+
|
|
149
|
+
### `site`
|
|
150
|
+
|
|
151
|
+
```js
|
|
152
|
+
site: {
|
|
153
|
+
title: 'Website Title',
|
|
154
|
+
icon: 'Website Favicon URL',
|
|
155
|
+
background: 'Global Background Image URL'
|
|
156
|
+
}
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
### `author`
|
|
160
|
+
|
|
161
|
+
```js
|
|
162
|
+
author: {
|
|
163
|
+
name: 'Your Name',
|
|
164
|
+
avatar: 'Avatar URL',
|
|
165
|
+
intro: 'Homepage Bio',
|
|
166
|
+
aiPortrait: 'Character Image URL',
|
|
167
|
+
mbti: 'INTP',
|
|
168
|
+
aboutMeintro: 'About Me Description'
|
|
169
|
+
}
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
### `navLinks`
|
|
173
|
+
|
|
174
|
+
```js
|
|
175
|
+
navLinks: [
|
|
176
|
+
{ name: 'Home', url: '/' },
|
|
177
|
+
{ name: 'Social', url: '#socials' },
|
|
178
|
+
{ name: 'Projects', url: '#projects' },
|
|
179
|
+
{ name: 'Articles', url: '#articles' },
|
|
180
|
+
{ name: 'About Me', url: '/about' }
|
|
181
|
+
]
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
### `socials` / `footer`
|
|
185
|
+
|
|
186
|
+
- `socials` controls social cards
|
|
187
|
+
- `footer` controls footer text, ICP record number, bottom links
|
|
188
|
+
|
|
189
|
+
## GitHub Repository Configuration (Important)
|
|
190
|
+
|
|
191
|
+
`main.config.js -> github` supports two modes:
|
|
192
|
+
|
|
193
|
+
### Mode 1: Use GitHub API
|
|
194
|
+
|
|
195
|
+
```js
|
|
196
|
+
github: {
|
|
197
|
+
useGithubApi: true,
|
|
198
|
+
username: 'your-github-name',
|
|
199
|
+
maxRepos: 10,
|
|
200
|
+
excludeForks: true,
|
|
201
|
+
covers: {
|
|
202
|
+
'repo-name': 'https://example.com/repo-cover.jpg'
|
|
203
|
+
},
|
|
204
|
+
manualRepos: []
|
|
205
|
+
}
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
Description:
|
|
209
|
+
- Fetches repositories from `username`
|
|
210
|
+
- Displays star count
|
|
211
|
+
- `covers` allows custom cover images by repository name
|
|
212
|
+
|
|
213
|
+
Optional: Configure `.env` (to increase API rate limit)
|
|
214
|
+
|
|
215
|
+
```env
|
|
216
|
+
VITE_GITHUB_TOKEN=your_github_token
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
### Mode 2: Manual Repository List (No API)
|
|
220
|
+
|
|
221
|
+
```js
|
|
222
|
+
github: {
|
|
223
|
+
useGithubApi: false,
|
|
224
|
+
manualRepos: [
|
|
225
|
+
{
|
|
226
|
+
name: 'My Project',
|
|
227
|
+
url: 'https://github.com/xxx/yyy',
|
|
228
|
+
description: 'Project Description',
|
|
229
|
+
language: 'JavaScript',
|
|
230
|
+
visibility: 'public',
|
|
231
|
+
cover: 'https://example.com/cover.jpg'
|
|
232
|
+
}
|
|
233
|
+
]
|
|
234
|
+
}
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
Description:
|
|
238
|
+
- No requests to GitHub API
|
|
239
|
+
- No star count displayed
|
|
240
|
+
- Custom cover image for each project
|
|
241
|
+
|
|
242
|
+
## RSS Configuration Guide
|
|
243
|
+
|
|
244
|
+
Configure in `main.config.js -> blog`:
|
|
245
|
+
|
|
246
|
+
```js
|
|
247
|
+
blog: {
|
|
248
|
+
url: 'https://your-blog.com',
|
|
249
|
+
rssFeed: 'https://your-blog.com/atom.xml',
|
|
250
|
+
randomCoverApi: 'https://your-cover-api.com/img'
|
|
251
|
+
}
|
|
252
|
+
```
|
|
253
|
+
|
|
254
|
+
Recommendations:
|
|
255
|
+
- Use full URL for `rssFeed`
|
|
256
|
+
- Ensure the target RSS supports CORS (Cross-Origin Resource Sharing)
|
|
257
|
+
|
|
258
|
+
## FAQ
|
|
259
|
+
|
|
260
|
+
### 1) Changes to `site.title` / `site.icon` not taking effect
|
|
261
|
+
|
|
262
|
+
- Favicon cache is common, hard-refresh your browser (`Ctrl + F5`)
|
|
263
|
+
- Check if the favicon URL is directly accessible
|
|
264
|
+
|
|
265
|
+
### 2) Anchor links from "About Me" not scrolling to position
|
|
266
|
+
|
|
267
|
+
- Cross-route anchor retry scrolling is implemented
|
|
268
|
+
- If issues persist, check if the target section `id` exists
|
|
269
|
+
|
|
270
|
+
### 3) RSS not displaying
|
|
271
|
+
|
|
272
|
+
- Check if `rssFeed` URL is accessible
|
|
273
|
+
- Check if blocked by CORS policy on the target site
|
|
274
|
+
|
|
275
|
+
## Open Source Tips
|
|
276
|
+
|
|
277
|
+
If you have configured GITHUB_TOKEN in .env, **DO NOT** upload this file to GitHub
|
package/main.config.js
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
site: {
|
|
3
|
+
title: 'Mete0r 的个人主页', //网站标题
|
|
4
|
+
icon: 'https://img.xscnet.cn//i/2026/04/11/69da42c41efd5.png', //网站图标
|
|
5
|
+
background: 'https://img.xscnet.cn//i/2026/04/11/69da185da44e4.png' //网站背景
|
|
6
|
+
},
|
|
7
|
+
author: {
|
|
8
|
+
name: 'Mete0r', //你的名称
|
|
9
|
+
avatar: 'https://img.xscnet.cn//i/2026/04/11/69da166816afc.jpg', //你的头像
|
|
10
|
+
intro: '你好，我是Mete0r，一名学生 | Trust The Process.', //你的简介
|
|
11
|
+
aiPortrait: 'https://img.xscnet.cn//i/2026/04/11/69da42c41efd5.png', //你的画像
|
|
12
|
+
mbti: 'INTP', //你的MBTI人格类型(影响到关于我页面)
|
|
13
|
+
aboutMeintro: '一名高中生，⌈ 给时光以生命，给岁月以文明 ⌋ | 小王子说：你要对你种下的玫瑰花负责。 保护她的刺，保护她的花瓣。 是你在那朵玫瑰花上耗费的时间和经历，才使得他变得如此重要。 「因为被这朵玫瑰花驯养，所以我们彼此互相需要 。」' //关于我的介绍
|
|
14
|
+
},
|
|
15
|
+
navLinks: [ //导航栏
|
|
16
|
+
{ name: '首页', url: '/' },
|
|
17
|
+
{ name: '社交', url: '#socials' },
|
|
18
|
+
{ name: '项目', url: '#projects' },
|
|
19
|
+
{ name: '文章', url: '#articles' },
|
|
20
|
+
{ name: '关于我', url: '/about' }
|
|
21
|
+
],
|
|
22
|
+
blog: { //跳转博客相关配置
|
|
23
|
+
url: 'https://www.xscnet.cn',
|
|
24
|
+
rssFeed: 'https://www.xscnet.cn/atom.xml',
|
|
25
|
+
randomCoverApi: 'https://rand.xscnet.cn/mix' //随机封面API（可选，文章列表会使用这个接口获取随机封面图）
|
|
26
|
+
},
|
|
27
|
+
github: {
|
|
28
|
+
useGithubApi: true, // 是否使用 GitHub API 获取项目（如果为 false，则只显示 manualRepos 中的项目）
|
|
29
|
+
username: 'mete0rxsc', // GitHub 用户名
|
|
30
|
+
maxRepos: 10, // 最大显示仓库数量
|
|
31
|
+
excludeForks: true, // 是否排除 Fork 的仓库
|
|
32
|
+
|
|
33
|
+
// API 模式下：按仓库名称匹配封面
|
|
34
|
+
covers: {
|
|
35
|
+
// 'repo-name': 'https://example.com/repo-cover.jpg'
|
|
36
|
+
},
|
|
37
|
+
|
|
38
|
+
// 非 API 模式下：手动维护项目（不会显示 Star）
|
|
39
|
+
manualRepos: [
|
|
40
|
+
// {
|
|
41
|
+
// name: 'My Awesome Project',
|
|
42
|
+
// url: 'https://github.com/your-name/your-repo',
|
|
43
|
+
// description: '项目简介',
|
|
44
|
+
// language: 'JavaScript',
|
|
45
|
+
// visibility: 'public',
|
|
46
|
+
// cover: 'https://example.com/cover.jpg'
|
|
47
|
+
// }
|
|
48
|
+
]
|
|
49
|
+
},
|
|
50
|
+
socials: [ //社交链接
|
|
51
|
+
{ name: 'GitHub', label: 'Open Source', icon: 'https://res.xscnet.cn/BlogStatic/Icon/svg/github-line.svg', url: 'https://github.com/mete0rxsc/' },
|
|
52
|
+
{ name: 'X', label: 'Daily Life', icon: 'https://res.xscnet.cn/BlogStatic/Icon/svg/twitter-x-line.svg', url: 'https://x.com/Cqmoyuan/' },
|
|
53
|
+
{ name: 'Bilibili', label: 'Videos', icon: 'https://res.xscnet.cn/BlogStatic/Icon/svg/bilibili-line.svg', url: 'https://space.bilibili.com/482787121' },
|
|
54
|
+
{ name: '163Music', label: 'Music', icon: 'https://res.xscnet.cn/BlogStatic/Icon/svg/MdiMusicClefTreble.svg', url: 'https://music.163.com/#/artist?id=95704903' },
|
|
55
|
+
{ name: 'Email', label: 'Contact Me', icon: 'https://res.xscnet.cn/BlogStatic/Icon/svg/mail-line.svg', url: 'mailto:Mete0r_xsc@hotmail.com' },
|
|
56
|
+
{ name: 'Youtube', label: 'Community', icon: 'https://res.xscnet.cn/BlogStatic/Icon/svg/LineMdYoutubeFilled.svg', url: 'https://www.youtube.com/@Mete0r7023' }
|
|
57
|
+
],
|
|
58
|
+
footer: {
|
|
59
|
+
icp: '吉ICP备2025026551号-2', //ICP备案号
|
|
60
|
+
copyright: '© 2026 Mete0r. All rights reserved.', //版权信息
|
|
61
|
+
email: 'Mete0r_xsc@hotmail.com', //联系邮箱
|
|
62
|
+
links: [ //页脚右下角链接，可不写icon
|
|
63
|
+
{
|
|
64
|
+
name: 'Email',
|
|
65
|
+
icon: 'https://res.xscnet.cn/BlogStatic/Icon/svg/mail-line.svg',
|
|
66
|
+
url: 'mailto:Mete0r_xsc@hotmail.com'
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
name: 'GitHub',
|
|
70
|
+
icon: 'https://res.xscnet.cn/BlogStatic/Icon/svg/github-line.svg',
|
|
71
|
+
url: 'https://github.com/mete0rxsc/'
|
|
72
|
+
}
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
}
|
package/package.json
CHANGED
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mete0r/minimal-homepage",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "2.0.
|
|
4
|
+
"version": "2.0.2",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
7
7
|
"src",
|
|
8
8
|
"public",
|
|
9
9
|
"index.html",
|
|
10
10
|
"vite.config.js",
|
|
11
|
-
"README.md"
|
|
11
|
+
"README.md",
|
|
12
|
+
"main.config.js",
|
|
13
|
+
"index.html",
|
|
14
|
+
"README-en.md"
|
|
12
15
|
],
|
|
13
16
|
"scripts": {
|
|
14
17
|
"dev": "vite",
|