关于DAC导航建立过程的一些记录
DAC导航是专为在校大学生创建的导航网站，涵盖资源搜索、学术科研、高效工具、软件资源、影音娱乐、趣味网站、热门导航、免费素材、在线学习、公益实践、升学就业、科学上网、博客组建等13大门类，1800+优质站点。DAC在提供网站指引和导航的同时，也免费提供资源搜索、下载、传递，包括但不限于期刊文献、文库资料、VIP影音、破解软件、实用工具等。
DAC导航属于个人小站，多数站点是从我2016年以来学习、工作的实际经历中收集整理的，搭建网站除了花费时间精力外，没有任何成本，因此也永远不会开启打赏、付费、广告等盈利模式。
本人非计算机相关专业，因此起初只是想通过一种免费便捷的方式将自己收集的书签、公众号、实用工具等做一个归类整理，在方便自己使用的同时尽可能帮助周围同学。在进行了一段时间的网上冲浪后，决定使用Github+Gridea+DNSPod+Freenom搭建第一版的DAC导航。
前期已经初步了解了Github的常见操作、Git的常用命令，申请了若干Freenom免费域名并在DNSPod上解析，因此后续的主要工作如下：
# 1. 寻找简洁的开源导航网站模板
经过一番搜索，看到一个静态开源的导航网站模板WebStack，那么只需要将源码修改并托管在Github上，然后开启Github Pages就可以了。
WebStackPage/WebStackPage.github.io: ❤️静态响应式网址导航网站 - webstack.cc (opens new window)
# 2. 搭建网站后台管理系统
如果收录的站点数量较少，使用Github纯静态托管也是可以的，更新内容可以直接修改index.html文件。但是初版的DAC导航就将收录超过1000个网站，没有统一的后台管理系统将会非常耗时费力。
欣慰的是，WebStack作者大佬提供了10余种导航网站后台的搭建方法，看来看去只能选择静态博客Gridea主题 (opens new window)，因为我既不想付费购买服务器，又不会Java、Laravel、Vue等，更不可能自建后台。Gridea (opens new window)本身是一个静态博客写作客户端，但lmm214 (opens new window)同学专门构建了适用于Gridea的WebStack主题，算是一种巧妙的方法，大大节省了导入站点要花费的时间，
Gridea Theme WebStack :: 木木木木木 (opens new window)
使用Gridea+Github Pages搭建自己的导航站 - 记忆一隅 (opens new window)
因为Gridea中导入仓库要求仓库名称为username.github.io，而我的第一个Github账户使用了这个类型的仓库名搭建了一个博客，只好新注册一个账户，也就是现在的nwuzmedoutlook，所以DAC导航永久域名为https://nwuzmedoutlook.github.io/
造成这个问题的主要原因可能在于，很多新手同学跟我一样在网上搜集Github免费搭建个人网站必须使用username.github.io格式的仓库名，然而同名仓库只能建立一个。后来才知道，使用Github静态托管搭建网站也可以使用其他仓库名，并且同样能自定义域名。
# 3. 导入已收藏的大量网页书签
抽空导入来自360、Google和Edge浏览器的大量书签以及微信公众号优质资源。
说是导入，其实就是逐个复制粘贴填写到Gridea客户端的Webstack主题里，1000多个网站全部都是手动输入，且每次输入前都在浏览器打开测试以排除失效链接，因而DAC导航前期的站点可用率还是比较高的。
# 4. 网站界面美化
# 修改各处内外边距
个人喜欢紧凑型布局，故将整个页面及box的内外边距都做了修改，也即修改各处padding和margin属性
# 修改linecons图标
不太喜欢原模板中灰色的icon，因而全部换成微软自带的Emoji表情，尽量选取与每个导航分类习惯的Emoji
# 向div元素添加圆角边框
webstack网址导航交流群里一位大哥提起小米公司Logo修改的梗，说是加上圆角更值钱。
画小米的新Logo只用border-radius可不行！ - 掘金 (opens new window)
模板中设置的站点图标都是正圆，四角空白较多，感觉群友的建议很好，遂将img和box的CSS border-radius 属性分别设置为8px和10px，即你们现在的看到的样式。不过仅使用border-radius属性，效果并不是很好，可以发现圆角曲线与直边连接处有明显的折角，整体不够流畅。毕竟我没有200万，这也不是logo，但相比正圆要好看了许多。
# 5. 添加实用的的辅助插件
CrazyBoyM/WebStack-Plus: WebStack的魔改版 (opens new window)
# 增加搜索框
在页面中上部引入Javascript控制的多分类、可切换搜索框，代码如下
<link rel="stylesheet" href="https://nwuzmedoutlook.github.io/media/css/search.css">
<script type="text/javascript" src="https://nwuzmedoutlook.github.io/media/js/search.js"></script>
2
# 增加天气预报
在search.js文件中已经引入了2345天气API，可以换为中国天气等其他平台的API，但需要调整样式
# 增加评论反馈渠道
在页面右侧栏引入腾讯兔小巢评论系统，其实就是想为用户创建一个交流、反馈的渠道，例如留言告诉我哪个站点失效，有什么优质站点建议添加，或者是寻求什么资源，从而在与用户的交流中不断为DAC导航增添活力，保持用户的粘性。
腾讯兔小巢-免费便捷的用户意见反馈服务平台 (opens new window)
<a target="_blank"
href="https://support.qq.com/product/313460"
style="position:fixed;z-index:999;right:3px;bottom: 20px;display: inline-block;width: 20px;border-radius: 5px;color:white;font-size:14px;line-height:16px;background: #2476CE;box-shadow: 0 0 5px #666;word-wrap: break-word;padding: 2px 1px;border: 2px solid white;">
留言反馈🚀
</a>
2
3
4
5
受制于该导航网站模板的局限性以及我个人基本没有二次开发能力，兔小巢以及后来的匿名聊天室、故障反馈表单、DAC论坛等其实都是外链，这不仅使用户体验变差，也使得数据管理变得繁琐，总归来说不是一个特别好的方案。
# 添加随机语段
# 今日诗词
在页面左侧栏网站名称下方添加 今日诗词 - 一言API - 诗词实时智能推荐 - 今日诗词开放接口 - 今日诗词 API - 个人文章分享 (opens new window)
<span id="jinrishici-sentence">正在加载今日诗词....</span>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
2
# 每日一言
在页脚添加 Hitokoto - 一言 (opens new window)
<p id="hitokoto"><a href="#" id="hitokoto_text">💌正在加载每日一言...</a></p>
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
2
# 网易云热评
现API接口已经失效
<script>
fetch("https://cdn.ipayy.net/wangyy/api.php?encode=json")
.then(res => res.json())
.then(data => wangyy.innerText = data.content);
</script>
<p id="wangyy">🎈 正在获取网易云热评...</p>
2
3
4
5
6
# 随机诗词
<script type="text/javascript" src="http://yijuzhan.com/api/word.php?m=js"></script>
<script>document.write("<div style=\"text-align:left\">"+str[0]+"</div><div style=\"text-align:right\">——"+str[1]+"</div>");</script>
2
# 回到顶部
模板中带有如下的go-up组件，但是固定在页面底部的，必须滑到最底下才能使用，不太方便。
<div class="go-up">
<a href="#" rel="go-top">
<i class="icon-up"></i>
</a>
</div>
2
3
4
5
一直想添加一个悬浮的回到顶部按钮，试了好几个方案都失败了（来自编程小白的无奈啊😑）。转念一想，不如把按钮固定在右侧栏，模仿“留言反馈”的代码，将href由具体的网址改为#top，文本改为🔝，本地运行发现可以用。不足之处在于，按钮始终显示在右侧边栏，使用了锚点导致没有动态的上滑效果，会直接“变回”顶部，好在确实方便了许多。管他呢，又不是不能用😎
<a target="_self" href="#top" style="position:fixed;z-index:999;right:6px;bottom: 450px;display: inline-block;width: 20px;border-radius: 0px;color:white;font-size:20px;line-height:16px;word-wrap: break-word;padding: 0px 0px;border: 0px solid white;">🔝</a>
# Live2D
在页面右下角添加看板娘
<script src="./media/live2D/autoload.js"></script>
# 卜蒜子统计
在页脚添加
「我」已经运行
<script type="text/javascript">
var urodz = new Date("02/08/2021");
var now = new Date();
var ile = now.getTime() - urodz.getTime();
var dni = Math.floor(ile / (1000 * 60 * 60 * 24));
document.write(+dni)
</script>天啦！
<span id="busuanzi_container_site_pv" style='display:none'>总访问量累计
<span id="busuanzi_value_site_pv"></span>次！</span>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
2
3
4
5
6
7
8
9
10
11
12
# CNZZ统计
在页脚添加免费的CNZZ（友盟）网站流量统计插件，可实时显示在线人数、监测网站每日访问情况、查看热力图、分析用户属性等，比百度统计的免费功能好很多。
<script type="text/javascript">document.write(unescape("%3Cspan id='cnzz_stat_icon_1279696203'%3E%3C/span%3E%3Cscript src='https://s4.cnzz.com/z_stat.php%3Fid%3D1279696203%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));
</script>
<span id="cnzz_stat_icon_1279696203"></span>
<script src="https://s4.cnzz.com/z_stat.php?id=1279696203&show=pic" type="text/javascript"></script>
2
3
4
好景不长，该网站于2022年5月停止免费服务，还发送了邮件提醒。其实，在此之前就发现一些端倪，例如页脚原本显示的数据由6项减少为3项（具体记不清楚了），以为是代码出错，打开CNZZ官网才发现弹窗提醒，免费服务即将结束了。所以在下线的最后几天，我仓促的下载了一年多来的所有访问数据。付费项目对于DAC导航和我个人没有诱惑力，因此也删除了index.html中的CNZZ统计代码，暂时没有开启百度统计。
# 6. 定期更新维护网站
# 内容更新
在2022年5月23日更新Gridea后，源文件被删除（忘记备份真的很令人伤心），
# 自由推广
# 提交收录
一方面是向百度、必应、谷歌等大型搜索引擎主动提交网站等待收录；另一方面是在其他导航网站或博客友链区留言申请互相收录。
# 社群分享
通过在微信（公众号、群聊、朋友圈）、QQ（群聊、空间）、知乎（辣鸡知乎无脑删帖禁言）、B站、微博、贴吧、Github及一些论坛上分享或评论增加网站曝光度。
# 网站改版
建立网站过程中，遇到一个有着相似想法的同学——尔康 (opens new window)，原本想着以我收集的站点为基础，在他的服务器上使用WordPress中的一为主题重新搭建导航网站，但后来因为我们都忙于学业，逐渐停止了内容更新。
不够完善但还可以使用的改版导航： 皮卡之地 | 相伴一起成长 (opens new window) 附带的Wiki知识库： 人生蓝图 (opens new window)
# 社群建立
qq-group 😎DAC导航交流群 (opens new window)
# 资源共享
DAC导航的文件共享区😎→免登录、免费上传和下载资料 (opens new window)
# 网站迁移
自2023年1月18日，迁移至NWUzmed's world (opens new window)内页，变为博客内嵌导航网站，具体变化可见使用指南 (opens new window)。