使用 Macy.js 对 WordPress 博客站框架得 GridMe 主题文章索引进行排版优化。
目前為
// ==UserScript==
// @name 自研 - 通用 - 优化 GridMe 主题网格布局
// @name:en_US Self-made - General - Better posts grid for GridMe theme
// @description 使用 Macy.js 对 WordPress 博客站框架得 GridMe 主题文章索引进行排版优化。
// @description:en_US Optimizing the article indexing layout for the GridMe theme in a WordPress blog using Macy.js.
// @version 1.0.0
// @author CPlayerCHN
// @license MulanPSL-2.0
// @namespace https://www.gitlink.org.cn/CPlayerCHN
// @match *://*/*
// @require https://cdnjs.cloudflare.com/ajax/libs/macy/2.5.1/macy.min.js
// @run-at document-end
// @noframes
// ==/UserScript==
(function() {
'use strict';
// 如果当前页面有文章索引元素存在就
if( document.querySelector(".gridme-posts-grid") ) {
// 定义参数
var macy = Macy({
"container": ".gridme-posts-grid",
"margin": {
"x": 12,
"y": 18
},
"columns": 4,
"useOwnImageLoader": true,
"breakAt": {
"319": {
"margin": {
"x": 0,
"y": 8
},
"columns": 1
},
"379": 2,
"790": 3
}
});
// 开始优化优化排版
macy.recalculate();
// 遍历文章配图，在加载完成或失败时重新优化排版；有些站点使用异步加载图片，自带得回调函数似乎不会重新排版。
document.querySelectorAll(".gridme-posts-grid img").forEach((img) => {
img.onload = () => macy.reInit();
img.onerror = () => macy.reInit();
});
}
})();