/Blog-Index

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

Primary LanguageVue

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