农学网 - Joe
type: channel
link: http://nongxue.top/tag/Joe/
items: [Joe]评论正确显示Windows11版本
items: [Joe主题]解除Live2D小人宽屏幕(width>1760px)才显示的限制
items: [Typecho小试牛刀]给Joe编辑器增加热键
items: [Typecho小试牛刀]Joe主题增加文章目录（非插件方式）
items: Typecho-Joe魔改记录

[Joe]评论正确显示Windows11版本
type: item
date: 2023-08-10T17:41:27+08:00
description: 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小人宽屏幕(width>1760px)才显示的限制
type: item
date: 2022-08-04T11:00:00+08:00
description: 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编辑器增加热键
type: item
date: 2022-05-31T15:07:00+08:00
description: 笔者博客目前使用的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主题增加文章目录（非插件方式）
type: item
date: 2022-05-22T09:11:00+08:00
description: 背景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 = catalogu…

Typecho-Joe魔改记录
type: item
date: 2022-05-19T16:58:00+08:00
description: 本博客使用的 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}