用 Sphinx 搭建部落格時,如何自定義外掛?
之前有不少同學看過我的個人部落格(http://python-online.cn),也根據我寫的教程完成了自己個人站點的搭建。
點此:使用 Python 30分鐘 教你快速搭建一個部落格
為防有的同學不清楚 Sphinx ,這裡還是做下簡單的介紹。
它是一個能夠把一組 reStructuredText 或者 Markdown 格式的檔案轉換成各種輸出格式,而且自動地生成交叉引用,生成目錄等的一個文件編排工具。
不得不說,它的排版功能強大、非常清晰,顔值非常高。
但是使用這個方法搭建的部落格,一直有一個痛點,就是無法自定義頁面,自由度非常的低(和 WordPress 真的沒法比)。
這就導致我一直不知道到底有沒有人訪問我的網站?
他們都是從哪來訪問的,Google 還是 百度?
每篇文章都有多少人訪問,哪篇文章最受歡迎?
我一直在我的部落格上貼上我的公眾號二維碼,可到底因此關注我的人有多少呢?
因此我一直希望能找到一個能夠收集網站訪問資料、並且能將部落格上的訪客引導到公眾號上來的方法。
終於在昨天,我找到了,並花了兩天的時間成功上線。
方法就是引入兩個 JavaSript 外掛實現(這個在早期的 Sphinx 版本中是不支援的)。
第一個外掛:導流工具
作用:這個主要用來將自己部落格上流量引到自己的公眾號上。
具體是思路是:
遊客無法閱讀部落格的全部內容,因為會有一半的內容會被隱藏。就像這樣。
如想要閱讀全文,可以點選全文進行解鎖:用微信掃描二維碼關注我的個人公眾號,傳送 more
思路有了,那麼如何實現呢?
以上功能其實已經有人已經做出來並可以提供免費使用。
你可以在 https://openwrite.cn/
註冊一個帳號,然後在裡面你可以看到一個導流工具,填寫你的公眾號及引流的相關資訊後,就初始化成功,獲得一串js程式碼。
接下來,你要做的就是將這串js接入你的部落格頁面中。
由於我去年搭建這個部落格時使用的 Sphinx 的版本是 1.7 ,這個版本是不支援自定義css/js 檔案的。
因此,你要使用引入這段js程式碼,需要將你的 Sphinx 升級到 1.8+,我使用的是最新版本的 2.1 ,這個版本只支援 Python 3.5+。
因此在使用之前,我得先將環境的切換至 Python 3.5+。
virtualenv -p /usr/bin/python3.6 myblog
然後安裝 Sphinx 及相關包
pip install Sphinx sphinx-rtd-theme -i https://pypi.douban.com/simple
問題一
雖然現在我們的 Sphinx 已經支援自定義js了(方法是將一個js檔案以引用的方式放在 header 標籤裡)
但是 OpenWrite 要實現 閱讀全文
的效果,這個readmore.js必須放在 HTML 的尾部,意思是要等頁面載入完成後才能起作用。
這下就尷尬了。Sphinx 會將 readmore.js 放在 HTML 頂部,而要實現 閱讀全文
的效果,readmore.js 需要放在底部。由於框架是固定的,我們無法對其進行定製修改。那還有什麼方法可以補救呢?
我的方案是:在 readmore.js 中加入邏輯,當頁面載入完成後再執行。
問題二
若想 readmore.js 起作用,前提是你的文章的正文div中需要有一個id=‘container’屬性, 而這個 Sphinx 是不會生成的。
這樣的話,這個動態新增 id 屬性的工作也只能交由 readmore.js 來做了。
問題三
由 Sphinx 生成的的所有頁面都會加引入這個 readmore.js 外掛,這就導致所有的頁面(包括首頁,索引頁)都會有 閱讀全文
的限制。這明顯是不合理的。
為了解決這個問題,我想的是在 readmore.js 中,根據 url 進行判斷,只有文章頁面才有限制,而其他的頁面則不受限制。
總結一下,這個 readmore.js 會做三件事:
- 判斷頁面是否載入完成,載入完成後才執行;
- 給 class 為 rst-content 的 div 加一個 id 屬性:container;
- 根據網頁地址判斷是否文章頁面,是則執行,否則不執行;
如果你不想自己寫,可以在我的公眾號後臺回覆“導流”,直接用我寫好的js檔案。
獲取到的js檔案需要放在固定的路徑下: source/_static/js/
(如果沒有此路徑就手動建立),然後修改 conf.py
html_static_path = ['_static']
html_js_files = [
'js/readmore.js',
]
按理說,這樣就已經大功告成了。
但是別忘了,我們是用 readthedocs 生成我們的部落格頁面的。
為此,我們同樣也要在 readthedocs 進行相關的配置。
- 改 CPython 2.x 為 CPython 3.x
- 指定我們的本地最新生成的 requirements.txt
(注:使用 pip freeze >requirements.txt 生成)
同時你如果之前是看過我寫的教程,使用過我的中文檢索外掛,那你要注意了。
此前這個外掛是基於 Python 2.x 寫的,現在我們切換成 Sphinx 專案切換成 Python 3.x ,所以這裡的程式碼也要對應修改。
改動也不大,只要把 exts/smallseg.py
這個檔案裡的 decode 相關的程式碼全部去掉即可。
一切按照上面的步驟全部設定完成後,提交Github後,再次從 readthedocs 構建就可以看到效果了。
對於這個功能,我幾點要說明:
- 對於經常看我部落格的同學,如果你已經關注我的公眾號,仍然需要你驗證一下。
- 如果你換電腦、瀏覽器,會需要你重新驗證,這點希望大家包容。
第二個外掛:百度統計
作用:用於收集個人網站的訪問資料。
有了上面的經驗,現在我們知道如何在頁面中外掛自定義 js 程式碼。
那我就想有沒有那種可以通過引入 js 外掛來收集網站的訪問資料呢?
這種工具應該不少,而我使用的是百度家的產品 - 百度統計
。
它可以幫我們收集網站訪問資料,提供流量趨勢、來源分析、轉化跟蹤、頁面熱力圖、訪問流等多種統計分析服務。
那怎麼使用呢?
首先使用你的百度帳號登陸 百度統計
。
然後在網站列表新增一個你的網站,我的資訊如下:
填寫完成,就可以獲取一段屬於你的網站的專屬 js 程式碼(下面第一步)。
第二步內容,是教你如何安裝這段 js 程式碼。
將這段程式碼內容寫入一個單獨的 js 檔案:baidutongji.js
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?xxxxxxxx";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
並修改 conf.py 後,提交至你的 Github。
html_js_files = [
'js/readmore.js',
'js/baidutongji.js'
]
一切完成後,就可以去 readthedocs 重建構建。
構建完成後,去執行第三步,程式碼安裝檢查。像我下面這樣,就是安裝完成了。
這個外掛安裝完成後,如果你的網站有流量,可以過個一個小時,點選一下檢視報告檢視你網站的詳細訪問資料。
資料真的非常全面,你可以知道,訪客都是從哪裡訪問(直接訪問,Google等),每篇文章的點選量(你就知道哪篇是爆款?),每天有多少老訪問客,多少新訪客等等,更多維度的資料你可以自己去體驗一下。
相關推薦
用 Sphinx 搭建部落格時,如何自定義外掛?
之前有不少同學看過我的個人部落格(http://python-online.cn),也根據我寫的教程完成了自己個人站點的搭建。 點此:使用 Python 30分鐘 教你快速搭建一個部落格 為防有的同學不清楚 Sphinx ,這裡還是做下簡單的介紹。 它是一個能夠把一組 reStructuredText 或者
用markdown寫csdn部落格時,改變圖片的大小。
1,在markdown編輯頁面,上傳圖片,獲得連結。如: ![這裡寫圖片描述](https://img-blog.csdn.net/20180226163056873?watermark/2/te
用Hexo搭建部落格(二)——修改基本內容
在 Hexo 中有兩份主要的配置檔案,其名稱都是 _config.yml。 其中,一份位於站點根目錄下,主要包含 Hexo 本身的配置;另一份位於主題目錄下,這份配置由主題作者提供,主要用於配置主題相關的選項。 1 語言設定 開啟站點目錄下的“_config.yml”
vue導航守衛beforeRouteLeave瀏覽器返回時,自定義彈窗提醒使用者儲存資訊
H5頁面中經常會遇到的情況,當前頁面點選返回,想要提示彈窗"是否確認離開當前頁面"之類的需求。自己試著看了一下網上的方法,大多是alert出系統彈窗。其實要實現自定義彈窗提示,也是很容易的。 從另一個頁面點選跳轉到當前頁(如下),點選瀏覽器返回按鈕,則會彈窗下面的彈窗,點選彈窗確定按鈕,頁面
在AndroidStudio3.0上打包APK時,自定義檔名
在module的gradle檔案中: buildTypes { release { minifyEnabled false proguardFiles getDefaultP
Django-rest_framework中利用jwt登入驗證時,自定義返回憑證和登入校驗支援手機號
安裝 pip install djangorestframework-jwt 在Django.settings中配置 REST_FRAMEWORK = { 'DEFAULT_AUTHENTICATION_CLASSES': ( 'rest_framework_jw
資料庫儲存為null時,自定義字元標識。使轉為json資料後,列不丟失或有undefined。
當查詢的資料中,列mno為空時,用“-”代替,也可以用中文之類代替,比如“暫空”,這裡採用“-”代替。 只需要在sql語句新增IFNULL(m.mno,’-‘) AS mno進行處理即可,例如: SELECT IFNULL(m.mflighno,'-') AS mflighno,m.*
【分享】部落格美化(2)自定義部落格樣式細節
這一篇將根據我的部落格目前使用的SimpleMemory模版和自己的理解來分析下,CSS檔案的一些內容。如果不當,還請大家指正,因為我本身也不是很懂CSS,加上部落格園這個CSS檔案還挺大,內容挺多,搞錯了,還請大家理解。我自己都是改好後,上傳到部落格,看效果,不滿意再改。 進入主題之前,先感
部落格園的自定義面板
公用*/ body { font-size:15px; padding:0; margin:0; font-family:"微軟雅黑","宋體",Arial; background:#205424 url('http://mat1.gtimg.com/www/mb/th
經典SQL語句大全-【轉載自】部落格園,作者部落格:YuBinfeng's Technology Blog
因最近學習MySQL,閒來無事逛帖子時,發現這篇較為經典的部落格,特轉載以防備用學習,同時希望也可以幫到他人,廢話不多說,進入正文 一、基礎 1、說明:建立資料庫 CREATE DATABASE database-name 2、說明:刪除資料庫 drop data
學會這些Markdown常用語法,你就能立刻用markdown寫部落格啦!
文章目錄 前言 標題 列表 無序列表 有序列表 引用 分割線 連結 連結行內式 連結引數式 圖片 圖片行內式 圖片引數式 程式碼
Oracle database和client 安裝教程(轉自部落格園,用於備忘)
** database ** 1.先到Oracle官網上下載11g oracle Database 11g 第 2 版 (11.2.0.1.0) 標準版、標準版 1 以及企業版 適用於 Microsoft Windows (x64) 的 Oracle Datab
用git bash 生成 hexo 部落格檔案,報錯node: command not found
有git bash,也安裝了node.js, 為什麼在bash裡面會說node: command not found? 電腦有段時間不能上網,下載了360系統急救箱,刪了很多檔案,包括一些exe檔案,可能是被病毒感染了 檢視nodejs的安裝資料夾,發現no
Django 快速搭建部落格 第七節(文章詳情頁,markdown語法)
更多最新原創文章請訪問:最新原創主頁 更多最全原創文章請訪問:更多原創主頁 上一節我們把真正的index.html顯示出來了,只是一個摘要,接下來我們要做的是當我們點選標題或者繼續閱讀的時候,會開啟詳情頁 1 base.html的
使用 Hexo 和 GitHub 搭建部落格,出現 hexo -d 報錯
問題描述 G:\blog>hexo d INFO Deploying: git INFO Setting up Git deployment… ‘git’ �����ڲ����ⲿ���
手把手教你用github pages搭建部落格 最新版
如果給你40分鐘,可以搭建一個如下圖所示的網站,你願意嗎?如果你願意,那我們就開始幹! 背景介紹 搭建部落格網站有各種各樣的方法,根據不同的需求,又不同的做法。如果你只是想單純做一個部落格,和世界分享你的觀點和視角,那麼我推薦使用 github
django搭建個人部落格11,專案釋出展示
編寫專案展示頁 1.這是專案的資料模型 class tb_projs(models.Model): projID=models.AutoField(primary_key=True,verbose_name="作品ID") title
從零開始,搭建部落格系統MVC5+EF6搭建框架(4)下,前後檯布局實現、釋出部落格以及展示。
1 @{ 2 string url = Request.Url.ToString().ToLower(); 3 } 4 @if (url.Contains("home")) 5 { 6 <aside class="col-sm-3 col-m
第一次用CSDN寫部落格,試試看
總覺得如果要把Java學好,JDK目錄下面的src裡面常用類的方法你要清楚是怎麼實現的。 1.讀原始碼: 以前學的時候覺得Java好方便,什麼方法都是寫好的,我直接瞭解API,呼叫就行,可是到了工作,我越發的覺得原始碼裡面的東西才是最精髓的。於是我在不懂的地方一般會ctrl+滑鼠左鍵在eclipse中檢視
django搭建個人部落格10,文章詳細3-評論
完善article_detail_base.html 增加評論展示以及上下篇導航欄 1.修改ArticleDetailView原生SQL執行語句,增加’上一篇’和’下一篇’導航項 def