用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建

点此使用 Python 30分钟 教你快速搭建一个博客

为防有的同学不清楚 Sphinx ,这里还是做下简单的介绍。

它是一个能够把一组 reStructuredText 或者 Markdown 格式的文件转换成各种输出格式,而且自动地生成交叉引用,生成目录等的一个文档编排工具。

不得不说,它的排版功能强大、非常清晰,顔值非常高。

但是使用这个方法搭建的博客,一直有一个痛点,就是无法自定义页面,自由度非常的低(和 WordPress 真的没法比)。

这就导致我一直不知道到底有没有人访问我的网站?

他们都是从哪来访问的,Google 还是 百度?

每篇文章都有多少人访问,哪篇文章最受欢迎?

我一直在我的博客上×××底因×××少呢?

因此我一直希望能找到一个能够收集网站访问数据、并且能将博客上的访×××

终于在昨天,我找到了,并花了两天的时间成功上线。

方法就是引入两个 JavaSript 插件实现(这个在早期的 Sphinx 版本中是不支持的)。

第一个插件:导流工具

作用:这个主要用来将自己博客上流量引×××是思路是:

游客无法阅读博客的全部内容,因为会有一半的内容会被隐藏。就像这样。

如想要阅读全文,可以点击全文进行解锁:用微信扫描二维×××ore` ,将获取到的验证码填入如下文本框提交即可永久解锁本博客的所有干货文章。

思路有了,那么如何实现呢?

以上功能其实已经有人已经做出来并可以提供免费使用。

你可以在 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 会做三件事:

  1. 判断页面是否加载完成,加载完成后才执行;
  2. 给 class 为 rst-content 的 div 加一个 id 属性:container;
  3. 根据网页地址判断是否文章页面,是则执行,否则不执行;

如果你不想自己写,可×××流”,直接用我写好的js文件。

获取到的js文件需要放在固定的路径下: source/_static/js/ (如果没有此路径就手动创建),然后修改 conf.py

html_static_path = [‘_static‘]

html_js_files = [
    ‘js/readmore.js‘,
]

按理说,这样就已经大功告成了。

但是别忘了,我们是用 readthedocs 生成我们的博客页面的。

为此,我们同样也要在 readthedocs 进行相关的配置。

  1. 改 CPython 2.x 为 CPython 3.x
  2. 指定我们的本地最新生成的 requirements.txt

:使用 pip freeze >requirements.txt 生成)

同时你如果之前是看过我写的教程,使用过我的中文检索插件,那你要注意了。

此前这个插件是基于 Python 2.x 写的,现在我们切换成 Sphinx 项目切换成 Python 3.x ,所以这里的代码也要对应修改。

改动也不大,只要把 exts/smallseg.py 这个文件里的 decode 相关的代码全部去掉即可。

一切按照上面的步骤全部设置完成后,提交Github后,再次从 readthedocs 构建就可以看到效果了。

对于这个功能,我几点要说明

  1. 对于经常看我博客的同学,如果你已×××验证一下。
  2. 如果你换电脑、浏览器,会需要你重新验证,这点希望大家包容。

第二个插件:百度统计

作用:用于收集个人网站的访问数据。

有了上面的经验,现在我们知道如何在页面中插件自定义 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等),每篇文章的点击量(你就知道哪篇是爆款?),每天有多少老访问客,多少新访客等等,更多维度的数据你可以自己去体验一下。

原文地址:https://blog.51cto.com/14237772/2443768

时间: 2024-10-11 05:21:11

用 Sphinx 搭建博客时,如何自定义插件?的相关文章

使用coding和hexo快速搭建博客

欢迎访问我的个人博客皮皮猪:http://www.zhsh666.xyz 今天教大家怎么用hexo快速搭建自己的博客.我不是专业人士,不懂前端知识,所以我十分讨厌那些专业术语,讲了一大堆,对于技术小白来说,就像听天书一样,云里雾里的.所以下面的内容都是我自己的理解,语言很通俗,有可能说的不那么专业,还望专业人士勿喷. 首先声明一点,刚开始搭建博客会比较麻烦,有很多东西大家可能以前没有听说过,不要怕,耐着性子一边看教程一边动手操作,你一定能够做出来的!好吧,废话不多说,现在开始! hexo hex

使用ASP.NET MVC+Entity Framework快速搭建博客系统

学习 ASP.NET MVC 也有一段时间了,打算弄个小程序练练手,做为学习过程中的记录和分享. 首先,得确定需求,木有需求的话,那还搞个毛线呀!嗯--大致思考了一下,终于得出如下需求: 1.能自定义分类 2.能发文章 OK!就这样,先从简单的开始(其实是复杂的不会做),后面有需要再添加(希望水平能达到).功能确定了,那么改确定要做成什么样子的了.先和度娘商量一下先-- 终于在我的淫威之下,度娘交出了一个比较简洁的,源网站在这里(表示感谢),被小弟阉割了之后效果如下图: 接下来就开始编码了么?嗯

Django搭建博客网站(三)

Django搭建博客网站(三) 第三篇主要记录view层的逻辑和template. Django搭建博客网站(一) Django搭建博客网站(二) 结构 网站结构决定我要实现什么view. 我主要要用view展示首页,标签页,网站管理员(也就是本人啦)信息页,以及文章详情页. settings.py 因为到这个阶段需要编写html文件了,但是每一个网页的每一行代码都靠自己去写,各种渲染也靠自己去写的话,太麻烦了,Django提供了html模板功能,可以在settings.py里面进行配置. #

Django搭建博客网站(四)

Django搭建博客网站(四) 最后一篇主要讲讲在后台文章编辑加入markdown,已经在文章详情页对markdown的解析. Django搭建博客网站(一) Django搭建博客网站(二) Django搭建博客网站(三) 要用到的package django-pagedown markdown2 django-pagedown用来在后台生成markdown编辑器,markdown2则是用来将markdown解析成html显示在网页上. install $ pip install django-

博客园 主题自定义美化

第一步,上传自定义的css 在浏览器中直接打开https://files.cnblogs.com/files/JetpropelledSnake/cnblogs.css,然后按ctrl + s,即可将本人博客用到的自定义css下载下来.接着在博客的管理页面,找到文件选项卡,上传刚刚下载的文件: 上传之后,记下该文件的url,如上图中的红框所示.注:上图中的url为本人博客的自定义css文件地址,你在后面设置的时候虽然也可以用它,但是最好还是不用,万一将来我把这个文件删了,你的博客就访问不到这个c

Hexo+NexT(零):最全Hexo+Next搭建博客教程

快速.简洁且高效的博客框架 有位大神说,喜欢写博客的人的人,折腾博客会经历三个阶段.找到一个免费空间,搭建一个博客,很欣喜,很有成就感,此为一阶段:受限免费空间各种限制,自己买空间和域名,实现对博客的完全控制,此为二阶段:管理网站太累,只想安安静静码文字,管理网站这种琐事,交给专业的人士去打理吧,此为博客人生的最高阶段. 对于我这种完美控的人,既入了坑,自然是要直达最高阶段了.所以,现在我主机在手,域名也有,网站基本框架建好,一下子实现了少操心,多码字的幸福生活.不过,总觉得过程如白驹过隙,太短

Hexo快速搭建博客

1. 准备工作 ~ 安装node.js -> npm -> hexo-cli ~ 安装git -> 版本控制工具 2. 更换npm(nodejs package manager)源 npm config set registry http://registry.npm.taobao.org/ 3. 安装hexo-cli npm install -g hexo-cli 4. 使用hexo搭建博客 hexo init blog -> 创建博客目录 cd blog -> 进入目录

hexo零基础搭建博客系列(一)

关于其他搭建 hexo4快速搭建博客(二)更换主题 hexo4快速搭建博客(三)美化 很全面 收集很多资料 hexo4快速搭建博客(四)写作技巧包含图床和自动变图床的插件 hexo4搭建博客系列(五)优化博客(无坑) 部署到阿里云 hexo4搭建博客系列(六)百度,必应,谷歌收录(无坑) 搭建一个博客不难,但是网上资料好多坑.可能我有些会写错,请在评论指出.但是有经过测试的.我用的版本是 hexo4.0 + NexT7.6版本. 我的个人博客 有阿里云服务器就可以部署上去,没有也可以用githu

Github + Hexo 搭建博客

服务加速 brew 加速 http://blog.suconghou.cn/post/homebrew-speedup/ github加速 http://www.selfrebuild.net/2016/11/01/github-fast-host/ 零基础搭建博客 brew 安装指定版本的 nodejs http://blog.csdn.net/jonahzheng/article/details/51967438 hexo 命令创建博客 http://blog.csdn.net/jzooo/