源碼給你,零基礎搭建一個免費的網址導航站

NO IMAGE

大疫當前,不出去添亂是最起碼的素養,如果再能有所收穫就很完美了

宅在家裡就想著把自己之前未完成的想法一個一個都給實現了,也算是給這個漫長的假期一個交代

網址導航便是其中完成的一個,話不多說直接看效果

源碼給你,零基礎搭建一個免費的網址導航站

導航地址:nav.ops-coffee.cn,全站自適應兼容移動端

這個導航站匯聚了咖啡君多年的收藏,除了一些耳熟能詳的站點外,還收藏了許多非常有趣的網站,例如:中國妖怪百集,其收藏了大量古人文獻中的妖怪,非常詳細的記錄了各個妖怪的出處,描述甚至圖片等,讓你對中國妖怪文化有一個整體的瞭解,茶餘飯後消遣一下很有意思,類似的網站還有,期待你的探索

導航站的另一個特色是收藏了大量的咖啡君平時用到的非常好用的工具軟件,大部分都是在線的,無需下載安裝,包含了文檔協作、共享,圖片、音頻、視頻處理,格式轉換,文件傳輸,各網站視頻下載等等,兼職就是一個工具百寶箱

如果你覺得網站這些與你的使用習慣不符,或者想添加一些自己收藏的網站,那麼源碼給你,只需要簡單的修改就可以變成符合自己使用習慣的獨一無二的導航

如何修改

導航站採用純靜態構建,下載源代碼後只需要修改html文件中的li代碼塊即可,li代碼塊結構如下:

<li>
<a class="nav-item clearfix" href="https://music.163.com/" target="_blank">
<div class="nav-img"
style="margin-bottom:40px;background-image: url(/images/icon/m163.png);">
</div>
<div class="nav-name">網易雲音樂</div>
<p>音樂社區,不止是播放器</p>
</a>
</li>

僅需修改四個地方,分別對應了網站的四個關鍵信息:

修改https://music.163.com為對應網站的URL地址

修改/images/icon/m163.png為對應網站的Logo地址

修改網易雲音樂為對應網站的名稱

修改音樂社區,不止是播放器為對應網站的描述

如何發佈

藉助Github Pages即可實現免費發佈網站,隨時隨地使用導航,具體方法如下:

新建一個github倉庫,倉庫名稱為xxx.github.io,xxx為你的github用戶名

源碼給你,零基礎搭建一個免費的網址導航站

將已經修改好的導航站代碼上傳至新建的倉庫中,然後你就可以通過xxx.github.io來訪問導航站了

如果不確定訪問的域名可以點擊倉庫的Settings,拉到GitHub Pages段查看

Your Site Published at後邊跟的便是你的域名

源碼給你,零基礎搭建一個免費的網址導航站

當然在這裡你也可以綁定自己的域名,例如咖啡君就綁定了nav.ops-coffee.cn,同時可以強制啟用HTTPS協議,無需單獨申請證書,且也不用擔心證書過期問題,這一些Github都幫你做了,並且還是免費的

Github Pages免費好用還穩定,唯一的缺點是訪問稍慢

源碼地址

掃描下方二維碼,關注公眾號,後臺回覆08,獲取源碼地址

導航站剛剛上線,資源還在持續更新中,如果你有什麼酷站推薦或者意見建議歡迎給我留言


源碼給你,零基礎搭建一個免費的網址導航站

相關文章推薦閱讀:

相關文章

Djangomodel重寫save方法及update踩坑記錄

GithubPages訪問太慢?通過Netlify免費加速

關於編碼你必須知道的知識和技巧

神器推薦|辦公室久坐的你不可錯過的神器