Hexo博客-Webstack网址导航

说明：

1.鉴于每个人的博客根目录名称都不太一样，本文 博客根目录 一律以 [BlogRoot] 代替

2.站点配置文件 _config.yml ，路径为 [BlogRoot]_config.yml

3.主题配置文件 _config.yml ，路径为 [BlogRoot]\themes\butterfly_config.yml

4.以 [NavRoot] 指代 [E:/gitcode/blog-nav]

5.Nav 站点配置文件 _config.yml ，路径为 [NavRoot]_config.yml

6.Nav 主题配置文件 _config.webstack.yml ，路径为 [NavRoot]_config.webstack.yml

参考：

1.优雅的使用Webstack打造个人网址导航

2.Hexo 博客搭建基础教程 (二)

1.为什么要单独做一个网址收藏页面

我们知道直接在Hexo博客中可以添加网站链接，生成网址收藏页面，类似于友链，但是当收藏的网站比较多时，单独建一个网站专门用来收藏网址会更方便一些，而且这个网站还可以直接嵌入到博客中。

2.部署网址导航的仓库

1.在Github新建一个仓库 blog-nav ，这个仓库可以private(如果通过vercel指定二级域名，private或者public都可以)或者public(通过生成Page自定义域名)。

2.本地新建 [E:/gitcode/blog-nav] 目录，在此目录下执行如下代码用来安装 Hexo和相关依赖

npm install -g hexo-cli #全局安装hexo
hexo init blog-nav   #新建一个blog_nav目录并在此目录下进行hexo项目的初始化
cd blog-nav #到blog-nav目录下
npm i   #安装或更新相关依赖

文件目录如下：

node_modules：依赖包
scaffolds：生成文章的一些模板
source：用来存放你的文章
themes：主题
.gitignore：发布时忽略的文件（可忽略）
_config.landscape.yml：主题的配置文件
_config.yml：博客的配置文件
package.json：项目名称、描述、版本、运行和开发等信息

2.1 部署方式1

推荐直接采用方式1进行配置并推送，方式2也可行不过比较麻烦

1.初始化仓库

git init
git branch -M main  #将Master分支转为Main分

2.安装 webstack 主题，类似于同样基于 Hexo 的 Butterfly 主题

# hexo >= 5.0
npm install hexo-theme-webstack -S

3.安装 hexo 针对git的 deploy 组件

npm install --save hexo-deployer-git

4.修改站点配置文件 _config.yml，把主题改为 webstack，并且配置推送的仓库

theme: webstack # theme: landscape
deploy:
  type: git
  repo: https://github.com/Einstein-schrodinger/blog-nav.git
  branch: main #github是main分支

5.将 [NavRoot] 根目录下的 _config.landscape.yml 改名为**_config.webstack.yml**，复制 [NavRoot]\node_moules\hexo-theme-webstack_config.example.yml 内的内容到主题配置文件 _config.webstack.yml

6.一键三连

hexo cl && hexo g && hexo d

7.还可以修改 [NavRoot] 根目录的 package.json文件，在第10行添加 “clgd”: “hexo cl && hexo g && hexo d”，注意第9行末尾要加 ,，这样直接执行npm run clgd来推送生成的文件。

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server",
+   "clgd": "hexo cl && hexo g && hexo d"
  },
  "hexo": {
    "version": "6.3.0"
  },
  "dependencies": {
    "hexo": "^6.3.0",
    "hexo-deployer-git": "^3.0.0",
    "hexo-generator-archive": "^2.0.0",
    "hexo-generator-category": "^2.0.0",
    "hexo-generator-index": "^3.0.0",
    "hexo-generator-tag": "^2.0.0",
    "hexo-renderer-ejs": "^2.0.0",
    "hexo-renderer-marked": "^6.0.0",
    "hexo-renderer-stylus": "^2.1.0",
    "hexo-server": "^3.0.0",
    "hexo-theme-landscape": "^0.0.3",
    "hexo-theme-webstack": "^2.1.0"
  }
}

2.2 部署方式2

1.与远程仓库 blog-nav 关联

在 git init 之后会出现 .gitignore 文件，紧接着对其修改保证只推送 public 文件(其它文件推送也没影响，只是为了简洁)

git init
# 修改 .gitignore 文件
echo "博客的网址收藏" >> README.md  
git add README.md
git commit -m "first commit"
git branch -M main  #将Master分支转为Main分
git remote add origin https://github.com/Einstein-schrodinger/blog-nav.git #与远程仓库进行关联
#git pull --rebase origin main #可选 如果在git push origin main报错，可以执行此句再git push
git push -u origin main

.gitignore

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
.deploy*/
_multiconfig.yml
source/
*.yml
scaffolds/
themes/
*.json

2.安装 webstack 主题，类似于同样基于 Hexo 的 Butterfly 主题

# hexo >= 5.0
npm install hexo-theme-webstack -S

3.修改站点配置文件 _config.yml，把主题改为 webstack

theme: webstack # theme: landscape

4.将 [NavRoot] 根目录下的 _config.landscape.yml 改名为 _config.webstack.yml，复制 [NavRoot]\node_moules\hexo-theme-webstack_config.example.yml 内的内容到主题配置文件 _config.webstack.yml

5.编译运行并推送

hexo cl && hexo g
git add .
git commit -m "网址收藏"
git push origin main

3.Vercel部署与自定义域名

1.首先要注册一个Vercel账号，然后关联自己的Github仓库，这样就可以在Vercel中直接托管你的GitHub库中的项目了。

2.当你用你的Github账户关联并绑定手机号登录之后，点击右上角的 Add New Project 创建新的项目，之后导入选项那里选择 Continue with Github，这时候应该能看到你 Github 账号的仓库，选择你刚刚部署成功的仓库 blog-nav，右边的Import选项，表示你要导入该仓库。

3.起一个只能有字母、数字或者或者连字符的项目名称，然后其他默认（项目名称也可以保持默认），点击 Deploy，等待一分钟即可部署成功，部署成功后点击 Continue to Dashboard 跳转到控制面板，下图所示就是控制面板，看到就代表成功部署到了，但是我们现在还不能访问他给出的域名，因为GFW最近把 Vercel 屏蔽了。

4.绑定自定义域名（前提是已经有属于自己的域名，域名需要购买）

一些说明

参考：Hexo博客搭建基础教程(二)

以我的域名：sqwfly.top 为例进行说明

将域名指向云服务器，请选择「A」； 将域名指向另一个域名，请选择「CNAME」； 建立邮箱请选择「MX」，根据邮箱服务商提供的 MX 记录填写。

点击上方工具栏的 setting，找到 Domains，可以看到已经存在了一个域名 blog-nav-a7r2.vercel.app，由于被墙无法访问，所以需要自定义域名。这里自定义的二级域名为 nav.sqwdream.cloud，点击 Add，此时域名还无法访问，需要进行解析。

5.腾讯云、阿里云等都是不错的域名代理商，我购买的是腾讯云的域名，需要先注册，进入控制台，搜索 DNS解析DNSPod ，点击进入再点击自己的域名 前往DNSPod控制台，添加记录,最后点击确认进行解析。

6.解析成功，可以成功访问nav.sqwdream.cloud

读者在看到这篇博文时，该域名已被弃用

4.将网址收藏界面嵌入到自己的博客中

最后将这一界面嵌入到自己博客中，只需要修改主题配置文件 _config.yml

纳戒||fas fa-brands fa-ubuntu || hide:
   网址收藏: https://nav.sqwfly.top || fas fa-brands fa-internet-explorer

5.Webstack的基本配置

更多详细配置请参考 hexo-theme-webstack

1.网站图标

favicon: /favicon.ico

2.banner

banner: /images/webstack_banner_cn.png

3.网站logo

• expanded: 侧边栏展开式左上角的 logo

• collapsed: 侧边栏收起式左上角的 logo

• dark: 顶栏为暗色时左上角的 logo, 仅 about 页面生效

logo:
  expanded: /images/logo@2x.png
  collapsed: /images/logo-collapsed@2x.png
  dark: /images/logo_dark@2x.png

4.flag

• icon: 语言图标，默认仅有flag-cn和flag-us, 其他图标自行寻找存放于主题目录/source/images/flags/

• name: 语言名称

• default: 该语言是否为默认语言

• index: 页面链接

flag:
  - name: Chinese
    default: true
    icon: flag-cn
    index: /index.html

5.search

search: true #是否显示搜索框

6.userDefinedSearchData（自定义搜索引擎）

• custom: 是否启用自定义配置

• thisSearch: 当前搜索引擎的搜索链接

• thisSearchIcon: 当前搜索引擎的图标链接，格式为url(图片链接)

• hotStatus: 是否启用搜热词功能

• data: 多搜索引擎配置

• name: 搜索引擎名字 img: 搜索引擎的搜索链接 url: 搜索引擎的图标链接，格式为url(图片链接)

userDefinedSearchData:
  custom: true
  thisSearch: https://www.baidu.com/s?wd=
  thisSearchIcon: url(https://www.baidu.com/favicon.ico)
  hotStatus: true
  data:
    - name: 百度
      img: url(https://www.baidu.com/favicon.ico)
      url: https://www.baidu.com/s?wd=
    - name: 谷歌
      img: url(https://www.google.com/favicon.ico)
      url: https://www.google.com/search?q=

7.githubCorner

右上角的github corner， 将href的属性改为自己的github地址即可。

githubCorner: '<a href="https://github.com/Einstein-schrodinger" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>'

8.since（页面底部的建站年份）

since: 2022

9.menu（侧边栏菜单设置）

• name: 分组名

• icon: 分组图标
  config: [主要]分组内容(详细设置查看Config)，如果有二级菜单则不需要此项！

• submenu: 二级菜单，如果有二级菜单则不需要config, 此选项内容包含name, icon, config选项

menu:
  - name: 常用工具
    icon: far fa-star
    config: hotTools
  - name: 其他工具
    icon: fas fa-tools
    submenu:
      - name: 开发工具
        icon: fas fa-tools
        config: devTools
      - name: 我的博客
        icon: fas fa-blog
        config: myBlog

10.expandAll（是否将侧边栏全部展开）

expandAll: true

11.about（侧边栏的关于本站）

• url: 关于页面链接

• name: 在侧边栏显示的文字

• icon: 图标

about:
  url: /about/
  icon: far fa-heart
  name: 关于本站

12.busuanzi（卜算子统计）

• enable: 是否启用不蒜子统计

• position: 访问量显示位置, footer显示在页脚, sidebar显示在侧边栏

• pv: 访问量显示的内容, $pv会被替换为访问量

• uv: 访客数显示的内容, $uv会被替换为访客数

busuanzi:
  enable: true
  position: sidebar
  pv: 本站总访问量$pv
  uv: 本站总访客数$uv

13.config（网站内容设置）

• name: 网站名称

• url: 网站链接

• img: 网站图标

• description: 网站描述

- name: 琉璃红梅
  url: https://www.sqwfly.top/
  img: https://www.sqwfly.top/favicon.ico
  description: 尽我所做，做我想做！

14.关联设置名称并添加网站

在 menu 和 submenu 中设置的 config 的内容为此选项的名称。

例 menu：

menu:
  - name: 常用工具
    icon: far fa-star
    config: hotTools

则 常用工具 分组里的网站有以下两种添加方式，以下两种方式任选一种即可，建议使用第二种。

1.在主题配置文件 _config.yml 里添加：

hotTools:
  - name: 琉璃红梅
    url: https://www.sqwfly.top/
    img: https://www.sqwfly.top/favicon.ico
    description: 尽我所做，做我想做！
  - name: Github
    url: https://github.com/
    img: /images/logos/github.png
    description: 面向开源及私有软件项目的托管平台。

2.在站点根目录 /source/_data/ 内新建 hotTools.yml 文件(没有就自行创建)，文件内容如下：

- name: 琉璃红梅
  url: https://www.sqwfly.top/
  img: https://www.sqwfly.top/favicon.ico
  description: 尽我所做，做我想做！
- name: Github
  url: https://github.com/
  img: /images/logos/github.png
  description: 面向开源及私有软件项目的托管平台。