Blog-Index 网站导航-宝塔部署

About

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

目录

About

写在前面

1、开源地址及下载

开源地址：

2、如何安装依赖让它跑起来

安装yarn

安装Blog-Index

3、网站前端文件修改

说明-获取分类：

## 1. 获取分类url: /getSort GET

2.获取页面

3、获取页面示例及相关（无【cover:""】需自行添加）

背景图案API接口更新（免费API）

写在前面

一个博客不能没有引导页，这是一种仪式感。一个花里胡哨的引导页，能不能吸引访客我觉得不重要了，重要的是仪式感……

那种回家推开门的宾至如归，让自己充满了愉悦……

我本意是想找一个不需要自己手搓，带有管理后台的引导页，但我还是天真了……要么乡土气息浓厚，要么安装复杂。最后我发现了Blog-Index这个前端引导页开源，好不好看呢？肯定是好看并充满了现代感……

1、开源地址及下载

开源地址：

GitHub - EsunR/Blog-Index: 一个通用的个人网站的引导页、导航页模板

首先进入宝塔->网站->添加站点->创建网站

然后进入创建网站的根目录 /www/wwwroot/blogindex （进你自己的网站）

点击”终端“进入SSH进行项目拉取本地。

git clone https://github.com/EsunR/Blog-Index.git

拉取本地后，就会多一个Blog-Index文件夹，双击进入。

其中”文件夹src”是引导页的配置文件，主要内容在这里。”文件夹public“是收藏夹图标及index.html文件。

两个标注了没得用的确实没得啥用，删了节省空间，也可以不用管，问题不大。

2、如何安装依赖让它跑起来

俗话说得好，没病跑两步，要让这玩意跑起来，需要先安装依赖，作者给的教程就是两步~yarn install安装依赖，yarn build构筑前端，然后就跑起来了……我发现用宝塔装这玩意，还有一步要走前面，折腾了半天……。

安装yarn

在软件商店->宝塔插件->Node.js版本管理下载最新的版本的npm，选中国镜像，最新版本（16.19.xx版本）。然后检查一下模块中yarn是不是安装了，没有就在安装里输入yarn安装一次，升级最新版本。

确定以上检查及准备工作完成以后就可以回到网站目录的Blog-Index文件里面开始安装工作了。

安装Blog-Index

进入网站下的项目文件夹后，确实就两步：

1、安装依赖

yarn install

2、构建前端

yarn build

这个时候你的项目目录内就多了两个文件夹，一个是安装的依赖包，一个就是构建的前端网页。

此时只需将网站目录设置到/www/wwwroot/blogindex/Blog-Index/dist就可以通过你的网址或者IP进行访问了。

3、网站前端文件修改

网站确实跑起来了，但内容都与我们自己的无关，然后需要做的就是对”文件夹src“的配置文件进行修改。

进入”文件夹src”打开主参数配置文件config.js进行参数配置。

config.js每一个参数，作者都贴心的给出了注释，让我这样的小白，也能轻松看懂。

完成对以上内容修改和替换以后，进入项目目录把原来的dist文件夹删除，然后进入终端，重复~yarn install安装依赖，yarn build构筑前端，然后现在跑起来的就是你的页面了。

我就是npm管理器选错了，选宝塔的PM2管理器，服务器直接装崩溃~可能还是我机器配置差了……

以上就是Blog-Index引导页构建的操作说明。

小贴士：因为不会整后端，每次更新就是手搓config.js然后删除dist再重构……虽然很累，但比以前纯手搓还是方便一点。等我找到如何构建后端再继续更新一下。就酱~

最后但没结束

更多内容和参数请参考原作者的文档说明，我能帮你的就到这里了，希望你玩得开心。

其他备注：

说明-获取分类：

## 1. 获取分类
url: /getSort GET

返回：
```js
{
code: 1,
data: [
{sortId: 1, title: "Paly Ground"},
{sortId: 2, title: "My Info"}
]
}
```

2.获取页面

{
code: 1,
data: [
{pageId: 1, sortId: 1, title: "个人博客", subTitle: "这是我的个人博客页面", url: "http://www.esunr.xyz/", cover: ""},
{pageId: 2, sortId: 1, title: "个人博客", subTitle: "这是我的个人博客页面", url: "http://www.esunr.xyz/", cover: ""}
]
}

3、获取页面示例及相关（无【cover:""】需自行添加）

（1）在线地图工具

sortId:2 （第二页）

{
pageId: 1,
sortId: 2,
title: "高德地图API",
subtitle: "高德开放平台",
url: "https://lbs.amap.com//"
},
{
pageId: 2,
sortId: 2,
title: "百度地图API",
subtitle: "百度API开放系统",
url: "https://api.map.baidu.com/lbsapi/cloud/index.htm"
},
{
pageId: 3,
sortId: 2,
title: "易制地图",
subtitle: "自由的地图绘制工具",
url: "https://www.makeamap.cn/"
},
{
pageId: 4,
sortId: 2,
title: "Bigemap GIS Office",
subtitle: "支持上百种数据格式互转；数据集展示、编辑、制图、出图打印",
url: "http://www.bigemap.com/"
},
{
pageId: 5,
sortId: 2,
title: "腾讯位置服务",
subtitle: "智能地址服务",
url: "https://lbs.qq.com/"
},
{
pageId: 6,
sortId: 2,
title: "地球在线",
subtitle: "地球在线",
url: "https://www.earthol.com/"
},
{
pageId: 7,
sortId: 2,
title: "谷歌地球",
subtitle: "谷歌地球卫星",
url: "https://search.earthdata.nasa.gov/"
},
{
pageId: 8,
sortId: 2,
title: "奥维互动",
subtitle: "需要下载软件的地图软件",
url: "https://www.ovital.com"
},

（2）在线天气服务及网站

sortId:3 （第三页）

{
pageId: 1,
sortId: 3,
title: "VentuSKY",
subtitle: "看得见的天气流动",
url: "https://www.ventusky.com/"
},
{
pageId: 2,
sortId: 3,
title: "心知天气",
subtitle: "高精度天气数据",
url: "https://www.seniverse.com/api"
},
{
pageId: 3,
sortId: 3,
title: "和风天气",
subtitle: "创建一个漂亮的天气项目",
url: "https://dev.qweather.com/"
},
{
pageId: 4,
sortId: 3,
title: "气象大数据平台",
subtitle: "全方位的天气平台",
url: "http://www.weatherdt.com/"
},
{
pageId: 5,
sortId: 3,
title: "Weather",
subtitle: "Weather API",
url: "https://openweathermap.org/api"
},
{
pageId: 6,
sortId: 3,
title: "国家气象组织",
subtitle: "World Meteorological Organization",
url: "https://public.wmo.int/en"
},

（3）微信平台及其他

sortId:4（第四页）

{
pageId: 1,
sortId: 4,
title: "微信公众平台",
subtitle: "微信公众开放管理平台",
url: "https://mp.weixin.qq.com"
},
{
pageId: 2,
sortId: 4,
title: "微信视频号助手",
subtitle: "微信公众开放管理平台",
url: "https://channels.weixin.qq.com/platform/login"
},
{
pageId: 3,
sortId: 4,
title: "微信红包封面平台",
subtitle: "微信红包封面平台",
url: "https://cover.weixin.qq.com/"
},
{
pageId: 4,
sortId: 4,
title: "知乎",
subtitle: "有问题就有答案",
url: "https://www.zhihu.com/"
}