使用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还经常展示不出来，后面无奈还是放弃了。

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

所见/所闻/所想

效果展示

设置gitee pages

获取掘金文章信息

前端页面布局

引入brython

总结

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类 (61)

随笔档案 (217)

阅读排行榜

评论排行榜

推荐排行榜

最新评论