• Stars
    star
    465
  • Rank 94,287 (Top 2 %)
  • Language Vue
  • Created over 5 years ago
  • Updated 11 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

一个通用的个人网站的引导页、导航页模板

Blog-Index 通用网站导航

本项目正在尝试使用 Vue3 进行重构,并尝试接入更多的新功能,切入 dev 分支可以查看当前的新代码进度 ~ 感谢 Starred

Vercel 稳定版预览地址(master branch)

Vercel 开发版预览地址(dev branch)

About | 关于

这是一个基于 Vue 的通用网站导航页面,你可以将其放在个人网站的首页作为您博客的引导页面或者是您其他项目的引导页。兼容了多平台的显示效果(基于 Flex 布局),方便游客浏览您的个人网站,背景图来自于 Bing 每日图片。

页面分为两部分,一个是全屏的展示页,一个是导航抽屉页,阅读下面的“使用方法”来为您的网站配置基本信息与导航信息,点击查看网站示例(目前已改为实时更新 dev 分支的预览效果)

How to use | 使用方法

安装依赖:

yarn install

开发模式:

yarn serve

本项目中,提供了两种使用方法:

一种是只需要将网站的相关信息按要求填入配置文件,之后再编译整个项目就可以生成一个适用于你的网站的静态导航页面;

另一种则是为页面添加后台数据支持,详情请参阅下文的第 2 步。

1. 配置信息

本项目的配置文件存放在 /src/config.js 中,你可以进入该文件进行修改~

另外在编译前,你需要将 /src/assets/logo.svg 替换为你的网站 LOGO,注意格式必须为 svg 文件,同时将 /public/favicon.ico 替换为你网站的 favicon。

2. 添加服务器支持(可选)

如果想要使用后台服务器来加加载和管理数据,请将 SERVE 设置为 true 并将 HOST 填写为你的服务器接口地址,这样前台页面就会使用 Ajax 来向你添加的服务器地址来请求数据。同时你需要按照 API.md 规范来编写后台 API 接口,以及按照 DataBase.md 规范来创建数据库。

连接后台后则无需填写 config.js 中的 PAGES_DATASORT_DATA 数据。

3. 编译

Node 版本要求 >=16.0.0 <17.0.0

Yarn 版本要求 1.22.19

如果使用 volta 管理 node 和 yarn 版本,项目中已经固定好相关字段

确保已安装 yarn 以及安装好了项目依赖之后运行:

$ yarn build

生成的文件将存放在 /dist 目录下,Enjoy!

4. 自动化部署方案

点击按钮一键部署到 Vercel:

部署参考教程:《使用 Vercel 全自动部署个人网站》

注意:

  • Vercel 部署时日志中出现 Error: Node.js version 16.x has reached End-of-Life. 请忽略;
  • 如果出现 Vercel 无法部署的情况,请在 Vercel 的项目设置中,将 Node.js 版本设置为 16.x;
  • 如果 Vercel 分配的域名无法访问,需要自己在项目 Settings - Domains 中绑定自己的域名,如果仍无法访问,请在绑定域名时使用 cname-china.vercel-dns.com

More Repositories

1

DormitoryManagement

基于Vue的宿舍管理系统
Vue
200
star
2

CollegeElective-System

基于Vue2的学生选课系统🖖
Vue
18
star
3

clash-sub-builder

辅助生成规则完善的 Clash 代理配置,支持上传到 gist 生成订阅链接
JavaScript
9
star
4

KnowledgePoint-Collection

前端知识点的收集整理 📕
JavaScript
8
star
5

LowCaseSearch-System

基于VueJS法律的检索系统🖖
Vue
8
star
6

ReferenceFormatGenerator

论文引用格式生成器
TypeScript
8
star
7

s3-image-handler

Use Lambda@Edge functions for S3 image resizing, quality adjustment, automatic webp, and more. | 使用 Lambda@Edge 函数实现对 S3 图像的大小调整、质量调整、自动 webp 等操作。
TypeScript
8
star
8

Back-Word

基于Vue的背单词系统
Vue
6
star
9

Novel-System

基于VueJS的小说网站 🖖
Vue
5
star
10

Dormitory-Allocation-System

基于Vue的宿舍分配系统🖖
Vue
5
star
11

Bookkeeping-Lite

基于Vue2.x的记账单记录、账单分析系统🖖
Vue
4
star
12

vue-music

基于Vue的音乐播放器,数据来自QQ音乐API
Vue
3
star
13

WhoIsSpy

谁是卧底线上发牌
JavaScript
3
star
14

LabRentSystem

实验室仪器租借系统
HTML
2
star
15

ExaminationSystem

基于ASP.NET的学生在线考试系统
ASP
2
star
16

EsunR-Index-V3

个人博客引导页,基于Vue3+Typescript
Vue
2
star
17

Study-Book

一枚前端开发者的小本本 🌚
JavaScript
2
star
18

Parking-Rent

基于Vue2.2的线上车位租借预订系统🖖
Vue
1
star
19

Imagick-Demo

使用 Imagick PHP 插件将图片转换为 webp 及其他格式
PHP
1
star
20

toc-maker

由 HTML DOM 自动生成 TOC 目录
JavaScript
1
star
21

react-native-baidu-mtj

第三方百度统计无埋点版本 RN 端 sdk
Java
1
star
22

JavaLab_ManagementSystem

Java实验室纳新后台管理系统
HTML
1
star
23

ql-script

自用青龙脚本
TypeScript
1
star
24

RWiki

基于Vue、Koa的开源wiki系统 == 弃坑 ==
Vue
1
star
25

MoneyCare

大二C#期末课程设计作业 个人财务管理系统
C#
1
star
26

Clearist

个人事务管理系统
C#
1
star
27

easy-uploader

一个简易的文件上传服务
JavaScript
1
star
28

easy-registration

一个简易的报名系统
TypeScript
1
star
29

miniprogram-frame-test

微信小程序框架性能测试及对比报告
1
star