有两个方式可以自定义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);
})

附录

my style

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

my script

var 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,
.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") {
loadStyleString(bgcss);
}

if (GetTheme() == "light" && location.pathname == '/index.html') {
document.body.style.backgroundImage = "url(https://cr.un1c0de.com/f/779tY/111063093_p0_compressed.webp)";
}

addThemeSwitchBroadcastListener(function(theme){
    console.log(theme);
    if (theme == 'dark' && location.pathname == '/index.html') {
    document.body.style.backgroundColor = "rgba(0, 0, 0, 0.6)";
    document.body.style.backgroundBlendMode = "multiply";
    document.body.style.backgroundImage = "url(https://cr.un1c0de.com/f/779tY/111063093_p0_compressed.webp)";
    } else {
    document.body.style.backgroundColor = "";
    document.body.style.backgroundBlendMode = "";
    }
    
});