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


About

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

写在前面

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

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

我本意是想找一个不需要自己手搓,带有管理后台的引导页,但我还是天真了……要么乡土气息浓厚,要么安装复杂。最后我发现了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/"
  }

 

持续更新相关资料,可以直接复制进config.jsconst PAGES_DATA = 函数下方。

背景图案API接口更新(免费API)

config.js文件第11行

函数位置  const BACKGROUND_IMG_URL = ”API地址复制黏贴替换”;// 背景图片url

动漫类:

樱花:https://www.dmoe.cc/random.php

小歪:https://api.ixiaowai.cn/api/api.php

保罗:https://api.paugram.com/wallpaper/

墨天逸:https://api.mtyqx.cn/tapi/random.php

EEE.DOG:https://api.yimian.xyz/img

东方Project:https://img.paulzzh.tech/touhou/random

洛川唧上的萌部图片:https://service-5z0sdahv-1306777571.sh.apigw.tencentcs.com/release/

缙哥哥博客: https://api.dujin.org/pic/yuanshen/

pixiv壁纸:https://api.likepoems.com/img/sina/pixiv

 

风景美画类:

likepoems随机图:https://api.likepoems.com/img/sina/nature

高清壁纸:https://api.ixiaowai.cn/gqapi/gqapi.php

必应壁纸:https://api.likepoems.com/img/sina/bing

 

人物摄影类:

Unsplash Image:https://source.unsplash.com/random

搏天:https://api.btstu.cn/sjbz/api.php

其它随机图:https://api.wuque.cc/random/images

 

整到这里,我也想整一个随机图片API了,下次的目标就是这个!搭建自己的随机图片调用。


MrdT Feb. 5, 2023, 10:45 p.m. 805 收藏文档