修改知乎专栏文章发表时间的位置（编写油猴脚本）

goocheez

已于 2023-03-16 11:03:20 修改

阅读量811

点赞数 2

分类专栏： javascript 文章标签：前端 javascript 开发语言

于 2023-03-14 22:33:08 首次发布

本文链接：https://blog.csdn.net/goocheez/article/details/129540063

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章讲述了如何利用Tampermonkey或暴力猴浏览器扩展，编写JavaScript脚本来修改知乎页面布局，将文章的发表日期移到标题下方。作者提供了详细步骤，包括查找页面元素、编写脚本代码，并讨论了分享和自动更新脚本的方法，以及知乎问答页面的遗留问题。

摘要由CSDN通过智能技术生成

1. 需求

知乎上面有一些文章写的不错，但计算机技术日新月异，对于技术文章的价值而言，发表时间是个很重要的参考因素。而知乎专栏、问答，均将发表时间放在文章最后，极为不便（这一点上 CSDN 做得好多了）。
因此，我需要修改页面元素，将文章发布日期弄到标题下方，正文前方。

2. 实战

对于修改网页，直接想到的就是浏览器扩展篡改猴Tampermonkey了，当然还有个类似的扩展软件暴力猴violentmonkey，使用起来差别不大，只是支持的浏览器不太一样，根据实际选一个即可。

安装Tampermonkey的浏览器扩展（我用的是 Edge）。
展示扩展图标。为方便使用，将 Tampermonkey 的图标展示出来。点击 Edge 上方地址栏右侧的扩展，点击 Tampermonkey 旁边的三个点，选择“在工具栏中显示”。
新建工程项目。点击浏览器上的 Tampermonkey 图标，选择“添加新脚本…”，此时会在浏览器上新开一个 tab 页面，展示出油猴脚本的初始状态，如下图。
确认需修改元素。打开一个知乎专栏页面，按下 F12，查找文章标题、文章日期这两处关键点的页面元素代码，分别如下图所示。
开始编写 Tampermonkey 脚本。
1）使用 document.getElementsByClassName() 函数，获取页面元素
2）使用 Node.appendChild() 函数，插入元素
3）修改脚本相关信息，比如图标改为知乎图标。盲猜其图标为 zhihu.com/favicon.ico，然后在浏览器上试一下，果然成功。

3. 最终代码

最后的代码如下：

// ==UserScript==
// @name         上移知乎文章发表日期到标题
// @namespace    https://github.com/goocheez/GreasyFork/zhihu_timestamp_to_the_top
// @version      0.1
// @description  将知乎专栏的文章发表日期移动到标题下方
// @author       Goocheez
// @match        https://zhuanlan.zhihu.com/*
// @icon         https://static.zhihu.com/heifetz/favicon.ico
// @grant        none
// @license      MIT
// ==/UserScript==
 
function move_zhihu_timestamp_to_the_top(){
    var title = document.getElementsByClassName('Post-Header');
    var time_stamp = document.getElementsByClassName('ContentItem-time');
    if(title.length>0 && time_stamp.length>0){ // 添加条件语句，避免 js 出错
        title[0].appendChild(time_stamp[0]);
    }
}
 
(function() {
    'use strict';
    move_zhihu_timestamp_to_the_top();
})();