hexo+Webstack 搭建个人网站导航

初始化

1. 打开文件目标路径，执行命令

hexo init web-nav(项目名)

2. 进入web-nav，执行npm i

cd web-nav
npm i

3. 安装webstack主题

• npm
• GitHub终端

npm install hexo-theme-webstack -S

git clone https://github.com/HCLonely/hexo-theme-webstack themes/webstack

4. 应用主题

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

theme: webstack

• 将根目录下_config.landscape.yml改名为_config.webstack.yml。
  将【hexo-theme-webstack】下的_config.example.yml中的内容复制到根目录下的_config.webstack.yml。

5. 搭建完成

hexo g && hexo s

相关配置

网站图标

favicon: /favicon.ico

banner

banner: /images/webstack_banner_cn.png

网站 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

flag 语言标识

• icon: 语言图标，默认仅有flag-cn和flag-us, 其他图标自行寻找存放于主题目录/source/images/flags/
• name: 语言名称
• default: 该语言是否为默认语言
• index: 页面链接

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

search 是否显示搜索框。

search: true

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=

githubCorner 右上角github 地址

• 可更改为自己的GitHub地址

since 建站年份

since: 2020

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

expandAll 是否将侧边栏全部展开。

expandAll: true

about 侧边栏的关于本站。

• url: 关于页面链接
• name: 在侧边栏显示的文字
• icon: 图标

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

busuanzi 不蒜子统计。

• enable: 是否启用不蒜子统计
• position: 访问量显示位置, footer显示在页脚, sidebar显示在侧边栏
• pv: 访问量显示的内容, $pv会被替换为访问量
• uv: 访客数显示的内容, $uv会被替换为访客数

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

config 网站内容设置。

• name: 网站名称
• url: 网站链接
• img: 网站图标
• description: 网站描述

- name: lxshuai
  url: https://lxshuai.top/
  img: https://XXXXXX.ico
  description: 这里是描述。

添加网站

• 第一种（推荐）
• 第二种

• 在站点根目录/source/_data/(没有自行创建)内新建hotTools.yml文件，文件内容如下
• hotTools对应menu中设置的config值

- name: 百度
  url: https://baidu.com/
  img: https://XXXXX.ico
  description: 百度一下，你就知道
- name: Github
  url: https://github.com/
  img: /images/logos/github.png
  description: 面向开源及私有软件项目的托管平台。

• 在主题的_config.yml里添加

- name: 百度
  url: https://baidu.com/
  img: https://XXXXX.ico
  description: 百度
- name: Github
  url: https://github.com/
  img: /images/logos/github.png
  description: 面向开源及私有软件项目的托管平台。