博客园高仿more功能？

• 2021 年 4 月 2 日
• 筆記
• 博客园二次开发

博客园高仿more功能？

如果用过静态页面生成器写过博客就知道，more功能是比较受欢迎的。

因为要将文章抽象成一种关系数据库的实体，主流后端博客却不支持这种特性，重复的字段无疑会加大数据冗余，对此可以从客户端处理这部分内容，这篇文章记录的自必同学的方案。

Case用例

文章 -> | 获取more标签内容 -> http.get

Code代码

• http.get

function Get(url, next) {
    const http = new XMLHttpRequest();
    http.open("GET", url, true)
    http.send(null)
    http.onreadystatechange = function () {if (http.readyState === 4) next(http)}
}

• 获取more标签内容

function MoreTagProc(url, section, proc) {
    Get(url, function (data) {
        var tmp = data.responseText;
        var number = tmp.search(section);
        if (number === -1) return
        tmp = tmp.slice(number + section.length, -1);
        number = tmp.search(section);
        if (number === -1) return
        tmp = tmp.slice(0, number);
        proc(tmp);
    })
}

section就是定义的分割表情，这里使用br标签作为tag<br class="more">

• 文章

document.querySelectorAll(".c_b_p_desc").forEach(function (e) {
    MoreTagProc(e.firstElementChild.href, '<br class="more">\n', function (data) {
        e.innerHTML = data + e.firstElementChild.outerHTML
    })
})

Review分析

• 性能
  Regex的算法复杂度是固定的O(n)，一般来说，标签的位置会出现在0-10000这个区间，在100ms内认为可接受，可优化无优化必要。思路是减少循环次数，如<!Document>中不会出现目标字符串，减小时间复杂度。
  网络请求，取决于网络环境，正常网络环境下（100kb）可认为误差在100ms内可接受，主流浏览器默认并发请求为6，取决这一特性，建议每页文章数改为5.
  js文件不建议引用，合理的方式应该在页面上直接嵌入，减少网络串行请求，我们一直可以的。

Consequent成果

like this, you could write anything between two <br class="more"/> tag.

bold text

italic text

balabala…

• go on
• aha

1. first thing
2. last thing

©zeerbeer

Usage使用

博客园需要申请js权限，成为一个名正言顺的客户端。

博客园分三个阶段文章列表页分三个阶段

1. 页首
2. 页面
3. 页尾

为了稳定性，在页尾放入这段代码。
如果页面加载不需要任何时间耗费，更推荐页首加入。

<script>function Get(b,c){const a=new XMLHttpRequest();a.open("GET",b,true);a.send(null);a.onreadystatechange=function(){if(a.readyState===4){c(a)}}}function MoreTagProc(b,c,a){Get(b,function(f){var d=f.responseText;var e=d.search(c);if(e===-1){return}d=d.slice(e+c.length,-1);e=d.search(c);if(e===-1){return}d=d.slice(0,e);a(d)})}document.querySelectorAll(".c_b_p_desc").forEach(function(a){MoreTagProc(a.firstElementChild.href,'<br class="more">\n',function(b){a.innerHTML=b+a.firstElementChild.outerHTML})});</script>

加入代码之后，在文章选取内容加入在<br class="more"/>之间，保存。

回到首页出现展示效果。