掘金是一个非常好的平台，但是在使用掘金过程中，想回顾之前写的文章，比如按照标签分类、阅读 或者 评论排行榜排序，这些基础功能都是没有的，且主页链接非常长，如：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还经常展示不出来，后面无奈还是放弃了。
虽然说后面还是会一直输出内容，但是不会再自建博客系统了，因为那对于小弟我来说，不是一件小事情，费钱费力不说，效果好不好，典型的吃力不讨好，所以后续直接在掘金中写的文章，但是小弟在使用掘金的过程中，一直感觉不是很舒服，我更加趋向于将掘金作为自己的学习平台，输出一些学习笔记等等，所以文章分类和标签尤其重要，这样可以更快的找到我所写到的笔记。
