fleeting/fb

minimal主题的publish.js参考
Edited: Sunday 29 June 2025

date created: 26 July 2022
date modified: 14 March 2023
title: minimal主题的publish.js参考

 1var plausible = document.createElement('script')
 2plausible.defer = true
 3plausible.setAttribute('data-domain', 'minimal.guide')
 4plausible.src = 'https://plausible.io/js/script.outbound-links.js'
 5document.head.appendChild(plausible)
 6
 7
 8var siteLeft = document.querySelector('.site-body-left-column');
 9
10let navOrderAsc = ["Home.md", "Help.md", "About.md"]; /* these go on top*/
11
12let navOrderDsc = []; /* these go at the bottom */
13
14/* items not mentioned go in between in alphabetical order */
15
16var siteNav = siteLeft.querySelector('.nav-view-outer');
17
18var navContainer = siteNav.querySelector('.tree-item').querySelector('.tree-item-children');
19
20for (const item of navOrderAsc.reverse()){
21
22    querytext = '[data-path="' + item + '"]';
23
24    navItem = navContainer.querySelector(querytext);
25
26    if (navItem == null) continue;
27
28    moveItem = navItem.parentElement;
29
30    navContainer.prepend(moveItem);
31
32}
33
34for (const item of navOrderDsc.reverse()){
35
36    querytext = '[data-path="' + item + '"]';
37
38    navItem = navContainer.querySelector(querytext);
39
40    if (navItem == null) continue;
41
42    moveItem = navItem.parentElement;
43
44    navContainer.append(moveItem);
45
46}

插入一段html到dom中的原生js方法

let text = `
<script src="https://giscus.app/client.js"
        data-repo="oldwinter/knowledge-garden"
        data-repo-id="R_kgDOHT-NGQ"
        data-category="主发布站的评论系统"
        data-category-id="DIC_kwDOHT-NGc4CQ3PG"
        data-mapping="title"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        data-loading="lazy"
        crossorigin="anonymous"
        async>
</script>`
element.insertAdjacentHTML('afterend', text);

Minimal Documentation