-
[js] 代码块优化之折叠 / 展开 / 全屏 / 悬浮横向滚动条
2025-04-14 17:52不好意思我重现不了你的问题
1 确保代码是最新版
2 新空间测试以排除可能的干扰项
3 提供思源版本及详细重现步骤
4 最好提供有问题的测试文档
-
[js] 代码块优化之折叠 / 展开 / 全屏 / 悬浮横向滚动条
2025-04-14 09:06你确定是这个 js 的问题吗?有没有排除过其他可能影响的因素。
如果你确定的话,可否把你的文档发来看看。如果不方便也可以发私信。
我这边测试 4 万字的文章,很多代码块没影响。
-
块属性中可以添加备注,备注常显示时,怎么把那个备注的图标去掉
2025-04-13 16:42-
编辑器中去掉该选项(但同时会影响命名,别名等)
-
css 去掉
.protyle-attr>div.protyle-attr--memo{ display:none; }
-
-
如何使用 js 统计访问量及网站运行时间
2025-04-13 12:48写了一个代码,但不知你说的侧边栏是指放哪?感觉放不下,所以放状态栏了。
另外,手机版也不知道哪里有位置显示,所以暂不支持。
仅供参考。
// 统计网站访问量和运行时间 (async ()=>{ // api地址,最后不要加 / const apiUrl = 'http://127.0.0.1:6806'; // api token 在设置->关于中查看 const apiToken = ''; // 初始化数据 const initData = { // 网站总访问量 total: 0, // 网站运行初始日期 startDay: '2025-04-13' }; // 定义统计信息显示模板 const tongjiTpl = `总访问量:{total} 网站运行:{runningDays}天`; // 已统计的跳过 if(document.querySelector('#status .site__tongji')) return; // 记录初始访问量 const initTotal = initData.total || 0; // 延迟等待数据加载和同步 await sleep(1500); // 获取置顶数据,格式 {"total":0, "startDay":''} let data = await getFile('/data/storage/site_tongji.json'); data = JSON.parse(data||'{}'); if(data.code && data.code !== 0) data = {}; data = {...initData, ...data}; // 仅网站版和发布服务版才统计 if(siyuan.config.readonly && isBrowser()) { // 当不存在total字段时初始化 if(!data.total) data.total = 0; // 当总数小于初始化值时,直接赋值为初始化的值 if(data.total < initTotal) data.total = initTotal; // 网站访问+1 data.total++; // 存储网站访问数据 if(data.total > 0) putFile('/data/storage/site_tongji.json', JSON.stringify(data, null, 4)); } // 获取网站运行时间 const runningDays = calculateRunningDays(data); // 状态栏显示统计信息 showStatusMsg(tongjiTpl.replace('{total}', data.total).replace('{runningDays}', runningDays)); // 计算网站运行时间(单位:天) function calculateRunningDays(data) { // 获取当前日期并重置时间为 00:00:00 const currentDate = new Date(); resetTime(currentDate); // 解析初始日期并重置时间为 00:00:00 const startDate = new Date(data.startDay); if (isNaN(startDate.getTime())) { return 1; } resetTime(startDate); // 计算时间差(毫秒) const timeDifference = currentDate - startDate; // 转换为天数 const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24)); return daysDifference + 1; } function resetTime(date) { date.setHours(0, 0, 0, 0); // 设置时间为 00:00:00.000 return date; } // 状态栏输出 function showStatusMsg(html) { const statusMsg = document.querySelector('#status .status__msg'); if(!statusMsg) return; const tongji = document.querySelector('#status .site__tongji'); if(tongji) tongji.remove(); const style = ` color: var(--b3-theme-on-surface); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-left: 5px; font-size: 12px; `; html = `<div class="site__tongji" style="${style}">${html}</div>`; statusMsg.insertAdjacentHTML('beforebegin', html); } function isBrowser() { return !navigator.userAgent.startsWith("SiYuan") || navigator.userAgent.indexOf("iPad") > -1 || (/Android/.test(navigator.userAgent) && !/(?:Mobile)/.test(navigator.userAgent)); } function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } // 获取文件 async function getFile(path) { return fetch("/api/file/getFile", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ path, }), }).then((response) => { if (response.ok) { return response.text(); } else { throw new Error("Failed to get file content"); } }).catch((error) => { console.error(error); }); } // 存储文件,支持创建文件夹,当isDir true时创建文件夹,忽略文件 async function putFile(path, content = '', isDir = false) { const formData = new FormData(); formData.append("path", path); formData.append("isDir", isDir) formData.append("file", new Blob([content])); const result = await fetch(apiUrl+"/api/file/putFile", { // 写入js到本地 method: "POST", headers: { "Authorization": "token " + apiToken // 添加 Authorization 头 }, body: formData, }); const json = await result.json(); return json; } })();
-
能够将 Alt + X 标记与加粗结合到一起
2025-04-12 20:10这个好像是和 mark 标记是一样的效果,所以我可以直接修改 mark 标记的 css 实现,但是只有一种颜色,也够用了
这个 protyle.toolbar.setInlineMark(protyle, 'mark', "toolbar"); mark 这个参数可以任意改,工具栏上的"strong", "em", "s", "code", "mark", "tag", "u", "sup", "clear", "sub", "kbd"样式都支持。
如果想要改文字颜色或背景色也可以
比如:
protyle.toolbar.setInlineMark(protyle, "text", "range", {type:'color', color:'var(--b3-font-color8)'}); protyle.toolbar.setInlineMark(protyle, "text", "range", {type:'backgroundColor', color:'var(--b3-font-background2)'});
当然,你用自己的方法实现也可以的,条条大路通罗马。
-
能够将 Alt + X 标记与加粗结合到一起
2025-04-12 19:35alt+x 版
注意:
代码中加上这个 event.stopPropagation();可以阻止默认的 alt+x 最近使用样式的添加(默认已加上这个代码)
去掉这个代码,则会同时赋予 3 种样式,加粗,标记和最近样式
// alt+x 给文字加粗和标记 (()=>{ // 监听键盘按下alt+x事件 document.addEventListener('keydown', function(event) { // 检查是否按下了 Alt 键以及物理按键是 'KeyX' if ( event.altKey && // 按下了 Alt 键 event.code === 'KeyX' && // 物理按键是 X !event.shiftKey && // 未按下 Shift 键 !event.ctrlKey && // 未按下 Ctrl 键 !event.metaKey // 未按下 Meta 键 ) { // 阻止默认行为(如果有必要) event.preventDefault(); // 阻止冒泡,不加这个会和思源的alt+x重合,出现三种效果 event.stopPropagation(); // 获取protyle const protyle = getProtyle(); // 给文字加粗 protyle.toolbar.setInlineMark(protyle, 'strong', "toolbar"); // 给文字标记 protyle.toolbar.setInlineMark(protyle, 'mark', "toolbar"); } },true); function getProtyle() { try { if(document.getElementById("sidebar")) return siyuan.mobile.editor.protyle; const currDoc = siyuan?.layout?.centerLayout?.children.map(item=>item.children.find(item=>item.headElement?.classList.contains('item--focus') && (item.panelElement.closest('.layout__wnd--active')||item.panelElement.closest('[data-type="wnd"]')))).find(item=>item); return currDoc?.model.editor.protyle; } catch(e) { console.error(e); return null; } } })();
-
能够将 Alt + X 标记与加粗结合到一起
2025-04-12 19:07alt+z 行吗?alt+x 和思源冲突,调不出来
// alt+z 给文字加粗和标记 (()=>{ // 监听键盘按下alt+z事件 document.addEventListener('keydown', function(event) { // 检查是否按下了 Alt 键以及物理按键是 'KeyZ' if ( event.altKey && // 按下了 Alt 键 event.code === 'KeyZ' && // 物理按键是 Z !event.shiftKey && // 未按下 Shift 键 !event.ctrlKey && // 未按下 Ctrl 键 !event.metaKey // 未按下 Meta 键 ) { // 阻止默认行为(如果有必要) event.preventDefault(); // 获取protyle const protyle = getProtyle(); // 给文字加粗 protyle.toolbar.setInlineMark(protyle, 'strong', "toolbar"); // 给文字标记 protyle.toolbar.setInlineMark(protyle, 'mark', "toolbar"); } }); function getProtyle() { try { if(document.getElementById("sidebar")) return siyuan.mobile.editor.protyle; const currDoc = siyuan?.layout?.centerLayout?.children.map(item=>item.children.find(item=>item.headElement?.classList.contains('item--focus') && (item.panelElement.closest('.layout__wnd--active')||item.panelElement.closest('[data-type="wnd"]')))).find(item=>item); return currDoc?.model.editor.protyle; } catch(e) { console.error(e); return null; } } })();
-
如何通过 CSS 调整列表的段前段后
2025-04-12 14:32.protyle-wysiwyg [data-node-id][data-node-index].list{ margin-top:20px; margin-bottom:20px; }
-
[js] 代码块优化之折叠 / 展开 / 全屏 / 悬浮横向滚动条
2025-04-12 11:34极致优化
0.0.2 美化滚动条样式
0.0.3 修复全屏后代码块显示不全问题
0.0.4 改进仅代码有滚动条且高度大于 codeMaxHeight 时才显示 -
如何通过 CSS 调整列表的段前段后
2025-04-12 09:24.protyle-wysiwyg [data-node-id].li{ margin: 10px auto; /* 可根据实际情况调整 */ }
-
[js] 代码块优化之折叠 / 展开 / 全屏 / 悬浮横向滚动条
2025-04-11 20:21@zxkmm 关于横向滚动条,一开始打算用你的插件,发现不支持代码块,有没有计划新增其他块?最好能自定义哪些块。
我这个仅仅支持代码块,不通用。
-
怎么取消后面的外观变化?
2025-04-10 17:59是因为,当不选中文字时,样式会加到块上;当选中文字时,样式会加到文字上
所以,取消方法就是,不选中文字时 按 ctrl/cmd+alt+x 打开外观再清除样式