有两个方式可以自定义LiteBlog的脚本和样式

• 第一种

第一步

在首页进入EditMode,然后右键,会显示有Custom Settings.

第二步

点击Custom Settings,进入自定义设置界面,如下图: 然后就能在Style输入框内编写自定义样式,在Script输入框内编写自定义JS.

• 第二种

第一步

打开LiteBlog安装目录,进入public文件夹

自定义JS

自定义JS文件位于js/inject.js

自定义CSS

自定义CSS文件位于css/customizestyle.css

自定义JS可用界面方法

• addThemeSwitchBroadcastListener(switchListener function(string)void) void

用于监听用户更改主题方法,如用户更改主题为light,则自动调用switchListener,传入参数theme,一般有两个值dark/light

example:

addThemeSwitchBroadcastListener(function(theme){
    console.log(theme);
});

• addContextMenuItem(dicisionFunction function(e event)bool,title string,callbackFunction function(e event)void)

用于添加用户右键菜单项,在用户右键时,会调用dicisionFunction用于决定是否展示此菜单,title字段表示菜单项标题,在用户点击菜单项时,会自动调用callbackFunction,传入event并忽略返回值

example:

addContextMenuItem(function(event){
    console.log("on context menu called",event);
},"MyMenuItem",function(event){
    console.log("on menu item click called",event);
})

• window.Notify.add(message string,options options) void

用于增加一条通知,其中options参数为以下类型:

{
            icon: '/img/notify-info.svg',
            type: 'info', // success, warning, error, info
            timeout: 5000, // 0: never close, otherwise in milliseconds
            keepAlive: false, // true: 不会因maxList限制而自动关闭，false: 会自动关闭
            onClick: function (notify,event) {console.log(notify,event)},
            onRemove: function (notify,event) {console.log(notify)},
            onTimeout: function (notify,event) {console.log(notify)},
            onShow: function (notify,event) {console.log(notify)},
            onHover: function (notify,event) {console.log(notify,event)},
            extraStyle: {"opacity": "1"},
}

例:

window.Notify.add("You received a new message", {
    type: 'info'
})

附录

my style

body,
textarea,
input,
code,
button {
font-family: "Cascadia Code", Consolas, "Microsoft YaHei", monospace;
}
::selection {
    background:#d3d3d3; 
    color:#555;
}

my script

const bgcss = `
body {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.card-container.card-classical,
.card-container.card-blogger-info-container,
.card-container.card-container-todo-list,
.article-content table,
#article-comment {
background: none;
backdrop-filter: blur(10px);
}

.article-content th {
background: none;
}
`
function loadStyleString(css){
	var style = document.createElement("style");
    style.type = "text/css";
    try{
    	style.appendChild(document.createTextNode(css));
    } catch (ex){
    	style.textContent = css;
    }
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
}

if (location.pathname == "/index.html" || location.pathname == "/") {
loadStyleString(bgcss);
}

if (GetTheme() == "light" && (location.pathname == '/index.html' || location.pathname == '/')) {
document.body.style.backgroundImage = "url(https://cdn-sg-1.un1c0de.com:4434/myimgs/111063093_p0_compressed.webp)";
}

addThemeSwitchBroadcastListener(function(theme){
    console.log(theme);
    if (theme == 'dark' && (location.pathname == '/index.html' || location.pathname == '/')) {
    document.body.style.backgroundColor = "rgba(0, 0, 0, 0.6)";
    document.body.style.backgroundBlendMode = "multiply";
    document.body.style.backgroundImage = "url(https://cdn-sg-1.un1c0de.com:4434/myimgs/111063093_p0_compressed.webp)";
    } else {
    document.body.style.backgroundColor = "";
    document.body.style.backgroundBlendMode = "";
    }
    
});