使用bython给我掘金主页自定义个性化页面
掘金是一个非常好的平台,但是在使用掘金过程中,想回顾之前写的文章,比如按照标签分类、阅读 或者 评论排行榜排序,这些基础功能都是没有的,且主页链接非常长,如:juejin.cn/user/298153… ,非常不容易记住,所以本篇文章将写一个页面统计如上信息(只完成了按照标签分类),定制个性化域名链接,最关键的是白嫖服务,不用担心服务器成本。
效果展示
链接为:pdudo.gitee.io/
基于以上这些原因,所以我基于掘金平台的前提下,写了一个整理界面,来整理和归纳我在掘金所写的文章,目前它的界面大致是这样的:
我可以通过标签的方式,来更快的找到我所需要的内容,点击标签效果大概是这样的:
所以,这篇文章接下来,将会阐述我是如何来统计掘金文章的。
阅读本篇文章,你将会收获如下知识:
gitee Pages
服务申请与部署。python
的基础信息。bootstrap
基础信息。brython
的基础信息。
如果说,你是一名前端人员,那么该项目对于您而言,是个小easy
,对于非前端而言,甚至于javascript
都不是很熟悉的我来说,是有些许难度的,所以,如果觉得文章写的不好,请勿喷。
设置gitee pages
Gitee Pages
是一个静态网站托管服务,如果你对此还不是很熟悉,建议查看一下gitee pages
说明文档: gitee.com/help/articl… 。
这里说明一下,为什么不使用Github Pages
呢? 大概有2个原因
github pages
有时候会很卡,大陆提交页面到github
仓库也是一样的,会非常影响访问感受。- 小弟其实对开源中国OSC是非常有感情的,也非常崇拜红薯,在学生时期也曾多次白嫖源创会,甚至还收藏了开源内裤。
所以,基于以上原因,我选择了gitee pages
作为静态页面托管服务。
创建仓库
在gitee
页面下,点击右上角的加号(+),选择【新建仓库】。
这里创建的仓库名和自己用户名一样即可,例如:
这里要注意哦,只有仓库名和用户名一样,生成的静态页面才不会默认被加路径。
仓库创建之后,我们仅需上传一个html
文件至该仓库下,而后开启gitee pages
即可。这里往gitee提交文件就不再啰嗦,提交后文件如下:
注意:这里创建成功后,需要将仓库给开源出来,不能设置为私有。
上传成功后,仅需将gitee pages
启用即可。
点击【服务】【Gitee Pages】 进入到pasge
页面。
选择正确的分支,确认是否需要开启https
,设置完毕后,点击【启动】即可。
启动成功后,gitee
会输出一个网址给我们,我们浏览后,可以得到我们刚刚上传的静态页面。
至此,gitee pages
设置完毕。
获取掘金文章信息
我们要如何获取掘金文章信息呢,此时我们需要debug
一下,
浏览器打开掘金网页,点击【头像】【我的主页】,选择【文章】,例如
此时按下【F12】打开浏览器控制台,选择【网络】【Fetch/XHR】,如:
再次刷新网页,
此时如果你注意看的话,会注意到有请求到 api.juejin.cn/content_api… 页面,对该api
会返回我们的文章信息,该接口每次会展示10个。
基于此,我们想拿到文章信息,有很多种方法可以操作,可以使用python requests
库重复请求该接口,使提交的json
数据中的cursor
持续+10即可,当接口数据返回个数小于10的时候,证明文章全部拿完了。
但是不太建议去刷接口(除非优弧同意让我爬),可以像我一下,在控制台中,过滤query_list?
数据,而后将响应的数据复制到一个文本files.txt
中。
只需要从文件中获取我们想要的文件就可以了,具体脚本如下:
import json
import time
isAuthor = False
infoLists = {}
infoLists["data"] = []
infoLists["author"] = {}
with open("files.txt",encoding="utf-8") as f:
line = f.readline()
resultData = json.loads(line)
for i in resultData["data"]:
if isAuthor == False :
infoLists["author"]["name"] = i["author_user_info"]["user_name"]
infoLists["author"]["description"] = i["author_user_info"]["company"] + "|" + i["author_user_info"]["job_title"] + "|" + i["author_user_info"]["description"]
infoLists["author"]["updateAt"] = time.strftime("%Y-%m-%d", time.localtime(time.time()))
isAuthor = True
dicts = {}
days = time.strftime("%Y-%m-%d", time.localtime(int(i["article_info"]["ctime"])))
dicts["createTime"] = days
dicts["id"] = i["article_id"]
dicts["title"] = i["article_info"]["title"]
tagList = []
for tag in i["tags"]:
tagList.append(tag["tag_name"])
dicts["tags"] = tagList
infoLists["data"].append(dicts)
with open("data.py","w") as f:
f.write("data = " + str(infoLists))
上述脚本,先是定义了一个字典infoLists
,该字典将用户存储我们赛选之后的数据,接着便通过with ... open
的方式读取文件,按照每行读取,将其从字符串转换为字典类型,接着遍历字典中的data
数据,塞选出作者的信息(由于是抓取本人信息,所以拿到一次便够了),文章信息,包括文章id
、创建时间、文章的标签等等。最后将infoLists
写入到文件中,将作为源来使用。
代码执行后,效果如下:
如果细心发现,我们写入的是data.py
,是的,它是一个python
文件。
前端页面布局
我们前端页面使用的是bootstrap
框架,版本是4.6.2
,布局相较简单一点,大概图示为:
使用bootstrap
栅格化,可以很快的为我们定义出来这套demo
,代码为:
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous" />
<div class="container">
<div style="height: 50px;">作者信息</div>
<div class="row">
<div class="col-md-10" style="background-color: beige; height: 600px;">
这是文章链接
</div>
<div class="col-md-2" style="background-color: aquamarine;">
这是标签信息
</div>
</div>
</div>
上述代码,首先引入了4.6.2版本的bootstrap
的css
样式。而后定义了一个有边框举例的div,定义了一个div
来存放作者信息,而后有栅格网格系统,为文章链接分配5/6的区域,为标签信息分配了1/6的区域,最终的效果如下:
bootstrap
提供了很多的组件以及工具,可以参考v4.bootcss.com/docs/gettin…。
在此基础上,增加一些静态数据,代码如下:
<html>
<head>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous" />
</head>
<body>
<div class="container">
<h2 class="text-muted">花开富贵岁月静好</h2>
<small class="text-muted">弧家军|运维|上善若水,一生追求。</small>
<div class="text-warning text-right">
页面更新时间:2023-06-02
</div>
<hr />
<div class="row">
<div class="col-md-10">
<div>
<a href="https://juejin.cn/post/7230826178913992765" class="text-decoration-none">
<div class="h5 p-3 bg-light text-info">
2023-05-09 python|如何将编写的模块打包上传至pypi
</div> </a>
</div>
<div>
<a href="https://juejin.cn/post/7230457573718769723" class="text-decoration-none">
<div class="h5 p-3 bg-light text-info">
2023-05-08 使用let's encrypt申请免费的SSL证书
</div> </a>
</div>
</div>
<div class="col-md-2" id="tags">
<h5>标签</h5>
<hr />
<li class="list-unstyled"> <a href="#" class="text-decoration-none">
<div class="h6 p-1 text-info" data-tag="后端">
后端
</div> </a> </li>
<li class="list-unstyled"> <a href="#" class="text-decoration-none">
<div class="h6 p-1 text-info" data-tag="Python">
Python
</div> </a> </li>
</div>
</div>
</div>
</body>
</html>
实际的效果如下:
引入brython
我们最终效果并不是展示一个静态页面,而是一个“动态的”页面,即用户点击标签后,会赛选相应的文章,由于缺乏javascript
相关知识,所以这块就使用了python
来代替,还记得前面段落所提及的获取掘金文章信息么,我们将其结果保存为data.py
,正好可以直接供brython
调用。
引入brython
非常简单,只需要引入brython.min.js
和brython_stdlib.js
,就可以畅快在浏览器的编写python
代码了。
这里列举一个小案例:
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brython@3.11.0/brython.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brython@3.11.0/brython_stdlib.js"></script>
<body onload="brython()">
<script type="text/python">
from browser import document
from browser import html
document <= html.H1("Hello Pdudo")
</script>
</body>
如上代码,引用了brython.min.js
和brython_stdlib.js
,在body
处标注了使用onload="brython()"
,接着便新起一个script
标签,往页面上写一个Hello Pdudo
,效果如下:
关于博客的python
这里贴一下,如果你熟悉python
,相信很快就能上手,如果你不太熟悉brython
可以查看我的专栏: juejin.cn/column/7153…。
建议这里结合index.html
文件查看,因为该文件自定义了很多id,git地址为: gitee.com/pdudo/pdudo
from browser import document
from browser import html
import data
# 文章展示页面
content = document["content"]
tags = document["tags"]
tagDicts = {}
# 作者信息
document["title"] <= data.data["author"]["name"] + "的博客"
document["username"] <= data.data["author"]["name"]
document["description"] <= data.data["author"]["description"]
document["updateAt"] <= "页面更新时间:" + data.data["author"]["updateAt"]
def showContents(datas,collectionTags):
content.clear()
# 渲染页面
for blog in datas:
div = html.DIV()
titleDiv = html.DIV(blog["createTime"] + " " + blog["title"])
titleDiv.className = "h5 p-3 bg-light text-info"
a = html.A()
a.href = "https://juejin.cn/post/" + blog["id"]
a.className = "text-decoration-none"
a <= titleDiv
div <= a
content <= div
if collectionTags:
for tag in blog["tags"]:
tagDicts[tag] = None
showContents(data.data["data"],True)
def showTagContents(ev):
divs = ev.target
tag = divs.dataset["tag"]
datas = []
for blog in data.data["data"]:
if tag in blog["tags"]:
datas.append(blog)
showContents(datas,False)
tags <= html.H5("标签")
tags <= html.HR()
for tag in tagDicts:
li = html.LI()
li.className = "list-unstyled"
div = html.DIV(tag)
div.className = "h6 p-1 text-info"
div.dataset["tag"] = tag
a = html.A(div)
a.href = "#"
a.className = "text-decoration-none"
a.bind("click",showTagContents)
li <= a
tags <= li
其实上述代码整体逻辑并不复杂,大概可以理解为,从data.py
中的data
变量读取信息,遍历文章信息的时候,将文章的标签收集到tagDicts
字典中,而后再遍历tagDicts
字典,将标签的信息也追加到页面上,并且为每一个标签定义一个点击事件showTagContents
。
当用户点击标签的时候,会执行showTagContents
方法,该方法会获取点击的tag
值,并且在data.py
中的data
进行搜索,搜索完毕后,刷新链接区域,并且将刚获取到的信息重置上去,这样便可以获取标签的信息了。
总结
作为一名运维“老兵”,我也曾经有过博客梦,曾经也买过云服务器,从头到脚写过博客系统,也曾使用过静态页面工具如Hexo
之类的,但是无一例外,都失败了。
失败的原因有多种,自建的博客系统,是因为技术不到家,导致在后台编写内容的时候数据老是丢,发布后,整个页面排版非常难看,关键是代码颜色等展示的不是很全,要兼容的东西太多了,最后服务器到期了,就放弃了。
而使用Hexo
这类工具的时候,非常依赖于本地工具,如果在多个设备修改内容的话,还需要先将没写好的内容给同步到git
,到另外一台再拉取,这不仅非常费时耗力,还必须要求2台设备的编辑工具甚至于环境都需要一致。当时使用的是typora
,在进行Hexo
图片路径设置的时候,吃了不少苦头,打包到git page
还经常展示不出来,后面无奈还是放弃了。
虽然说后面还是会一直输出内容,但是不会再自建博客系统了,因为那对于小弟我来说,不是一件小事情,费钱费力不说,效果好不好,典型的吃力不讨好,所以后续直接在掘金中写的文章,但是小弟在使用掘金的过程中,一直感觉不是很舒服,我更加趋向于将掘金作为自己的学习平台,输出一些学习笔记等等,所以文章分类和标签尤其重要,这样可以更快的找到我所写到的笔记。