savor 主题实现了显示文档修改时间,就像这样:
稍微想了下,好像略微改一下代码就能够实现显示挂件了;
原本渲染修改时间的挂件是这样的:
/**----------------------------------为打开文档的标题下显示文档创建日期----------------------------------*/
function showDocumentCreationDate() {
setInterval(DocumentCreationDate, 300);
}
function DocumentCreationDate() {
var openDoc = document.querySelectorAll(".layout-tab-container>.fn__flex-1.protyle:not(.fn__none):not([CreatTimeOK])");
var allDocumentTitleElement = [];
for (let index = 0; index < openDoc.length; index++) {
const element = openDoc[index];
element.setAttribute("CreatTimeOK", true);
allDocumentTitleElement.push(element.children[1].children[1].children[1]);
}
for (let index = 0; index < allDocumentTitleElement.length; index++) {
const element = allDocumentTitleElement[index];
var documentCreatTimeElement = creatTimeSpanElement(element.parentElement);
documentCreatTimeElement.innerText = "获取文档创建日期中……";
tilteWhlie(element, documentCreatTimeElement);
}
}
function tilteWhlie(element, documentCreatTimeElement) {
var setID = setInterval(() => {
var time = getDocumentTime(element);
if (time != "") {
documentCreatTimeElement.innerText = time;
clearInterval(setID);
};
}, 3000);
}
毛过来稍微修改一下
/**-- 在所有文档前面加上一个挂件插槽--**/
function showPreviousWidgetsSlot() {
setInterval(DocumentShowPreviousWidget, 300);
}
DocumentShowPreviousWidget()
showPreviousWidgetsSlot()
function DocumentShowPreviousWidget() {
var openDoc = document.querySelectorAll(".layout-tab-container>.fn__flex-1.protyle:not(.fn__none)");
var allDocumentTitleElement = [];
for (let index = 0; index < openDoc.length; index++) {
const element = openDoc[index];
element.setAttribute("withPreviousWidgets", true);
allDocumentTitleElement.push(element.children[1].children[1].children[1]);
}
for (let index = 0; index < allDocumentTitleElement.length; index++) {
const element = allDocumentTitleElement[index];
if ( !element.parentElement.querySelector('.previous-widgets-slot')&&element.parentElement.parentElement.querySelector('[data-node-id]')) {
var documentPreviousWidgetsSlotElement = CreatePreviousWidgetsSlot(element.parentElement);
element.parentElement.appendChild(documentPreviousWidgetsSlotElement)
}
}
}
function CreatePreviousWidgetsSlot(element) {
let cloneNode = element.parentElement.querySelector(".protyle-wysiwyg.protyle-wysiwyg--attr").cloneNode(false)
cloneNode.innerHTML = `
<div class="iframe-content">
<iframe src="/widgets/${cloneNode.getAttribute('custom-previousWidget') || 'listChildDocs'}/" ></iframe>
</div>
`
let id = element.parentElement.parentElement.querySelector('[data-node-id]').getAttribute('data-node-id')
cloneNode.setAttribute('data-node-id',id)
cloneNode.setAttribute('contenteditable',false)
cloneNode.setAttribute('style', "padding: 0;")
let div = document.createElement('div')
div.setAttribute('class', 'previous-widgets-slot')
div.setAttribute('contenteditable', false)
div.setAttribute('style', "padding: 0;")
let root = div.attachShadow({ mode: 'open' })
root.innerHTML = `
<style>
iframe{
width:100%;
min-height:400px;
border:none;
margin:0;
padding:0
}
</style>
`
root.appendChild(cloneNode)
return div
};
ok,完工,很多老哥说的默认显示子文档列表就成了,改文档的 custom-previousWidget 属性可以换成其他挂件,效果像这样:
或者是这样:
这玩意是之前写挂件教程的时候鼓捣出来的,要的话看这里):
思源笔记折腾记录-简单挂件-更美观地展示属性 - 知乎 (zhihu.com)
教程本身也还在写所以也就是个半成品。
高度好像没有弄很好,用的时候自己调整一下吧。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于