minimal-homepage 2.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 mete0rxsc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README-en.md

@@ -0,0 +1,277 @@
+# Personal Homepage Template (Vue 3 + Vite)
+[中文版本](./README.md)
+
+A personal homepage project built with Vue 3 + Vite + Tailwind CSS, supporting:
+
+- Home / About Me route switching
+- Light/Dark theme toggle (nice touch)
+- Social link cards
+- GitHub repository display (API mode / manual mode optional)
+- RSS blog post fetching and display
+- Global configuration (`main.config.js`)
+
+## Preview
+![Light Mode](https://gcore.jsdelivr.net/gh/mete0rxsc/minimal-homepage@master/img/%E9%A2%84%E8%A7%88%E5%9B%BE%20-%20%E7%99%BD%E5%A4%A9%E6%A8%A1%E5%BC%8F.png)  
+![Dark Mode](https://gcore.jsdelivr.net/gh/mete0rxsc/minimal-homepage@master/img/%E9%A2%84%E8%A7%88%E5%9B%BE%20-%20%E9%BB%91%E5%A4%9C%E6%A8%A1%E5%BC%8F.png)  
+
+## Table of Contents
+
+- [Live Demo](#live-demo)
+- [Features](#features)
+- [Tech Stack](#tech-stack)
+- [Quick Start](#quick-start)
+- [Deployment Methods](#deployment-methods)
+- [Configuration File Guide](#configuration-file-guide)
+- [GitHub Repository Configuration (Important)](#github-repository-configuration-important)
+- [RSS Configuration Guide](#rss-configuration-guide)
+- [FAQ](#faq)
+- [Open Source Tips](#open-source-tips)
+
+## Live Demo
+
+- `https://www.xscnet.cn`
+
+## Features
+
+1. Page Structure
+- Home: Avatar/Bio, Social Section, Projects Section, Articles Section
+- About Me: Separate route page
+
+2. Animation Experience
+- Route transition animations
+- Article expand/collapse animations
+- Theme toggle animations
+- Heart effect on mouse click
+
+3. Configuration-Driven
+- Site title, favicon, background image
+- Author info, navigation, social links
+- GitHub repository source mode switching
+- RSS URL and article cover strategy
+
+## Tech Stack
+
+- Vue 3
+- Vue Router 4
+- Vite 8
+- Tailwind CSS 4
+
+## Quick Start
+
+### 1) Installation
+#### Install via npm
+1. Install
+
+```bash
+npm install @mete0r/minimal-homepage
+```
+
+2. Enter the project directory
+
+```bash
+cd @mete0r/minimal-homepage
+```
+
+3. Install dependencies
+
+```bash
+npm install
+```
+
+#### Install via Git
+
+1. Clone the repository
+
+```bash
+git clone https://github.com/mete0rxsc/minimal-homepage.git
+```
+
+2. Enter the project directory
+
+```bash
+cd minimal-homepage
+```
+
+3. Install dependencies
+
+```bash
+npm install
+```
+
+### 2) Local Development
+
+```bash
+npm run dev
+```
+
+### 3) Production Build
+
+```bash
+npm run build
+```
+
+### 4) Local Preview of Build Output
+
+```bash
+npm run preview
+```
+
+## Deployment Methods
+
+### Method A: Static Hosting Platform (Recommended)
+
+Suitable for Vercel / Netlify / Cloudflare Pages / GitHub Pages, etc.
+
+- Build Command: `npm run build`
+- Output Directory: `dist`
+
+### Method B: Nginx / BT Panel / Cloud Server
+
+1. Build locally:
+
+```bash
+npm run build
+```
+
+2. Upload the `dist` directory to your server's website root
+3. Nginx Example (Required for History Mode Routing):
+
+```nginx
+location / {
+  try_files $uri $uri/ /index.html;
+}
+```
+
+## Configuration File Guide
+
+Core configuration file: [`main.config.js`](./main.config.js)
+
+### `site`
+
+```js
+site: {
+  title: 'Website Title',
+  icon: 'Website Favicon URL',
+  background: 'Global Background Image URL'
+}
+```
+
+### `author`
+
+```js
+author: {
+  name: 'Your Name',
+  avatar: 'Avatar URL',
+  intro: 'Homepage Bio',
+  aiPortrait: 'Character Image URL',
+  mbti: 'INTP',
+  aboutMeintro: 'About Me Description'
+}
+```
+
+### `navLinks`
+
+```js
+navLinks: [
+  { name: 'Home', url: '/' },
+  { name: 'Social', url: '#socials' },
+  { name: 'Projects', url: '#projects' },
+  { name: 'Articles', url: '#articles' },
+  { name: 'About Me', url: '/about' }
+]
+```
+
+### `socials` / `footer`
+
+- `socials` controls social cards
+- `footer` controls footer text, ICP record number, bottom links
+
+## GitHub Repository Configuration (Important)
+
+`main.config.js -> github` supports two modes:
+
+### Mode 1: Use GitHub API
+
+```js
+github: {
+  useGithubApi: true,
+  username: 'your-github-name',
+  maxRepos: 10,
+  excludeForks: true,
+  covers: {
+    'repo-name': 'https://example.com/repo-cover.jpg'
+  },
+  manualRepos: []
+}
+```
+
+Description:
+- Fetches repositories from `username`
+- Displays star count
+- `covers` allows custom cover images by repository name
+
+Optional: Configure `.env` (to increase API rate limit)
+
+```env
+VITE_GITHUB_TOKEN=your_github_token
+```
+
+### Mode 2: Manual Repository List (No API)
+
+```js
+github: {
+  useGithubApi: false,
+  manualRepos: [
+    {
+      name: 'My Project',
+      url: 'https://github.com/xxx/yyy',
+      description: 'Project Description',
+      language: 'JavaScript',
+      visibility: 'public',
+      cover: 'https://example.com/cover.jpg'
+    }
+  ]
+}
+```
+
+Description:
+- No requests to GitHub API
+- No star count displayed
+- Custom cover image for each project
+
+## RSS Configuration Guide
+
+Configure in `main.config.js -> blog`:
+
+```js
+blog: {
+  url: 'https://your-blog.com',
+  rssFeed: 'https://your-blog.com/atom.xml',
+  randomCoverApi: 'https://your-cover-api.com/img'
+}
+```
+
+Recommendations:
+- Use full URL for `rssFeed`
+- Ensure the target RSS supports CORS (Cross-Origin Resource Sharing)
+
+## FAQ
+
+### 1) Changes to `site.title` / `site.icon` not taking effect
+
+- Favicon cache is common, hard-refresh your browser (`Ctrl + F5`)
+- Check if the favicon URL is directly accessible
+
+### 2) Anchor links from "About Me" not scrolling to position
+
+- Cross-route anchor retry scrolling is implemented
+- If issues persist, check if the target section `id` exists
+
+### 3) RSS not displaying
+
+- Check if `rssFeed` URL is accessible
+- Check if blocked by CORS policy on the target site
+
+## Open Source Tips
+
+If you have configured GITHUB_TOKEN in .env, **DO NOT** upload this file to GitHub

package/README.md

@@ -0,0 +1,278 @@
+# 个人主页模板 (Vue 3 + Vite)
+
+[English Version](./README-en.md)
+
+一个基于 Vue 3 + Vite + Tailwind CSS 的个人主页项目，支持：
+
+- 首页 / 关于我 路由切换
+- 日夜主题切换(小巧思)
+- 社交链接卡片
+- GitHub 项目展示（可选择 API 模式 / 手动模式）
+- RSS 博客文章拉取与展示
+- 全局配置化（`main.config.js`）
+
+## 预览
+![白天模式](https://gcore.jsdelivr.net/gh/mete0rxsc/minimal-homepage@master/img/%E9%A2%84%E8%A7%88%E5%9B%BE%20-%20%E7%99%BD%E5%A4%A9%E6%A8%A1%E5%BC%8F.png)  
+![黑夜模式](https://gcore.jsdelivr.net/gh/mete0rxsc/minimal-homepage@master/img/%E9%A2%84%E8%A7%88%E5%9B%BE%20-%20%E9%BB%91%E5%A4%9C%E6%A8%A1%E5%BC%8F.png)  
+
+## 目录
+
+- [在线预览](#在线预览)
+- [功能特性](#功能特性)
+- [技术栈](#技术栈)
+- [快速开始](#快速开始)
+- [部署方式](#部署方式)
+- [配置文件说明](#配置文件说明)
+- [GitHub 项目配置（重点）](#github-项目配置重点)
+- [RSS 配置说明](#rss-配置说明)
+- [常见问题](#常见问题)
+- [开源建议](#开源建议)
+
+## 在线预览
+
+- `https://www.xscnet.cn`
+
+## 功能特性
+
+1. 页面结构
+- 首页：头像/简介、社交区、项目区、文章区
+- 关于我：单独路由页面
+
+2. 动效体验
+- 路由切换动画
+- 文章展开/收起动画
+- 主题切换动画
+- 鼠标点击爱心效果
+
+3. 配置驱动
+- 站点标题、图标、背景图
+- 作者信息、导航、社交链接
+- GitHub 项目来源模式切换
+- RSS 地址和文章封面策略
+
+## 技术栈
+
+- Vue 3
+- Vue Router 4
+- Vite 8
+- Tailwind CSS 4
+
+## 快速开始
+
+### 1) 安装
+#### 使用 npm 安装
+1. 安装
+
+```bash
+npm install @mete0r/minimal-homepage
+```
+
+2. 进入项目
+
+```bash
+cd @mete0r/minimal-homepage
+```
+
+3. 安装依赖
+
+```bash
+npm install
+```
+
+#### 使用 git 安装
+
+1. 克隆仓库
+
+```bash
+git clone https://github.com/mete0rxsc/minimal-homepage.git
+```
+
+2. 进入项目
+
+```bash
+cd minimal-homepage
+```
+
+3. 安装依赖
+
+```bash
+npm install
+```
+
+### 2) 本地开发
+
+```bash
+npm run dev
+```
+
+### 3) 生产构建
+
+```bash
+npm run build
+```
+
+### 4) 本地预览构建产物
+
+```bash
+npm run preview
+```
+
+## 部署方式
+
+### 方式 A：静态托管平台（推荐）
+
+适用于 Vercel / Netlify / Cloudflare Pages / GitHub Pages 等。
+
+- Build Command: `npm run build`
+- Output Directory: `dist`
+
+### 方式 B：Nginx / 宝塔 / 云服务器
+
+1. 本地构建：
+
+```bash
+npm run build
+```
+
+2. 上传 `dist` 目录到服务器网站根目录
+3. Nginx 示例（History 路由必配）：
+
+```nginx
+location / {
+  try_files $uri $uri/ /index.html;
+}
+```
+
+## 配置文件说明
+
+核心配置文件：[`main.config.js`](./main.config.js)
+
+### `site`
+
+```js
+site: {
+  title: '网站标题',
+  icon: '网站图标 URL',
+  background: '全局背景图 URL'
+}
+```
+
+### `author`
+
+```js
+author: {
+  name: '你的名字',
+  avatar: '头像 URL',
+  intro: '首页简介',
+  aiPortrait: '角色图 URL',
+  mbti: 'INTP',
+  aboutMeintro: '关于我介绍'
+}
+```
+
+### `navLinks`
+
+```js
+navLinks: [
+  { name: '首页', url: '/' },
+  { name: '社交', url: '#socials' },
+  { name: '项目', url: '#projects' },
+  { name: '文章', url: '#articles' },
+  { name: '关于我', url: '/about' }
+]
+```
+
+### `socials` / `footer`
+
+- `socials` 控制社交卡片
+- `footer` 控制页脚文本、备案号、底部链接
+
+## GitHub 项目配置（重点）
+
+`main.config.js -> github` 支持两种模式：
+
+### 模式 1：使用 GitHub API
+
+```js
+github: {
+  useGithubApi: true,
+  username: 'your-github-name',
+  maxRepos: 10,
+  excludeForks: true,
+  covers: {
+    'repo-name': 'https://example.com/repo-cover.jpg'
+  },
+  manualRepos: []
+}
+```
+
+说明：
+- 会读取 `username` 的仓库
+- 会显示 Star
+- `covers` 可按仓库名配置封面
+
+可选：配置 `.env`（用于提升 API 额度）
+
+```env
+VITE_GITHUB_TOKEN=your_github_token
+```
+
+### 模式 2：手动项目列表（不使用 API）
+
+```js
+github: {
+  useGithubApi: false,
+  manualRepos: [
+    {
+      name: 'My Project',
+      url: 'https://github.com/xxx/yyy',
+      description: '项目介绍',
+      language: 'JavaScript',
+      visibility: 'public',
+      cover: 'https://example.com/cover.jpg'
+    }
+  ]
+}
+```
+
+说明：
+- 不请求 GitHub API
+- 不显示 Star
+- 每个项目可单独设置封面
+
+## RSS 配置说明
+
+在 `main.config.js -> blog` 中配置：
+
+```js
+blog: {
+  url: 'https://your-blog.com',
+  rssFeed: 'https://your-blog.com/atom.xml',
+  randomCoverApi: 'https://your-cover-api.com/img'
+}
+```
+
+建议：
+- `rssFeed` 优先使用完整 URL
+- 确认目标 RSS 支持跨域（CORS）
+
+## 常见问题
+
+### 1) 改了 `site.title` / `site.icon` 没生效
+
+- 图标缓存常见，先强刷浏览器（`Ctrl + F5`）
+- 检查图标 URL 是否可直接访问
+
+### 2) 从“关于我”点导航锚点没滚到位置
+
+- 已实现跨路由锚点重试滚动
+- 仍异常时检查目标 section 的 `id` 是否存在
+
+### 3) RSS 不显示
+
+- 检查 `rssFeed` 是否可访问
+- 检查是否被目标站点 CORS 拒绝
+
+## 开源建议
+
+如果您配置了.env中的GITHUB_TOKEN，请**不要**将此文件上传到GitHub  

package/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>my-homepage</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>

package/main.config.js

@@ -0,0 +1,75 @@
+export default {
+  site: {
+    title: 'Mete0r 的个人主页', //网站标题
+    icon: 'https://img.xscnet.cn//i/2026/04/11/69da42c41efd5.png', //网站图标
+    background: 'https://img.xscnet.cn//i/2026/04/11/69da185da44e4.png' //网站背景
+  },
+  author: {
+    name: 'Mete0r', //你的名称
+    avatar: 'https://img.xscnet.cn//i/2026/04/11/69da166816afc.jpg', //你的头像
+    intro: '你好，我是Mete0r，一名学生 | Trust The Process.', //你的简介
+    aiPortrait: 'https://img.xscnet.cn//i/2026/04/11/69da42c41efd5.png', //你的画像
+    mbti: 'INTP', //你的MBTI人格类型(影响到关于我页面)
+    aboutMeintro: '一名高中生，⌈ 给时光以生命，给岁月以文明 ⌋  |  小王子说：你要对你种下的玫瑰花负责。 保护她的刺，保护她的花瓣。 是你在那朵玫瑰花上耗费的时间和经历，才使得他变得如此重要。 「因为被这朵玫瑰花驯养，所以我们彼此互相需要 。」' //关于我的介绍
+  },
+  navLinks: [ //导航栏
+    { name: '首页', url: '/' },
+    { name: '社交', url: '#socials' },
+    { name: '项目', url: '#projects' },
+    { name: '文章', url: '#articles' },
+    { name: '关于我', url: '/about' }
+  ],
+  blog: { //跳转博客相关配置
+    url: 'https://www.xscnet.cn',
+    rssFeed: 'https://www.xscnet.cn/atom.xml',
+    randomCoverApi: 'https://rand.xscnet.cn/mix' //随机封面API（可选，文章列表会使用这个接口获取随机封面图）
+  },
+  github: {
+    useGithubApi: true, // 是否使用 GitHub API 获取项目（如果为 false，则只显示 manualRepos 中的项目）
+    username: 'mete0rxsc', // GitHub 用户名
+    maxRepos: 10, // 最大显示仓库数量
+    excludeForks: true,  // 是否排除 Fork 的仓库
+
+    // API 模式下：按仓库名称匹配封面
+    covers: {
+      // 'repo-name': 'https://example.com/repo-cover.jpg'
+    },
+
+    // 非 API 模式下：手动维护项目（不会显示 Star）
+    manualRepos: [
+      // {
+      //   name: 'My Awesome Project',
+      //   url: 'https://github.com/your-name/your-repo',
+      //   description: '项目简介',
+      //   language: 'JavaScript',
+      //   visibility: 'public',
+      //   cover: 'https://example.com/cover.jpg'
+      // }
+    ]
+  },
+  socials: [ //社交链接
+    { name: 'GitHub', label: 'Open Source', icon: 'https://res.xscnet.cn/BlogStatic/Icon/svg/github-line.svg', url: 'https://github.com/mete0rxsc/' },
+    { name: 'X', label: 'Daily Life', icon: 'https://res.xscnet.cn/BlogStatic/Icon/svg/twitter-x-line.svg', url: 'https://x.com/Cqmoyuan/' },
+    { name: 'Bilibili', label: 'Videos', icon: 'https://res.xscnet.cn/BlogStatic/Icon/svg/bilibili-line.svg', url: 'https://space.bilibili.com/482787121' },
+    { name: '163Music', label: 'Music', icon: 'https://res.xscnet.cn/BlogStatic/Icon/svg/MdiMusicClefTreble.svg', url: 'https://music.163.com/#/artist?id=95704903' },
+    { name: 'Email', label: 'Contact Me', icon: 'https://res.xscnet.cn/BlogStatic/Icon/svg/mail-line.svg', url: 'mailto:Mete0r_xsc@hotmail.com' },
+    { name: 'Youtube', label: 'Community', icon: 'https://res.xscnet.cn/BlogStatic/Icon/svg/LineMdYoutubeFilled.svg', url: 'https://www.youtube.com/@Mete0r7023' }
+  ],
+  footer: {
+    icp: '吉ICP备2025026551号-2', //ICP备案号
+    copyright: '© 2026 Mete0r. All rights reserved.', //版权信息
+    email: 'Mete0r_xsc@hotmail.com', //联系邮箱
+    links: [ //页脚右下角链接，可不写icon
+      {
+        name: 'Email',
+        icon: 'https://res.xscnet.cn/BlogStatic/Icon/svg/mail-line.svg',
+        url: 'mailto:Mete0r_xsc@hotmail.com'
+      },
+      {
+        name: 'GitHub',
+        icon: 'https://res.xscnet.cn/BlogStatic/Icon/svg/github-line.svg',
+        url: 'https://github.com/mete0rxsc/'
+      }
+    ]
+  }
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "minimal-homepage",
+  "private": false,
+  "version": "2.0.2",
+  "type": "module",
+  "files": [
+    "src",
+    "public",
+    "index.html",
+    "vite.config.js",
+    "README.md",
+    "main.config.js",
+    "index.html",
+    "README-en.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.2.2",
+    "vue": "^3.5.32",
+    "vue-router": "^4.6.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.5",
+    "autoprefixer": "^10.4.27",
+    "clean-publish": "^6.0.5",
+    "postcss": "^8.5.9",
+    "tailwindcss": "^4.2.2",
+    "vite": "^8.0.4"
+  },
+  "keywords": [
+    "vite",
+    "vue",
+    "homepage",
+    "personal-website",
+    "template"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mete0rxsc/minimal-homepage.git"
+  }
+}