同步操作将从 昵称不能为空/vue导航页 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
这是一个基于 Vue 的通用网站导航页面,你可以将其放在个人网站的首页作为您博客的引导页面或者是您其他项目的引导页。兼容了多平台的显示效果(基于Flex布局),方便游客浏览您的个人网站,背景图来自于Bing每日图片。
页面分为两部分,一个是全屏的展示页,一个是导航抽屉页,阅读下面的“使用方法”来为您的网站配置基本信息与导航信息,点击查看网站示例。
<img alt="">
安装依赖:
npm install # 如果安装出错请使用cnpm安装
开发模式:
npm run serve
本项目中,提供了两种使用方法:
一种是只需要将网站的相关信息按要求填入配置文件,之后再编译整个项目就可以生成一个适用于你的网站的静态导航页面;
另一种则是为页面添加后台数据支持,详情请参阅下文的第2步。
在 /src/config.js
存放了项目的基本配置信息,配置示例如下:
const SERVE = false; // 是否使用线上服务器
const HOST = ""; // 线上服务器地址,如果不使用请留空
const BLOG_NAME = "Blog"; // 个人网站名字
const BLOG_URL = "https://blog.gofor.live"; // 个人网站链接(请填写完整链接)
const GITHUB = "https://github.com/git-zhu"; // 右上角 Github 图标链接,留空不显示
const BACKGROUND_IMG_URL = "https://yun.gofor.live/Pic/bing/bing.php"; // 背景图片url,留空默认为必应每日图片
const SORT_DATA = [
{ sortId: 1, title: "项目" },
{ sortId: 2, title: "关于我" }
]; // 网站分类列表,请按照API.md中'/getSort'接口中返回的data格式填写
const RECORD_NUMBER = "粤ICP备19068355"; // 网站备案号,留空不显示
const PAGES_DATA = [
{
pageId: 1,
sortId: 1,
title: "博客",
subtitle: "博客首页",
url: "http://blog.gofor.live",
icon: "https://yun.gofor.live/Pic/show/zhu.png"
},
{
pageId: 1,
sortId: 2,
title: "简历",
subtitle: "简历页面",
url: "http://me.gofor.live",
icon: "https://yun.gofor.live/Pic/show/zhu.png"
}
]; // 网站分类列表,请按照API.md中'/getPages'接口中返回的data格式填写
const SLOGAN = [
"欢迎拜访",
"歡迎拜訪",
"Welcome, my friend!",
"訪問へようこそ",
"嗨,别来无恙",
"不忘初心,砥砺前行",
"最近还好吗?",
"期待与你相见",
]; // 在Logo下方显示的标题
const FOOTER_INFO = true; // 是否显示抽屉右下角的文字信息
另外在编译前,你需要将 /src/assets/logo.svg
替换为你的网站LOGO,注意格式必须为 svg
文件,同时将 /oublic/favicon.ico
替换为你网站的 favicon。
如果想要使用后台服务器来加加载和管理数据,请将 SERVE
设置为 true
并将 HOST
填写为你的服务器接口地址,这样前台页面就会使用Ajax来向你添加的服务器地址来请求数据。同时你需要按照 API.md 规范来编写后台API接口,以及按照 DataBase.md 规范来创建数据库。
连接后台后则无需填写
config.js
中的PAGES_DATA
和SORT_DATA
数据。
确保已安装 npm
以及安装好了项目依赖之后运行:
$ npm run build
生成的文件将存放在 /dist
目录下,Enjoy!
2021.01.04:
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。