效果展示
链接为：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还经常展示不出来，后面无奈还是放弃了。
虽然说后面还是会一直输出内容，但是不会再自建博客系统了，因为那对于小弟我来说，不是一件小事情，费钱费力不说，效果好不好，典型的吃力不讨好，所以后续直接在掘金中写的文章，但是小弟在使用掘金的过程中，一直感觉不是很舒服，我更加趋向于将掘金作为自己的学习平台，输出一些学习笔记等等，所以文章分类和标签尤其重要，这样可以更快的找到我所写到的笔记。
