Matery 添加WebStackPage导航网站

WebStackPage

Hexo

发布日期: 2020-09-01

作者: Small-Rose / 张小菜

更新日期: 2020-09-01

文章字数: 1.1k

阅读时长: 4 分

阅读次数:

Matery 添加WebStackPage导航网站

这个姑娘已经添加很久了，我也是在别的小伙伴的博客发现的，就拿过来用了。

先看效果

我的效果在这里：小菜导航

一、简介

WebStackPage 是一位名叫 Viggo 的UI设计师的公益项目，开源的静态网站，源码本身就是成品，下载代码之后就可以直接使用。

官方项目地址：WebStackPage

二、Matery 添加 WebStackPage

如果你没有博客，只想搞个导航，也是可以的，直接把相关代码放到你的github 或者码云等仓库之后，就可以直接访问了。

如果是Hexo博客，我是这么操作的：

1、下载代码

从官方项目地址克隆下到本地即可：

使用命令

git clone https://github.com/WebStackPage/WebStackPage.github.io

或者使用浏览器下载均可。

2、放入Hexo

在 hexo 根目录的 source 目录下新建一个文件夹 box （名字可以自己取，没有要求）,这个 box 目录会和 _post、about 都处在同一层目录。

3、修改配置文件

（1）修改 Hexo 根目录的配置文件 _config.yml

因为hexo 编译会对主题模板进行渲染之后生成静态页面，但是这个导航的网站本身就是 html文件，因此不需要渲染，那么跳过渲染就需要配置 skip_render 项，如果你没有改其他的东西，应该在 39 行左右。没有找到就搜索一下。配置如下：


skip_render: 
  - 'box/**'

（2）修改 Hexo Matery主题目录的配置文件 _config.yml

如果你不是 Matery 主题也没有关系，原理都是一样的，这一步是用来配置访问菜单的，把访问导航的菜单配置上：

我的是二级菜单，所以是下面这样：

Friends:
    url: /friends
    icon: fas fa-address-book
Secret:
    icon: fas fa-list
    children:
      - name: 导航
        url: /navigate
        icon: fas fa-location-arrow
      - name: 收藏
        url: /box
        icon: fas fa-map-marker
      - name: 写作
        url: https://hut.zhangxiaocai.cn
        icon: fas fa-pen-alt
      - name: 云盘
        url: https://yun.zhangxiaocai.cn
        icon: fas fa-cloud

其中

      - name: 收藏
        url: /box
        icon: fas fa-map-marker

就是访问小菜导航的名称、地址、图标。因为之前创建的文件夹叫box，所以这里配置访问url的值都是/box

如果你是一级菜单那么你的配置应该长这样：

Friends:
    url: /friends
    icon: fas fa-address-book
Daohang:
    url: /box
    icon: fas fa-map-marker

访问之后可能是拼音，不是中文，所以你还要改另一个文件：

找到 layout/_partial/navigation.ejs 文件

大概在第 10 行左右添加导航菜单

menuMap.set("Daohang", "导航");

加完之后最后会多了一个

    menuMap.set("Index", "首页");
    menuMap.set("Tags", "标签");
    menuMap.set("Categories", "分类");
    menuMap.set("Archives", "归档");
    menuMap.set("About", "关于");
    menuMap.set("Contact", "留言薄");
    menuMap.set("Friends", "友情链接");
    menuMap.set("Daohang", "导航");

重新编译一下，应该就好了。

改到这里，基本上刻有访问了。