搭建一个导航网站

我们用浏览器书签收藏网址时，受限于浏览器的交互方式，网址多了找起来比较麻烦，跨平台使用还要登录账号，不是太方便，所以搭建一个属于自己的导航网站就很有必要了。

下面是我整理的一些导航网站及源码，按照网址添加方式分类，这决定着使用的方便程度，太复杂不如使用浏览器

静态导航

静态导航的优点是不需要服务器，使用Github等代码托管即可免费部署，缺点是添加网址比较麻烦，网址多的话不推荐使用。

HTML

Webstack

纯静态响应式网址导航，经典开源导航项目，很多热门导航都是基于webstack，比如一导航。

演示：webstack.cc
开源地址：https://github.com/WebStackPage/WebStackPage.github.io
框架：bootstrap
点评：

移动端下拉后导航栏不常驻
通过HTML代码添加网址，一个网址要七八行代码，看起来头疼，管理起来也相当麻烦

所长导航

纯静态响应式网址导航，基于webstack和一导航，在此基础上本地静态化修改而来。

演示：Simple So
开源地址：https://github.com/zzd/Simple-Search-Page
框架：HTML
点评：

仿一导航风格
通过HTML代码添加网址，管理起来相当麻烦

Simple-Search-Page

基于Vue，一个极简的搜索页面，兼顾网址导航，并加入更多引流页面。

演示：Simple So
开源地址：https://github.com/zzd/Simple-Search-Page
框架：vue
点评：极简风

Search Next导航

一个简单的浏览器主页 / 新标签页，由React编写，支持本地账户切换，多引擎搜索，网址导航

演示：Search Next
开源地址：https://github.com/virzs/Search-Next
框架：

nodejs
react
点评：极简风

MarkDown

Hexo + butterfly

基于Hexo + butterfly制作一个简易导航

新建一个nav页面

1	hexo new page nav

修改Page Front-matter如下

---
title: Pblood 导航
comments: false
toc: true
---

修改themes/butterfly/layout/includes/widget/index.pug，去掉除目录之外的侧边栏

#aside-content.aside-content
  //- post
  if is_post()
    - const tocStyle = page.toc_style_simple
    - const tocStyleVal = tocStyle === true || tocStyle === false ? tocStyle : theme.toc.style_simple
    if showToc && tocStyleVal
      .sticky_layout
        include ./card_post_toc.pug
    else
      !=partial('includes/widget/card_author', {}, {cache: true})
      !=partial('includes/widget/card_announcement', {}, {cache: true})
      !=partial('includes/widget/card_top_self', {}, {cache: true})
      .sticky_layout
        if showToc
          include ./card_post_toc.pug
        !=partial('includes/widget/card_recent_post', {}, {cache: true})
        !=partial('includes/widget/card_ad', {}, {cache: true})
  else
    //- page
+   if page.path !== "nav/index.html"
      !=partial('includes/widget/card_author', {}, {cache: true})
      !=partial('includes/widget/card_announcement', {}, {cache: true})
      !=partial('includes/widget/card_top_self', {}, {cache: true})      

    .sticky_layout
      if showToc
        include ./card_post_toc.pug
+     if page.path !== "nav/index.html"
        !=partial('includes/widget/card_recent_post', {}, {cache: true})
        !=partial('includes/widget/card_ad', {}, {cache: true})
        !=partial('includes/widget/card_newest_comment', {}, {cache: true})
        !=partial('includes/widget/card_categories', {}, {cache: true})
        !=partial('includes/widget/card_tags', {}, {cache: true})
        !=partial('includes/widget/card_archives', {}, {cache: true})
        !=partial('includes/widget/card_webinfo', {}, {cache: true})
        !=partial('includes/widget/card_bottom_self', {}, {cache: true})

修改<li>列表布局（multi_column 多栏布局）

目的是优化导航页面的显示效果，通过引入 flex 属性的<div>标签，和widgh属性的<div>标签，将<li>列表组包裹起来，实现列表多栏布局

新建文件themes\butterfly\source\js\listdouble.js

document.addEventListener('DOMContentLoaded', function () {

    const adjustMenu = (init) => {
        if (init) {
          blogNameWidth = document.getElementById('site-name').offsetWidth
          const $menusEle = document.querySelectorAll('#menus .menus_item')
          menusWidth = 0
          className = 0
          $menusEle.length && $menusEle.forEach(i => { menusWidth += i.offsetWidth })
          const $searchEle = document.querySelector('#search-button')
          searchWidth = $searchEle ? $searchEle.offsetWidth : 0
          $nav = document.getElementById('nav')
          multi = document.getElementsByClassName("multi")
          column = document.getElementsByClassName("column")
        }

        let hideMenuIndex = ''
        if (window.innerWidth < 768) hideMenuIndex = true
        else hideMenuIndex = blogNameWidth + menusWidth + searchWidth > $nav.offsetWidth - 120
    
        if (hideMenuIndex) {
          var i
          for (i = 0; i < multi.length; i++) {
            multi[i].classList.remove('multisty')
            }
          for (i = 0; i < column.length; i++) {
            column[i].classList.remove('columnsty')
            }
        } else {
          for (i = 0; i < multi.length; i++) {
            multi[i].classList.add('multisty')
            }
            for (i = 0; i < column.length; i++) {
              column[i].classList.add('columnsty')
              }

        }
      }

  // 初始化header
  const initAdjust = () => {
    adjustMenu(true)
  }

  // 窗口事件
  const unRefreshFn = function () {
    window.addEventListener('resize', () => {
      adjustMenu(false)
    })
  }

  window.refreshFn = function () {
    initAdjust()
  }

  refreshFn()
  unRefreshFn()
})

添加 css 样式

/* 列表双栏布局 */
 /* 添加 flex 属性 */
.multisty{
  display: flex;
  align-items: flex-start;
}
/* 设置列表宽度 */
.columnsty{
  width: 50%;
}

使用：
先在需要多栏布局的.md文件里添加

1	<script src="/js/multi_column.js"></script>

在需要的位置添加<div class="multi">和<div class="column">子标签

示例（双栏布局）：

<div class="multi">
	<div class="column">

### 综合
- [菜鸟教程](https://www.runoob.com/) yyds
- [简单教程](https://www.twle.cn/) 和菜鸟教程很像的网站，简洁无广告，带社区,有点bug，搜索功能也不好使
* [编程自学之路](https://www.r2coding.com/) 华中科技大学大佬自学编程以来所用资源和分享内容的聚合
* [互联网大厂面试每日一题](https://q.shanyue.tech/)
- [W3School](https://www.w3school.com.cn/)  Web 技术教程
- [HOW2J.CN](https://how2j.cn/) java 教程
- [C语言中文网](http://c.biancheng.net/)
- [Bash脚本教程](https://wangdoc.com/bash/index.html)   阮一峰编写的Bash文档
- [现代JavaScript教程](https://zh.javascript.info/)

	</div>
	<div class="column">
	
### 前端
* [前端学习路线](https://objtube.github.io/front-end-roadmap/)
* [大圣前端自学编程网](https://shengxinjing.cn/)    十年程序员大圣的前端教程
* [前端知识图谱+B站资源整合](https://gitee.com/jishupang/web_atlas)

	</div>
</div>

极客导航

基于Webstack制作的Hogo主题，Hugo是由Go语言实现的静态网站生成器。采用Markdown编辑文档，避免了直接编辑HTML代码的麻烦，相较而言方便了一些。

演示：极客导航
开源地址：https://github.com/iplaycode/webstack-hugo
框架：hugo
点评：markdown语法添加链接，相较于HTML体验好一点

纯静态导航目前看来还是这个相对好用，下面开始搭建教程

安装Hugo

二进制安装（推荐：简单、快速）
到Hugo Releases下载对应的操作系统版本的Hugo二进制文件（hugo或者hugo.exe）

Mac下直接使用Homebrew安装：

1	brew install hugo

源码安装
源码编译安装，首先安装好依赖的工具：

Git
Mercurial
Go 1.3+ (Go 1.4+ on Windows)
设置好GOPATH环境变量，获取源码并编译：

1 2	export GOPATH=$HOME/go go get -v github.com/spf13/hugo

源码会下载到$GOPATH/src目录，二进制在$GOPATH/bin/

如果需要更新所有Hugo的依赖库，增加-u参数：

1	go get -u -v github.com/spf13/hugo

作为一个小白，第一步就卡住了😥，Windows系统下配置环境变量就是不生效，原因未知，换个思路，使用WSL子系统安装，曲线救国

启用WSL子系统
使用VScode调用WSL命令行窗口，方便

到Hugo Releases找到适合WSL子系统的二进制文件压缩包，使用wget下载

1	wget https://github.com/gohugoio/hugo/releases/download/v0.98.0/hugo_0.98.0_Linux-64bit.tar.gz

使用tar解压
1
tar xvf hugo_0.98.0_Linux-64bit.tar.gz
移动hugo二进制文件到用户可执行程序目录/usr/local/bin，就可以使用hugo命令了
1
mv hugo /usr/local/bin

初始化 hugo

# 初始化博客，blog是自己的博客根目录名称，可以自定义
hugo new site blog
# 进入博客目录
cd blog
# 克隆webstack-hugo主题到themes目录
git clone https://github.com/iplaycode/webstack-hugo themes/webstack-hugo
# 删除主题git项目残留文件
rm -rf themes/webstack-hugo/.git themes/webstack-hugo/.gitignore themes/webstack-hugo/LICENSE themes/webstack-hugo/README.md
# 将themes/webstack-hugo/exampleSite/目录下的内容复制到博客根目录
cp -a themes/webstack-hugo/exampleSite/* ./
# 本地预览
hugo server
# 生成静态文件(public)
hugo

项目结构

.
├── archetypes
│   └── default.md
├── config.toml # 站点配置文件
├── content
│   └── about.md
├── data
│   └── webstack.yml  # 网址配置文件
├── layouts
├── public  # 静态文件
├── resources
│   └── _gen
│       ├── assets
│       └── images
├── static
└── themes
    └── webstack-hugo
        ├── exampleSite
        ├── layouts
        │   ├── 404.html
        │   ├── _default
        │   │   └── single.html
        │   ├── index.html
        │   └── search.html
        ├── static
        └── theme.toml

修改配置

添加公众号二维码，修改webstack.yml配置文件

- title: 二维码演示
  qrcode: assets/images/webstack-hugo-qrcode.png
  logo: assets/images/favicon.png
  description: 二维码演示，新增二维码，手机扫一扫

聚合搜索框、夜间模式，修改config.toml站点配置文件

[params.search]
  enable = true
[params.darkmode]
  enable = false

分类标题前面的图标为Font-Awesome-4.7.0，图标样式及名称可到这里参阅

网站图标获取

域名/favicon.ico
如：https://www.right.com.cn/favicon.ico
很多网站的图标都能通过这种方式获取
F12开发者工具寻找
一般在<head>标签里，或者通过网络工具寻找
使用第三方图标
硬核截屏
使用第三方工具
一为API：https://api.iowen.cn/doc/favicon.html

部署

name: Auto Deploy hugo

on: [push]

jobs: # 工作流
  build: # 自定义名称
    runs-on: ubuntu-latest #运行在虚拟机环境ubuntu-latest

    steps: # 步骤
      - name: Checkout 🛎️
        uses: actions/checkout@v3 # 步骤1、检出仓库，获取源码

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2 # 步骤2、安装hugo
        with:
          hugo-version: latest

      - name: Build # 步骤3、构建静态文件 
        run: hugo

      - name: Deploy # 步骤4、部署到gh-pages分支
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          publish_dir: ./public

步骤4使用deploy_key的方式部署hugo到github pages上。另外还可以使用github_token和personal_token，可参照文档。

使用deploy_key，你需要生成一对ssh key密钥，在源码仓库（执行 Github Actions 的仓库）设置私钥，发布仓库（Github Pages 所在仓库）配置公钥。

生成密钥

1	ssh-keygen -f hugo -C '用户邮箱'

在发布仓库（Github Pages 所在仓库）配置公钥，Settings->Deploy Keys->Add deploy key，记得一定要勾上Allow write access选项。

在源码仓库（执行 Github Actions 的仓库）设置私钥，Settings->Secrets->New repository secret，Name填ACTIONS_DEPLOY_KEY，要和ci代码里保存一致。

动态导航

WordPress

WordPress-Webstack

基于 WordPress 的 WebStack 主题，该作者后面还推出了升级版主题一导航

演示：WordPress-webstack
开源地址：https://github.com/owen0o0/WebStack
框架：

Wordpress
PHP 5.7+ 7.0+
点评：使用WordPress改变了原版WebStack笨拙的数据添加方式，可以通过数据库操作网址了

WordPress-一导航

WordPress-webstack 升级版，集网址、资源、资讯于一体的 WordPress 导航主题（付费主题￥218），界面美观，实用性高，花钱的就是好

演示：一导航
付费地址：https://www.iotheme.cn/
框架：

Wordpress 5.5+
PHP 7.3+

Typecho

Typecho-Gogobody

基于纯静态的网址导航Webstack制作的Typecho主题，仿一导航风格

演示：暂无
开源地址：https://github.com/gogobody/WebStack
框架：

Typecho
PHP

Typecho-SEOGO

基于Webstack制作的Typecho主题

演示：暂无
开源地址：https://www.seo135.com/seogo/webstack.html
框架：

Typecho
PHP
点评：
Webstack风格
移动端下拉后导航栏不常驻

注意：作者已经不打算更新了，并且开了一个新坑Typecho二次元导航主题52ecy，售价58￥，付费主题不作介绍，看着质量还可以就提一下

独立后台

Onenav

没啥花里胡哨的功能，中规中矩的一款导航，支持多主题

演示：挖站否导航
开源地址：https://github.com/helloxz/onenav
框架：PHP + SQLite3

Onenav(落幕魔改)

演示：OneNav Extend
开源地址：https://gitee.com/tznb/OneNav
框架：PHP + SQLite3

六零导航

支持多主题

演示：六零导航页
开源地址：https://gitee.com/LyLme/lylme_spage | 静态版
框架：PHP + MySql