Hexo Next主题进阶教程
生活随笔
收集整理的這篇文章主要介紹了
Hexo Next主题进阶教程
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
注意點:
- 下面的教程,每個教程點都是用水平線分割,防止混亂
- 教程針對NexT主題設置,此教程為進階教程,基礎配置主題的教程可以查閱相關資料,以下改變的效果可以到此博客預覽
當前所在菜單下劃線顯示
效果圖:
- 打開themes\next\layout_partials文件夾中的header.swig
- 在底部添加一個腳本
- 重新部署發布即可 命令:hexo cl && hexo g && hexo d
統計站點的總訪問量,即統計瀏覽了多少次;有多少人訪問,在footer顯示
- 找到站點的themes/next/layout/_partials目錄下的footer.swig文件。插入代碼如下
效果如下:
關于博客獲取文章閱讀數量或者評論消息時獲取失敗這種情況不用擔心,有時候所處的網絡是機房或者一些有限制訪問leancloud的網絡會造成訪問不了leancloud,可以換一個網絡試試。
- 訪問不了時,網頁顯示錯誤如下: api.leancloud.cn/1.1/classes/Comment:1 Failed to load resource:net::ERR_CONNECTION_RESET
如何讓百度收錄自己的bolg
-
在百度搜索引擎搜索自己的域名查看是否收錄 site:malizhi.cn
-
如果沒有收錄,可以到此網站提交申請,驗證網站,驗證成功網站后,我們可以使用自動推送,讓百度可以收錄我們博客的所有網頁
-
百度收錄驗證時如果選擇第一種方式驗證就是把 baidu_verify_6j6lLVHSN7.html放在blog的根目錄
但是放在根目錄會有一個問題,hexo會為此html自動渲染,添加了不必要的東西,此時,百度驗證會不通過,我們要在此html中頂部添加以下內容,hexo才不會為此html自動渲染。
- 驗證成功后,打開你的hexo博客根目錄,分別用下面兩個命令來安裝針對百度的插件
- 安裝成功后hexo g,站點根目錄中的public目錄會自動生成sitemap配置文件,sitemap.xml baidusitemap.xml
- 在博客站點目錄中,添加以下配置
- 修改主題配置文件
- 修改baidu_push.swig,位置是themes\next\layout_third-party\seo,添加以下代碼(代碼來自百度自動推送):
這樣子的話每次訪問博客中的頁面會自動向百度提交。
如何把www.xxx.cn xxx.cn 轉換成https://xxx.cn
- 去到nginx的配置文件中,在80端口的server塊中配置:
如何把https://www.xxx.cn 轉成https://xxx.cn
- 去到nginx的配置文件中,(前提是你的bolg已經有安全驗證證書) 在配置文件中增加多一個server
- 然后在原來驗證bolg的443端口后面增加一小段代碼default_server ssl
在底部增加運行時間
<!-- 在網頁底部添加網站運行時間 --> <span id="timeDate">載入天數...</span><span id="times">載入時分秒...</span> <script>var now = new Date();function createtime() {var grt= new Date("07/21/2018 00:00:00");//此處修改你的建站時間或者網站上線時間now.setTime(now.getTime()+250);days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}document.getElementById("timeDate").innerHTML = "Run for "+dnum+" Days ";document.getElementById("times").innerHTML = hnum + " Hours " + mnum + " m " + snum + " s";} setInterval("createtime()",250); </script> 復制代碼效果如下:
底部跳動圖標實現
- 注意點:需要到next\layout_partials下的footer.swig文件中,在你所需要調動的圖標所對應的span中增加對應的ID
- 去到主體的css文件(next\source\css_variables) custom.styl ,增加以下代碼即可
文章加密,對應的插件文檔可以參考
github.com/MikeCoder/h…
- 在根目錄中package.json中添加依賴:
- 在站點配置文件中開啟,沒有則添加:
- 在文章中的頭部信息中添加對應的信息即可
文章置頂:
- 修改 hero-generator-index 插件,把文件:node_modules/hexo-generator-index/lib/generator.js 內的代碼替換為:
- 添加置頂標志:去到next\layout_macro下的post.swig,找到<div class="post-meta"> ,在下面添加對應代碼
效果:
減少背景線條(默認線條數可以看官方插件)
github.com/hustcc/canv…
- 對應的js在next\source\lib\canvas-nest下,修改js的count數量即可,默認是99條
在頭部菜單中,顯示有多少篇數
- 在next\layout_partials\header.swing 修改對應的代碼
- 找到對應的位置
- 可以按照我這種方法添加篇數
效果:
添加文章陰影
- 去到next\source\css_custom下,修改Custom styles文件,增加一下代碼
- 陰影的透明度、大小等可以在代碼中自由調節
效果圖:
修改網頁加載進度條顏色
- 到next\source\lib\pace,找到自己加載條對應的樣式,進行修改即可
底部小心心增加點擊動畫功能
- 確保你擁有一個以NexT為主題的Hexo博客 版本大概任意orz
- 下載hexo-next-bottomheart.js(可以把鏈接復制到下載工具中或者直接新建文件然后復制粘貼),并把它保存在/themes/next/source/js/src/目錄下。
- 使用文本編輯器打開/themes/next/layout/_layout.swig,在尾部上方新增一行(line 5),修改后的文件如下
- 使用文本編輯器打開/themes/next/layout/_partials/footer.swig, 在
line5處,修改line 5為
<div id="bottomheart" style="cursor:pointer;"><i class="fa fa-{{ theme.authoricon }}"></i></div> 復制代碼這時候,重新部署你的博客,就可以瘋狂點擊小心心啦
效果:
相冊功能
效果圖:
因為篇幅較長,另起一篇文章說明,文章地址:malizhi.cn/HexoAlbum/
如何利用 Gulp 來壓縮你的 Hexo 博客的靜態文件( html / css / js ),達到提高訪問速度的目的
- 在blog站點目錄下打開git
- 首先安裝gulp $ npm install gulp
- 繼續安裝依賴包
- $ npm install --save-dev babel-cli
- $ npm install --save-dev babel-preset-es2015
- $ npm install gulp-minify-css gulp-babel gulp-uglify gulp-htmlmin gulp-htmlclean --save-dev
- 在博客的根目錄創建文件 gulpfile.js,代碼如下:
- 壓縮方法:執行完hexo g 產生編譯文件后,執行gulp
- 看到以下信息代表壓縮成功,接下來使用hexo d 發布到服務器即可,可發現訪問速度有了改善
建議與幫助
有小伙幫有好的建議或者其他問題可以及時聯系我
- 郵箱:lizhi_ma@foxmail.com
轉載于:https://juejin.im/post/5b608955e51d4519596bbc84
總結
以上是生活随笔為你收集整理的Hexo Next主题进阶教程的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: v1816a是什么手机
- 下一篇: fabric零碎知识