Joe主题的评论支持显示用户的操作系统版本。目前很多用户已将系统升级至Windows11，但是User-Agent并没有更新，依然是Windows NT 10.0。因此，完全靠UA来识别用户操作系统版本不再准确。通过查询微软知识库（ 使用 User-Agent 客户端提示检测Windows 11和 CPU 体系结构 ），发现了解决方案：可以配合js来实现Windows版本识别。增加js将以下js添加到Joe的“自定义js”navigator.userAgentData && navigator.userAgentData.getHighEntropyValues(["platformVersion"]) .then(ua => { if (navigator.userAgentData.platform === "Windows") { const majorPlatformVersion = parseInt(ua.platformVersion.split('.')[0]); if (majorPlatformVersion >= 13) { document.cookie = "win11=true;path=/"; } else if (majorPlatformVersion > 0) { document.cookie = "win10=true;path=/"; } else { //console.log("Before Windows 10"); } } else { //console.log("Not running on Windows"); } });修改php文件打开/usr/themes/Joe/core/function.php，搜索 _getAgentOS 函数，在判断为Windows10的后面追加一句，用来判断是否是Windows11：... } else if (preg_match('/nt 10.0/i', $agent)) { $os = 'Windows 10'; if (isset($_COOKIE['win11']) && $_COOKIE['win11']){ $os = 'Windows 11'; } } ...至此，便可以正确区分用户使用的Windows版本了。
Joe主题有Live2D卡通小人的模块，但是很多人设置了，并不显示。其实，Joe主题设置里写了，该功能做了限制，默认宽度>1760px的才会显示。猜测为了避免卡通人物挡住正文，影响观感，如果你想在宽度小于1760px的设备上也显示，可以将以下css文件的这段代码删除，或者修改为你想要显示的最窄设备(比如1200px)即可解决宽屏限制要修改的文件文件路径：/Joe/assets/css/joe.responsive.min如何修改？将文件开头的下列代码注释掉或者删除{tabs}{tabs-pane label="原始代码"}@media (max-width: 1760px){html #live2d-widget{visibility:hidden}}{/tabs-pane}{tabs-pane label="注释掉"}/*@media (max-width: 1760px){html #live2d-widget{visibility:hidden}}*/{/tabs-pane}{tabs-pane label="调整为指定尺寸"}@media (max-width: 1200px){html #live2d-widget{visibility:hidden}}{/tabs-pane}{/tabs}该想要在手机端也显示修改好之后，手机端默认不显示，如果手机端也需要显示，可参考以下内容：要修改的文件文件路径：/Joe/assets/js/joe.global.min.js如何修改？搜素 mobile ，然后把 !1 修改为 !0 即可上图左边框选的是宽高，可以自行修改(对PC端也有影响，为避免影响观感，建议修改joe.global.js，手机端和PC端设置不同尺寸，修改后重新压缩js){callout color="#ff0000"}按照上述方式修改后，上传到服务器对应位置(如果使用了cdn须刷新cdn)即可{/callout}
笔者博客目前使用的Typecho，主题使用的Joe。前面已经写过两篇相关的文章：Joe主题增加验证码（非插件方式）Joe主题增加文章目录（非插件方式）本文是第三篇，折腾的对象是编辑器。Joe主题自带编辑器，界面美观，功能也很强大，美中不足是没有热键功能。下面就跟大家分享一下，如何给Joe编辑器增加热键。预设背景本文假设目录结构如下Typecho安装在/www/nongxue.top目录下Joe主题文件位于/www/nongxue.top/usr/theme/Joe目录下第一步：增加热键初始化函数进入Joe主题目录下的typecho/write/js，打开index.js，在合适位置增加如下函数/* 已测 √ */ init_HotKey(){ document.querySelector('.cm-content').onkeydown =function(e){ e = e || window.event; if(e.ctrlKey && e.altKey){ e.preventDefault(); let title = ''; switch(e.keyCode){ case 66://B 按键键码 title='加粗';//按键功能 即编辑器按钮悬停提示 break; case 67://C title='行内代码'; break; case 68://D title='删除'; break; case 69://E title='图片表情'; break; case 70://F title='全屏/取消全屏'; break; case 72://H title='回复可见'; break; case 73://I title='倾斜'; break; case 80://P title='发布文章'; break; case 83://S title='保存草稿'; break; case 86://V title='预览/取消预览'; break; } if(title){ $('.cm-tools-item[title="'+title+'"]').click(); } } } }备注上面的示例是Ctrl+Alt+热键的组合方式，比如Ctrl+Alt+D是增加删除线case后面的数值为按键键码，可以参考文末键码对应表。title为按键功能，即编辑器按钮悬停提示文字，可以根据自己需求修改第二步：初始化时加载热键初始化函数在index.js搜索this.init_AutoSave();，定位到该行在它下面增加this.init_HotKey();，如下图所示第三步：编译、上传如果之前没有编译过，需要安装node依赖打开命令行窗口，进入typecho/write目录，执行命令安装依赖cd /www/nongxue.top/usr/theme/Joe/typecho/write npm install安装依赖后，执行下面的命令即可编译npm run servecreated dist/index.bundle.js in **s即表示编译完成如果你是本地编译，将typecho/write/js/dist下的index.bundle.js上传到你的服务器，覆盖之前的文件，就OK了！此时，编辑器已支持自定义的热键，如不生效建议在编辑页面刷新(如启动了CDN，需在CDN删除缓存)附录：按键-键码对照表按键键码按键键码按键键码A65K75U85B66L76V86C67M77W87D68N78X88E69O79Y89F70P80Z90G71Q81,188H72R82.190I73S83[219J74T84]221想获得更多按键的键码，可以将下面的代码粘贴到浏览器控制台，回车，然后鼠标点击网页任意位置，按下键盘按键，控制台就会打印该按键信息document.onkeydown = function(e){ e = e || window.event; console.log(e); }下面是部分参数含义：altKey：是否为AltctrlKey：是否为Ctrlkey：按键输入的字符keyCode：键码shiftKey：是否为ShiftmetaKey：是否为Windows/Super键同步发布： https://cloud.tencent.com/developer/article/2013808
[Typecho小试牛刀]Joe主题增加文章目录（非插件方式）
背景joe主题没有目录功能，想要目标能自动创建文章目录，支持显示H1-H3共3级标题标题和目录联动效果话不多说，上代码！修改php文件需要修改的文件： /usr/themes/Joe/public/aside.php在 aside.php 的合适位置增加如下代码，用于在侧边栏创建目录容器# 仅在文章和页面生效 <?php if (($this->is('post') || $this->is('page'))) : ?> <path d="M640 192H224c-17.7 0-32-14.3-32-32s14.3-32 32-32h416c17.7 0 32 14.3 32 32s-14.3 32-32 32zM960 544H224c-17.7 0-32-14.3-32-32s14.3-32 32-32h736c17.7 0 32 14.3 32 32s-14.3 32-32 32zM640 896H224c-17.7 0-32-14.3-32-32s14.3-32 32-32h416c17.7 0 32 14.3 32 32s-14.3 32-32 32zM96 192H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32zM96 544H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32zM96 896H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32z" p-id="2085"></path> 目录 <?php endif; ?>增加js代码下面的js可以直接在Joe主题的设置中添加位置：控制台->外观->设置外观->全局设置->自定义jsfunction get_catalogs(article_content) { const titleTag = ["H1", "H2", "H3"]; let titles = []; article_content.childNodes.forEach((e, index) => { const id = "header-" + index; if(titleTag.includes(e.nodeName)){ titles.push({ id: id, text: e.textContent, level: Number(e.nodeName.substring(1, 2)) }); e.setAttribute("id", id); } }); return titles; } // 找到目录容器 article_content = document.querySelector('.joe_detail__article'); if (article_content) { var catalog = get_catalogs(article_content); if (catalog.length == 0) { // 无目录，隐藏 $('.catalogue').hide(); } else { let catalogue = ''; for (let i = 0; i < catalog.length; i++) { let node = ' ' + catalog[i].text + ''; if (i == catalog.length - 1) { catalogue += node + ' ' } else { if (catalog[i + 1].level == catalog[i].level) { catalogue += node + ' '; } else if (catalog[i + 1].level > catalog[i].level) { catalogue += (catalog[i + 1].level > 1) ? node + ' ' : node + ' '; } else { if (catalog[i + 1].level - catalog[i].level == -2) { catalogue += i > 1 ? node + ' ' : node + ' '; } else { catalogue += i > 1 ? node + ' ' : node + ' '; } } } } document.querySelector('.catalogue-items').innerHTML = catalogue; $('.catalogue-item > a').on('mouseenter', function () { $(this).parent().addClass('_active'); }); $('.catalogue-item > a').on('mouseleave', function () { $(this).parent().removeClass('_active'); }); // 根据目录定位到标题 $('.catalogue-item > a').on('click', function () { document.removeEventListener("scroll", autoActive); $('.catalogue-item').removeClass('active'); $(this).parent().addClass('active'); let aim = document.querySelector('#' + $(this).attr('to')); let aim_top = aim.offsetTop; let aim_h = aim.clientHeight; let above_h = document.querySelector('.joe_header__above').clientHeight; let below_h = document.querySelector('.joe_header__below').clientHeight; let offset = 0; let case1 = !document.querySelector('.joe_header__above').className.includes('active'); let case2 = document.getElementsByTagName("html")[0].scrollTop + above_h > aim_top; if (case1 && case2) { offset = above_h; } window.scrollTo({ top: aim_top - offset - below_h - 10, behavior: 'smooth' }); setTimeout(() => { document.addEventListener("scroll", autoActive); }, 500); }); if (catalog.length) $('.catalogue-item').eq(0).addClass('active'); // 目录侧标题自动定位 let autoActive = function () { let html_top = document.getElementsByTagName("html")[0].scrollTop; //获得父级卷去的高度 for (let i = 0; i < catalog.length; i++) { let offset = 0; let h_id = '#' + catalog[i].id; let h_offset = document.querySelector(h_id).offsetTop; let above_h = document.querySelector('.joe_header__above').clientHeight; let below_h = document.querySelector('.joe_header__below').clientHeight; if (!document.querySelector('.joe_header').className.includes('active')) offset = above_h; if (h_offset + below_h + offset + 10 >= html_top) { $('.catalogue-item').removeClass('active'); if (i > 0 && i < catalog.length - 1 && document.querySelector('#' + catalog[i].id).offsetTop > html_top + window.innerHeight * 0.2) { //还没到下一个标题 i--; } $('#to-' + catalog[i].id).parent().addClass('active'); break; } } }; document.addEventListener("scroll", autoActive); } } else { // 不是文章，隐藏目录 $('.catalogue').hide(); }css样式表样式表同js，也可以在Joe主题的设置中添加位置： 控制台->外观->设置外观->全局设置->自定义css以下样式表是我自己博客使用的，仅供参考.joe_aside__item.catalogue { z-index: 999; position: sticky; top: 45px; margin-bottom: 15px; transition: top 0.35s; background: var(--background) } .joe_aside__item.catalogue .joe_aside__item-contain { padding: 0; margin: 0; margin-left: 10px } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items { border-left: 1px solid var(--classC); border-bottom: 1px solid var(--background); padding: 15px } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item { margin: 0; padding: 0; line-height: 26px; font-size: 16px } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item a { position: relative; display: block; line-height: 26px; color: var(--main); transition: color 0.5s } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item a: hover { color: var(--theme) } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item._active>a, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item.active>a { color: var(--theme) } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item._active>a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item.active>a::before { content: ""; position: absolute; left: -17px; top: 0; width: 2px; height: 26px; background-color: var(--theme); transition: height 0.35s } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2.catalogue-item, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item { font-size: 14px } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item._active>a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item.active>a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item._active>a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item.active>a::before { left: -34px } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item .level-3 .catalogue-item, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item .level-3 .catalogue-item { font-size: 12px } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item .level-3 .catalogue-item._active>a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item .level-3 .catalogue-item.active>a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item .level-3 .catalogue-item._active>a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item .level-3 .catalogue-item.active>a::before { left: -51px } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item { font-size: 12px } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item ul { padding-left: 17px } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items ul { display: block; list-style-type: disc }提醒假如后期升级Joe主题，记得重新修改 aside.php同步发布： https://cloud.tencent.com/developer/article/2011100
本博客使用的 Joe主题 ，有些功能是根据自己需要增改的。 本文随手记录一下本博客的成长记录，没有 版本管理、 源码分享{timeline}{timeline-item color="#ed4014"} 2023-10-08优化：首页默认显示“热门”{/timeline-item}{timeline-item color="#19be6b"} 2022-08-14优化：最多支持同时在6处登录{/timeline-item}{timeline-item color="#19be6b"} 2022-06-06增加：因为要转载一篇文章，增加了转载标记字段优化：2D标签云增加悬停描述信息{/timeline-item}{timeline-item color="#19be6b"} 2022-05-31优化：编辑器增加若干快捷键{/timeline-item}{timeline-item color="#19be6b"} 2022-05-30优化：调整默认字体优化：编辑器增加换行按钮优化：段落首行缩进{/timeline-item}{timeline-item color="#19be6b"} 2022-05-29优化：发布、删除后自动优化自增id优化：打乱2D标签云顺序修复：编辑器预览不支持显示cdn图片修复：后台文件管理不支持显示cdn图片{/timeline-item}{timeline-item color="#19be6b"} 2022-05-27优化：后台Unicloud图床+企微评论通知插件二合一修复：JOE-COLLAPSE解析为标题有时出错，JOE-COLLAPSE目录跳转位置错误修复：未登录用户侧边栏、帖子作者头像、昵称bug{/timeline-item}{timeline-item color="#19be6b"} 2022-05-26优化：首页过滤器增加“最近修改”，窄屏显示全部过滤器{/timeline-item}{timeline-item color="#19be6b"} 2022-05-25优化：多处头像逻辑优化增加：指定纪念日全站灰度优化：评论框高度调整优化：友链自动打乱顺序{/timeline-item}{timeline-item color="#19be6b"} 2022-05-24已登录用户评论优化评论通知插件优化增加:新的页面模板——新鲜事{/timeline-item}{timeline-item color="#19be6b"} 2022-05-23优化上传组件(Unicloud)本地git，记录版本变化{/timeline-item}{timeline-item color="#19be6b"} 2022-05-22目录浮标换形式收到评论，企微通知解析JOE-TIMELINE为标题{/timeline-item}{timeline-item color="#19be6b"} 2022-05-21重写目录生成函数，支持普通标题、居中标题、折叠面板混合解析标题字号调整优化暗色模式，服务器端+客户端双层控制，避免闪烁{/timeline-item}{timeline-item color="#19be6b"} 2022-05-20修复目录无h1，h3变为h2，但浮标错位的bug (复制h2样式到与h2同级的h3)标题字号调整，去除h1、h2前的浮标优化暗色模式，自动变色{/timeline-item}{timeline-item color="#19be6b"} 2022-05-19侧边栏增加“目录”，支持解析h1-h3，以及“折叠面板”(php+js+css){/timeline-item}{timeline-item color="#19be6b"}2022-05-16修复按分类、标签、作者搜索，搜索结果提示不显示分类名、标签、作者名的bug(php)支持2D/3D标签云{/timeline-item} {timeline-item color="#19be6b"} 时间未记录修改顶部Nav，主要支持单独设置背景色移植“大红灯笼”，节日手动启用将jsd修改为我的static源支持评论验证码其它乱七八糟的修改{/timeline-item}{/timeline}