搭建一个导航网站
我们用浏览器书签收藏网址时,受限于浏览器的交互方式,网址多了找起来比较麻烦,跨平台使用还要登录账号,不是太方便,所以搭建一个属于自己的导航网站就很有必要了。
下面是我整理的一些导航网站及源码,按照网址添加方式分类,这决定着使用的方便程度,太复杂不如使用浏览器
静态导航
静态导航的优点是不需要服务器,使用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
如下1
2
3
4
5---
title: Pblood 导航
comments: false
toc: true
---修改
themes/butterfly/layout/includes/widget/index.pug
,去掉除目录之外的侧边栏1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36#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
1 | document.addEventListener('DOMContentLoaded', function () { |
添加 css 样式
1 | /* 列表双栏布局 */ |
使用:
先在需要多栏布局的.md
文件里添加
1 | <script src="/js/multi_column.js"></script> |
在需要的位置添加<div class="multi">
和<div class="column">
子标签
示例(双栏布局):
1 | <div class="multi"> |
极客导航
基于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 |
- 源码安装
源码编译安装,首先安装好依赖的工具:
1 | export GOPATH=$HOME/go |
源码会下载到$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
1 | 初始化博客,blog是自己的博客根目录名称,可以自定义 |
项目结构
1 | . |
修改配置
添加公众号二维码,修改webstack.yml
配置文件
1 | - title: 二维码演示 |
聚合搜索框、夜间模式,修改config.toml
站点配置文件
1 | [params.search] |
分类标题前面的图标为Font-Awesome-4.7.0
,图标样式及名称可到这里参阅
网站图标获取
- 域名/favicon.ico
如:https://www.right.com.cn/favicon.ico
很多网站的图标都能通过这种方式获取 - F12开发者工具寻找
一般在<head>
标签里,或者通过网络工具寻找 - 使用第三方图标
- 硬核截屏
- 使用第三方工具
一为API:https://api.iowen.cn/doc/favicon.html
部署
1 | name: Auto Deploy hugo |
步骤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