这里暂时只列出了代码，后续完善教程。
教程原链接
预览
跳转： 云深不知处
修改字体
export.css
/*引入字体*/
@import url("https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/style.css");
/*字体美化*/
body {
font-family: "LXGW WenKai Screen", sans-serif !important;
}
添加评论
export.css
/*引入waline评论*/
@import url("https://unpkg.com/@waline/client@v2/dist/waline.css");
/*修改waline评论基础颜色*/
html[data-theme="dark"]{
--waline-bgcolor:var(--ls-primary-background-color) !important;/*--ls-primary-background-color：文档背景颜色*/
--waline-bgcolor-light:var(--color-level-1) !important; /*--color-level-1：侧边栏颜色*/
--waline-info-bgcolor:var(--ls-primary-background-color) !important;
}
.dark-theme textarea{
background-color: var(--ls-primary-background-color) !important;
--waline-bgcolor-light:var(--color-level-1) !important;
}
blockquote{
background-color:var(--ls-primary-background-color) !important;
--waline-bq-color:var(--color-level-1) !important;
}
custom.js
if (window.location.host != "") { //网页端执行以下代码
/<span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong">*Waline评论</span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span>*/
var container = document.getElementsByClassName("cp__sidebar-main-content")[0];
var element = document.createElement("div");
element.classList.add("content");
element.id = "waline";
container.appendChild(element);
// 创建新元素
const scriptElement = document.createElement("script");
scriptElement.type = "module";
// 设置新元素的内容
scriptElement.textContent = `
import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs';
//初始化评论
const walines=init({
el: '#waline',
serverURL: 'https://comment.note.emaw.top',
dark: 'html[data-theme="dark"]',
login: 'disable',
path: decodeURIComponent(location.hash.split("/").slice(-1)[0]),
lang: 'zh-CN',
requiredMeta: ['nick', 'mail'],
});
//waline评论刷新
history.pushState = ((f) =>
function pushState() {
var ret = f.apply(this, arguments);
window.dispatchEvent(new Event("pushstate"));
window.dispatchEvent(new Event("locationchange"));
return ret;
})(history.pushState);
history.replaceState = ((f) =>
function replaceState() {
var ret = f.apply(this, arguments);
window.dispatchEvent(new Event("replacestate"));
window.dispatchEvent(new Event("locationchange"));
return ret;
})(history.replaceState);
window.addEventListener("popstate", () => {
window.dispatchEvent(new Event("locationchange"));
});
window.addEventListener(
"locationchange",
function () {
const iframe = document.querySelector("#waline");
const title = decodeURIComponent(location.hash.split("/").slice(-1)[0]);
console.debug("location change to:", title, iframe);
if (!iframe || !title) return;
walines.update({
serverURL: 'https://comment.note.emaw.top',
dark: 'html[data-theme="dark"]',
login: 'disable',
path: decodeURIComponent(location.hash.split("/").slice(-1)[0]),
lang: 'zh-CN',
requiredMeta: ['nick', 'mail'],
});
console.log("try refresh giscus:", title);
},
false
);
`;
// 将新元素追加到<body>的末尾
document.body.appendChild(scriptElement);
}
async function app() {
//本地端执行：
if (window.location.host == "") {
} else {
//网页端执行：
insertWaline();
}
}
app();
参考教程：Logseq 接入评论系统 (ai4me.pro)
调节右侧边栏宽度
export.css
/*PC端*/
@media screen and (min-width: 992px) {
#right-sidebar.open {
width: var(--ls-left-sidebar-width) !important;
}
}
/*平板端、移动端*/
@media screen and (max-width: 992px) {
/*调节移动端右侧边栏宽度*/
#right-sidebar.open {
width: 50vw !important;
}
}
隐藏首页标题
export.css
/*隐藏首页标题*/
.title.block[data-ref="云深不知处"] { /*云深不知处改为你自己的首页标题*/
display: none;
}
PC端默认打开左侧边栏和右侧边栏
custom.js
function pcOpenLeftRightSidebar() {
// 判断是否位于PC端
if (!isMobileDevice()) {
// 查找class为"theme-inner ls-hl-colored"的元素
const element = document.querySelector(".theme-inner.ls-hl-colored");
// 检查元素是否存在并且类名不包含"ls-left-sidebar-open"
if (element && !element.classList.contains("ls-left-sidebar-open")) {
// 查找id为"left-menu"的元素并模拟点击操作
const leftMenu = document.getElementById("left-menu");
if (leftMenu) {
leftMenu.click();
}
}
// 检查元素是否存在并且类名不包含"ls-right-sidebar-open"
if (element && !element.classList.contains("ls-right-sidebar-open")) {
// 查找id为"right-menu"的元素并模拟点击操作
const rightMenu = document.querySelector(
"button.button.icon.toggle-right-sidebar"
);
if (rightMenu) {
rightMenu.click();
}
}
}else{
// 查找class为"theme-inner ls-hl-colored"的元素
const element = document.querySelector(".theme-inner.ls-hl-colored");
// 检查元素是否存在并且类名不包含"ls-left-sidebar-open"
if (element && element.classList.contains("ls-left-sidebar-open")) {
// 查找id为"left-menu"的元素并模拟点击操作
const leftMenu = document.getElementById("left-menu");
if (leftMenu) {
leftMenu.click();
}
}
// 检查元素是否存在并且类名不包含"ls-right-sidebar-open"
if (element && element.classList.contains("ls-right-sidebar-open")) {
// 查找id为"right-menu"的元素并模拟点击操作
const rightMenu = document.querySelector(
"button.button.icon.toggle-right-sidebar"
);
if (rightMenu) {
rightMenu.click();
}
}
}
}
// 检测是否为移动设备
function isMobileDevice() {
//媒体查询
return window.matchMedia("only screen and (max-width: 992px)").matches;
}
async function app() {
//本地端执行：
if (window.location.host == "") {
} else {
pcOpenLeftRightSidebar();
}
}
app();
隐藏移动端底部工具栏、解决移动端侧边栏透明问题
export.css
@media screen and (max-width: 992px) {
/* 解决移动端侧边栏透明问题，临时 */
.dark .left-sidebar-inner {
background-color: var(--color-level-1) !important;
}
}
//隐藏移动端底部工具栏
.cp__footer.w-full.bottom-0.justify-between {
display: none !important;
}
生成右侧边栏目录
在右侧边栏添加文字：“目录”
export.css
/*生成目录*/
/*隐藏点*/
.ls-right-sidebar-open #right-sidebar-container .bullet-link-wrap {
display: none !important;
}
/*删除多余空间*/
.ls-right-sidebar-open #right-sidebar-container .block-control-wrap.flex.flex-row.items-center{
display: none !important;
}
/*设置合理空间*/
.ls-right-sidebar-open #right-sidebar-container #contents .blocks-container.flex-1>div>div>div {
padding-left: 15px !important;
}
.li-1 {
padding-left: 0px;
}
.li-2 {
padding-left: 8px;
}
.li-3 {
padding-left: 16px;
}
.li-4 {
padding-left: 24px;
}
.li-5 {
padding-left: 32px;
}
.li-6 {
padding-left: 40px;
}
.li-active {
color: #f36;
}
.ls-block.tocgen-toc-toc-toc-tocgen a:hover{
color: #f36;
}
custom.js
//生成目录
const tocList = () => {
deleteToc();
const toc = document.querySelector(
".ls-right-sidebar-open #contents .blocks-container.flex-1>div>div"
);
const publicSelector = "#main-content-container .page-blocks-inner ";
const elements = document.querySelectorAll(
`${publicSelector}h1, ${publicSelector}h2, ${publicSelector}h3, ${publicSelector}h4, ${publicSelector}h5, ${publicSelector}h6`
); //获取标题，（含有id）
const parentIdElements = Array.from(elements).map(function (element) {
//获取真正的id的元素
return element.parentNode.parentNode.parentNode;
});
if(!(document.querySelector(".theme-inner.ls-hl-colored") && document.querySelector(".theme-inner.ls-hl-colored").classList.contains("ls-right-sidebar-open"))){return;}
if (!elements.length) return;
if (!parentIdElements.length) return;
const HList = ["H1", "H2", "H3", "H4", "H5", "H6"];
// 生成目录
let str = `<div class="tocHr" style="padding-right: 15px;padding-top: 10px;padding-bottom: 10px;"><div style="border:1px solid var(--ls-quaternary-background-color)" ></div></div>`;
Array.from(elements, (v) => {
const H = HList.indexOf(v.nodeName) + 1 || 1; //元素的类型
//要改id<a class="li li-${H} href="javascript:void(0);" id="${v.parentNode.parentNode.parentNode.id}" >${v.textContent}</a>
str += `<div haschild="false" class="ls-block tocgen-toc-toc-toc-tocgen" level="1" blockid="tocgen-toc-toc-toc-tocgen" id="ls-block-3-tocgen-toc-toc-toc-tocgen" data-refs-self="[]" data-refs="[]"><div class="block-main-container flex flex-row pr-2 "><div class="block-control-wrap flex flex-row items-center"><a id="control-tocgen-toc-toc-toc-tocgen" class="block-control"><span class="control-hide"><span class="rotating-arrow not-collapsed"><svg aria-hidden="true" version="1.1" viewBox="0 0 192 512" fill="currentColor" display="inline-block" class="h-4 w-4" style="margin-left: 2px;"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z" fill-rule="evenodd"></path></svg></span></span></a><a class="bullet-link-wrap"><span id="dot-tocgen-toc-toc-toc-tocgen" draggable="true" blockid="tocgen-toc-toc-toc-tocgen" class="bullet-container cursor "><span blockid="tocgen-toc-toc-toc-tocgen" class="bullet"></span></span></a></div><div class="flex flex-col block-content-wrapper"><div class="flex flex-row"><div class="flex-1 w-full" style="display: flex;"><div id="block-content-tocgen-toc-toc-toc-tocgen" blockid="tocgen-toc-toc-toc-tocgen" data-type="default" class="block-content inline" style="width: 100%;"><div class="flex flex-row justify-between block-content-inner"><div class="flex-1 w-full"></div></div><div class="block-body"><div class="raw_html"><a class="li li-${H} href="javascript:void(0);" id="${v.parentNode.parentNode.parentNode.id}" >${v.textContent}</a></div></div></div></div><div class="flex flex-row items-center"></div></div></div></div></div>`;
});
str += ``;
// 添加目录到页面
toc.insertAdjacentHTML("beforeend", str);
// 给目录添加点击事件
Array.from(parentIdElements, (v) => {
const btn = document.querySelector(
`.ls-right-sidebar-open #contents .blocks-container.flex-1>div>div #${v.id}`
); //目录id,要改id
const ele = document.querySelector(`#main-content-container #${v.id}`); //文字的标题id,要改id
if (!btn || !ele) return;
btn.addEventListener("click", () => {
ele.scrollIntoView({ behavior: "smooth" }); //原：window.scrollTo({ top: ele.offsetTop - 80, behavior: "smooth" });
});
});
// 监听滚动
const observer = new IntersectionObserver(visibleChnage, {
rootMargin: "80px 0px 0px 0px",
});
Array.from(parentIdElements, (item) => observer.observe(item));
};
// 移除所有的 li-active 排他，无改动
const removeClass = () => {
const list = document.querySelectorAll(
".ls-right-sidebar-open #contents .blocks-container.flex-1>div>div a"
);
Array.from(list, (v) => v.classList.remove("li-active"));
};
// 监听滚动
const visibleChnage = (item) => {
// var sider = document.querySelector(".siderbar");
var toc = document.querySelectorAll(
".ls-right-sidebar-open #contents .blocks-container.flex-1>div>div a"
);
item.forEach((observe) => {
const id = observe.target.getAttribute("id"),
anchor = document.querySelector(
`.ls-right-sidebar-open #contents .blocks-container.flex-1>div>div #${id}`
);
if (!anchor) return false;
if (observe.isIntersecting) {
removeClass();
const index = Array.from(toc, (v) => v.getAttribute("id")).indexOf(id); //v:目录 ，id：
anchor.classList.add("li-active");
// sider.style.transform = `translateY(${index * 30 + 10}px)`;
return;
}
});
};
//删除原有TOC
const deleteToc = () => {
const myToc = document.querySelectorAll(
".ls-block.tocgen-toc-toc-toc-tocgen"
);
const myTocHr=document.querySelector('.tocHr');
if(myTocHr){myTocHr.parentNode.removeChild(myTocHr)}
if (myToc) {
myToc.forEach(function (element) {
element.parentNode.removeChild(element);
});
}
};
//监听网页跳转
async function isHrefChange(changeFun) {
history.pushState = ((f) =>
function pushState() {
var ret = f.apply(this, arguments);
window.dispatchEvent(new Event("pushstate"));
window.dispatchEvent(new Event("locationchange"));
return ret;
})(history.pushState);
history.replaceState = ((f) =>
function replaceState() {
var ret = f.apply(this, arguments);
window.dispatchEvent(new Event("replacestate"));
window.dispatchEvent(new Event("locationchange"));
return ret;
})(history.replaceState);
window.addEventListener("popstate", () => {
window.dispatchEvent(new Event("locationchange"));
});
window.addEventListener(
"locationchange",
async function () {
const iframe = document.querySelector("#waline");
const title = decodeURIComponent(location.hash.split("/").slice(-1)[0]);
console.debug("location change to:", title, iframe);
if (!iframe || !title) return;
await new Promise((resolve) => setTimeout(resolve, 50));
changeFun();
},
false
);
}
async function app() {
//本地端执行：
if (window.location.host == "") {
} else {
//网页端执行：
window.addEventListener("load", async () =>{
await new Promise((resolve) => setTimeout(resolve, 50));
tocList();
});
await isHrefChange(tocList);
document.querySelector(
"button.button.icon.toggle-right-sidebar"
).addEventListener("click", async function () {
await new Promise((resolve) => setTimeout(resolve, 500));
tocList();
});
document.getElementById("scrollToBottomBtn").addEventListener("click",function () {
tocList();
});
}
}
app();
参考教程：toc: js生成目录并实现目录节点跟随滚动高亮 demo - Gitee.com
回到网页顶端和低端按钮
export.css
@media screen and (min-width: 992px) {
/* 回到顶部、底部按钮 */
#scrollToTopBtn,
#scrollToBottomBtn {
outline: none;
border: 2px solid var(--ls-quaternary-background-color);
background: none;
padding: 0;
margin: 0;
position: fixed;
bottom: 20px; /* Adjust as needed */
right: 18vw;
background-color: var(--color-level-1);
color: var(--ls-quaternary-background-color);
padding: 8px 12px; /* Adjust padding to reduce button size */
cursor: pointer;
border-radius: 5px;
font-size: 14px; /* Adjust font-size to reduce button size */
transition: background-color 0.3s ease;
margin-top: 10px; /* Add margin to separate the buttons */
z-index: 9999;
}
#scrollToTopBtn:hover,
#scrollToBottomBtn:hover {
background-color: #2980b9;
}
#scrollToTopBtn {
bottom: 70px; /* Adjust as needed */
}
}
/*平板端、移动端*/
@media screen and (max-width: 992px) {
/* 回到顶部、底部按钮 */
#scrollToTopBtn,
#scrollToBottomBtn {
outline: none;
border: 2px solid var(--ls-quaternary-background-color);
background: none;
padding: 0;
margin: 0;
position: fixed;
bottom: 20px; /* Adjust as needed */
right: 2vw;
background-color: var(--color-level-1);
color: var(--ls-quaternary-background-color);
padding: 6px 8px; /* Adjust padding to reduce button size */
cursor: pointer;
border-radius: 5px;
font-size: 12px; /* Adjust font-size to reduce button size */
transition: background-color 0.3s ease;
margin-top: 5px; /* Add margin to separate the buttons */
z-index: 9999;
}
#scrollToTopBtn:hover,
#scrollToBottomBtn:hover {
background-color: #2980b9;
}
#scrollToTopBtn {
bottom: 70px; /* Adjust as needed */
}
}
custom.js
/<span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span>网页：回到网页顶端和低端--开始<span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span>***/
function scrollTopBottomButton() {
// 创建一个 div 元素
var newDiv = document.createElement("div");
newDiv.id = "root"; // 设置 div 的 id 为 "root"
// 创建一个按钮元素（向上滚动）
var scrollToTopBtn = document.createElement("button");
scrollToTopBtn.id = "scrollToTopBtn";
scrollToTopBtn.innerHTML = "▲"; // 设置按钮的内容为向上的箭头
// 创建一个按钮元素（向下滚动）
var scrollToBottomBtn = document.createElement("button");
scrollToBottomBtn.id = "scrollToBottomBtn";
scrollToBottomBtn.innerHTML = "▼"; // 设置按钮的内容为向下的箭头
// 获取页面的 body 元素
var body = document.body;
// 将创建的元素插入到 body 中
body.appendChild(newDiv);
body.appendChild(scrollToTopBtn);
body.appendChild(scrollToBottomBtn);
}
//按钮执行函数
function scrollTopBottom() {
document.addEventListener("DOMContentLoaded", function () {
// 获取按钮元素
var scrollToTopBtn = document.getElementById("scrollToTopBtn");
var scrollToBottomBtn = document.getElementById("scrollToBottomBtn");
// 为按钮添加点击事件监听器
scrollToTopBtn.addEventListener("click", function () {
scrollToTop(500); // 500 毫秒
});
scrollToBottomBtn.addEventListener("click", function () {
scrollToBottom(500);
});
var mainContentContainer = document.getElementById(
"main-content-container"
);
// 检查滚动位置并显示/隐藏按钮的函数
function checkScrollPosition() {
var scrollPosition = mainContentContainer.scrollTop;
var containerHeight = mainContentContainer.clientHeight;
var contentHeight = mainContentContainer.scrollHeight;
// 显示/隐藏 scrollToTopBtn
if (scrollPosition <= 0) {
scrollToTopBtn.style.display = "none";
} else {
scrollToTopBtn.style.display = "block";
}
// 显示/隐藏 scrollToBottomBtn
if (scrollPosition + containerHeight >= contentHeight) {
scrollToBottomBtn.style.display = "none";
} else {
scrollToBottomBtn.style.display = "block";
}
}
// 添加滚动事件监听器以显示/隐藏按钮
mainContentContainer.addEventListener("scroll", function () {
checkScrollPosition();
});
// 窗口大小调整时再次检查滚动位置
window.addEventListener("resize", function () {
checkScrollPosition();
});
// 页面加载时的初始检查
checkScrollPosition();
// 首次加载时，如果不在顶部或底部，隐藏 scrollToTopBtn 和 scrollToBottomBtn
if (mainContentContainer.scrollTop > 0) {
scrollToTopBtn.style.display = "none";
}
if (
mainContentContainer.scrollTop + mainContentContainer.clientHeight >=
mainContentContainer.scrollHeight
) {
scrollToBottomBtn.style.display = "none";
}
});
}
// 平滑滚动到主内容的顶部的函数
function scrollToTop(duration) {
var mainContentContainer = document.getElementById("main-content-container");
var scrollStep = -mainContentContainer.scrollTop / (duration / 15);
var startTime;
function animateScroll(timestamp) {
if (!startTime) startTime = timestamp;
var progress = timestamp - startTime;
mainContentContainer.scrollTop = Math.max(
mainContentContainer.scrollTop + scrollStep,
0
);
if (progress < duration) {
window.requestAnimationFrame(animateScroll);
}
}
window.requestAnimationFrame(animateScroll);
}
// 平滑滚动到主内容的底部的函数
function scrollToBottom(duration) {
var mainContentContainer = document.getElementById("main-content-container");
var scrollStep =
(mainContentContainer.scrollHeight -
mainContentContainer.scrollTop -
mainContentContainer.clientHeight) /
(duration / 15);
var startTime;
function animateScroll(timestamp) {
if (!startTime) startTime = timestamp;
var progress = timestamp - startTime;
mainContentContainer.scrollTop = Math.min(
mainContentContainer.scrollTop + scrollStep,
mainContentContainer.scrollHeight - mainContentContainer.clientHeight
);
if (progress < duration) {
window.requestAnimationFrame(animateScroll);
}
}
window.requestAnimationFrame(animateScroll);
}
/<span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span>网页：回到网页顶端和低端--结束<span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span><span style="font-weight: bold;" data-type="strong"></span>***/
async function app() {
//本地端执行：
if (window.location.host == "") {
} else {
//网页端执行：
scrollTopBottomButton();
scrollTopBottom();
}
app();
更换favicon
custom.js
function changeFaviocn(){
// 获取<head>元素
var head = document.head || document.getElementsByTagName('head')[0];
// 创建一个新的<link>元素
var link = document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
// 设置新的favicon的URL
link.href = 'https://note.emaw.top/assets/favicon.ico'; // 替换成你的favicon路径
// 将新的<link>元素添加到<head>中
head.appendChild(link);
}
async function app() {
//本地端执行：
if (window.location.host == "") {
} else {
changeFaviocn();
}
app();
完整代码请看：logseq.emaw.top/static/css/… | logseq.emaw.top/static/js/c…
