{cat_tips_error}火喵原创，请勿转载{/cat_tips_error}前言评论区小伙伴留言，也想要在joe主题里添加更多新的表情。之前本来也想水一篇，但是很麻烦很麻烦。但是为了帮助新朋友们美化自己的主题，还是写一篇简单的教程吧。正好我也经常分享一些好看的表情，正好搭配实用。教程并非傻瓜式复制粘贴，需要耐心自制。步骤修改前请及时备份找好新表情本站也分享过许多好看的表情，可以直接食用。将表情收集好后重命名为简单的名称方便辨认。譬如：文件夹apple1.jpgapple2.jpgapple3.jpgapple4.jpgapple5.jpg然后将这些表情放入一个文件夹，这里例举假设是apple文件夹。将apple文件夹上传到usr/themes/Joe/assets/owo/目录下。修改json定位到usr/themes/Joe/assets/json/joe.owo.json文件，打开并全部复制打开json解压网站，譬如 Jsonla、Bejson ，将内容粘贴进去，并格式化后，复制出来。 按照格式，在文档最末端添加内容：{cat_hide}将最末尾 "icon": "(｡•ˇ‸ˇ•｡)", "data": "(｡•ˇ‸ˇ•｡)" }] }修改为 "icon": "(｡•ˇ‸ˇ•｡)", "data": "(｡•ˇ‸ˇ•｡)" }],//这里多一个逗号 //这里空出来添加内容 }{/cat_hide}在上方代码//这里空出来添加内容位置，加入举例的代码，依据自己实际情况修改增删{cat_hide}"EveOneCat": [{ "icon": "apple/apple1.jpg", "data": ":@(apple1)" }, { "icon": "apple/apple2.jpg", "data": ":@(apple2)" }, { "icon": "apple/apple3.jpg", "data": ":@(apple3)" }, { "icon": "apple/apple4.jpg", "data": ":@(apple4)" }, { "icon": "apple/apple5.jpg", "data": ":@(apple50)" }]{/cat_hide}检查无误后，重新用 Jsonla、Bejson 进行压缩，后覆盖源文件。修改phpphp文件有两个，一个显示评论区表情，一个显示邮件提醒的表情定位到core/factory.php找到以下代码$text = preg_replace_callback( '/\:\@\(\s*(高兴|小怒|脸红|内伤|装大款|赞一个|害羞|汗|吐血倒地|深思|不高兴|无语|亲亲|口水|尴尬|中指|想一想|哭泣|便便|献花|皱眉|傻笑|狂汗|吐|喷水|看不见|鼓掌|阴暗|长草|献黄瓜|邪恶|期待|得意|吐舌|喷血|无所谓|观察|暗地观察|肿包|中枪|大囧|呲牙|抠鼻|不说话|咽气|欢呼|锁眉|蜡烛|坐等|击掌|惊喜|喜极而泣|抽烟|不出所料|愤怒|无奈|黑线|投降|看热闹|扇耳光|小眼睛|中刀)\s*\)/is', function ($match) { return ' themeUrl . '/assets/owo/aru/' . str_replace('%', '', urlencode($match[1])) . '_2x.png"/>'; }, $text );在上方代码的下面，复制出一份，并修改成我们需要的格式，这里一份作为参考：{cat_hide} $text = preg_replace_callback( '/\:\@\(\s*(apple1|apple2|apple3|apple4|apple5)\s*\)/is', function ($match) { return ' themeUrl . '/assets/owo/apple/' . $match[1] . '.jpg"/>'; }, $text );{/cat_hide}定位到core/parse.php找到以下代码 $text = preg_replace_callback( '/\:\@\(\s*(高兴|小怒|脸红|内伤|装大款|赞一个|害羞|汗|吐血倒地|深思|不高兴|无语|亲亲|口水|尴尬|中指|想一想|哭泣|便便|献花|皱眉|傻笑|狂汗|吐|喷水|看不见|鼓掌|阴暗|长草|献黄瓜|邪恶|期待|得意|吐舌|喷血|无所谓|观察|暗地观察|肿包|中枪|大囧|呲牙|抠鼻|不说话|咽气|欢呼|锁眉|蜡烛|坐等|击掌|惊喜|喜极而泣|抽烟|不出所料|愤怒|无奈|黑线|投降|看热闹|扇耳光|小眼睛|中刀)\s*\)/is', function ($match) { return ' themeUrl . '/assets/owo/aru/' . str_replace('%', '', urlencode($match[1])) . '_2x.png" alt="表情"/>'; }, $text );在上方代码的下面，复制出一份，并修改成我们需要的格式，这里一份作为参考：{cat_hide} $text = preg_replace_callback( '/\:\@\(\s*(apple1|apple2|apple3|apple4|apple5)\s*\)/is', function ($match) { return ' themeUrl . '/assets/owo/apple/' . $match[1] . '.jpg"/>'; }, $text );{/cat_hide}然后就能在表情中看到了，最后注意几点：如果出错，请重新仔细查看本教程示例代码，注意文件路径，图片格式等是否填错推荐使用cdn代替本地图片，加快速度
对于JOE主题，使用自定义头像，解决部分评论没有头像的问题
方案一博客使用经常会遇到有的评论没有头像，直接返回显示Gavatar默认的头像，不仅难看的要死，还没办法更改，严重影响美观（比如我这半个强迫症+半个完美主义者），而且joe主题默认判断使用的是qq头像，使用了qq邮箱的Gavatar头像就不会显示了，因此为了解决这个问题，我折腾了好久才解决（主要是不会qaq步骤1对于joe7.x主题定位到主题目录下文件\Joe\core\function.php，查找/* 通过邮箱生成头像地址 */将内容替换成以下：/* 通过邮箱生成头像地址（火喵改） */ function _getAvatarByMail($mail) { $gravatarsUrl = Helper::options()->JCustomAvatarSource ? Helper::options()->JCustomAvatarSource : 'https://gravatar.cooluc.com/avatar/'; $mailLower = strtolower($mail); $md5MailLower = md5($mailLower); $qqMail = str_replace('@qq.com', '', $mailLower); $uri = 'https://cdn.helingqi.com/wavatar/' . $md5MailLower . '?d=404'; $headers = @get_headers($uri); if (preg_match("|200|", $headers[0])) { echo $gravatarsUrl . $md5MailLower . '?d=mm'; } elseif (strstr($mailLower, "qq.com") && is_numeric($qqMail) && strlen($qqMail) < 11 && strlen($qqMail) > 4) { echo 'https://thirdqq.qlogo.cn/g?b=qq&nk=' . $qqMail . '&s=100'; } else { echo '自定义头像地址'; } }建议将之前的内容注释掉，不要删除。步骤2定位到主题目录下文件\Joe\core\core.php，查找/* 通过邮箱生成头像地址 */将内容替换成以下：/* 通过邮箱生成头像地址（火喵改） */ function _getAvatarUrlByMail($mail) { $gravatarsUrl = Helper::options()->JCustomAvatarSource ? Helper::options()->JCustomAvatarSource : 'https://gravatar.cooluc.com/avatar/'; $mailLower = strtolower($mail); $md5MailLower = md5($mailLower); $qqMail = str_replace('@qq.com', '', $mailLower); $uri = $gravatarsUrl . $md5MailLower . '?d=404'; $headers = @get_headers($uri); if (preg_match("|200|", $headers[0])) { return $gravatarsUrl . $md5MailLower . '?d=mm'; } elseif (strstr($mailLower, "qq.com") && is_numeric($qqMail) && strlen($qqMail) < 11 && strlen($qqMail) > 4) { return 'https://thirdqq.qlogo.cn/g?b=qq&nk=' . $qqMail . '&s=100'; } else { return '自定义头像地址https://cat.dorcandy.cn/000pages/api/api-mc.php'; } }保存好刷新查看效果。其他有的主题版本在core.php中无法找到关键词，找不到就直接跳过，无需修改文件即可。简单的原理就是，依据邮箱去查找是否存在头像，如果不存在会返回状态码404，依据状态码的不同来判断。但是我这样设置完，网站加载变得异常迟钝，不知道原因所在，希望有大佬赐教，感谢。图片地址可以使用api地址，譬如火喵博客的MC酱API。可以尝试使用随机函数，比如'images/'.rand(1,5).'.jpg'方案二方案一虽然完美，但是使用此方法会被发送大量的请求，如果页面的头像数据多，会导致网站相应及其缓慢，我都受不了了，于是想到了一个新的方案——使用onerror事件对于joe7.x主题定位到主题目录下文件\Joe\core\function.php，查找/* 通过邮箱生成头像地址 */将内容echo $gravatarsUrl . $md5MailLower . '?d=mm';替换成echo $gravatarsUrl . $md5MailLower . '?d=404';（没错就是把mm改成404）在主题设置——全局设置——自定义JS中，填入：/* 头像替换 */ function imgerrorfun(){ var img=event.srcElement; img.src="替换的头像地址"; img.onerror=null; }然后在主题文件——Joe/public/comment.php中，查找<img width="48" height="48"----------将其改为<img onerror="imgerrorfun();" width="48" height="48"----------没错就是中间加了个onerror="imgerrorfun();"同理在主题文件——Joe/public/aside.php中，查找<img width="40" height="40" class="avatar lazyload" src="<?php _getAvatarLazyload(); ?>" data-src="<?php _getAvatarByMail($item->mail) ?>" alt="<?php $item->author(false) ?>" />同样将其改为<img onerror="imgerrorfun();" width="40" height="40"----------如遇到没显示的地方，如法炮制即可。方案三通过查看Gavatar文档，我们发现官方有一个可用的方案：因此，我们可以将最后的代码部分修改成诸如此类的便可：else { echo $gravatarsUrl . $md5MailLower . '?d=https%3A%2F%2Fcat.dorcandy.cn%2logo'; }方案四（仅参考）推荐使用方案二，方案三仅仅是一个思路，就是将img标签改为div，并使用background-image来叠加两张图片来显示效果。因为404的图片在background-image下会不显示，直接显示下一张图。但是遇到了有的邮箱是透明png，这样的话显示就重叠了，无法达到效果，因此舍弃。方案五（11月5日追加）现在推荐使用 Cravatar - 互联网公共头像服务 ，一步到位。
最近也是经常有小伙伴问我，全屏的头图怎么做。因为之前我用的是图片，后来改成了视频，但是视频的文件我已经修改了很多牵扯到自定义的部分，不能通用，我现在就从备份中扒出来之前的那份纯图片的文件，现在整理一下分享给大家文件的大部分内容是从一个国外的免费模板扒的，但是找不到出处了。2021年11月自查发现，当年不是很懂代码，杂余垃圾较多，可以自行取舍，我就懒得搞了 |´・ω・)ノ参考因为我已经把图片换成了视频了，图片没办法参考我的网站了，各位可以参考使用本方案的 这个链接 （已失效），来查看效果css内容如下：{cat_hide}.bg-hero { background-color: #3d5afe; background-size: cover; background-position: center center; position: relative; } .bg-hero:before { position: absolute; z-index: 1; width: 100%; height: 100%; display: block; left: 0; top: 0; content: ""; background-color: rgba(0, 0, 0, 0.3); } .bg-hero .container { z-index: 2; position: relative; } .bg-hero .container h1 { font-family: Pacifico; font-weight: normal; color: #ffffff; } .py-md-0 { padding-top: 0 !important; } .py-md-0 { padding-bottom: 0 !important; } .container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1140px; } } .container-fluid { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .navbar > .container, .navbar > .container-fluid { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 575.99px) { .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid { padding-right: 0; padding-left: 0; } } @media (min-width: 576px) { .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }} @media (max-width: 767.99px) { .navbar-expand-md > .container, .navbar-expand-md > .container-fluid { padding-right: 0; padding-left: 0; } } @media (min-width: 768px) { .navbar-expand-md > .container, .navbar-expand-md > .container-fluid { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }} @media (max-width: 991.99px) { .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid { padding-right: 0; padding-left: 0; } } @media (min-width: 992px) { .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }} @media (max-width: 1199.99px) { .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid { padding-right: 0; padding-left: 0; } } @media (min-width: 1200px) { .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } .navbar-expand > .container, .navbar-expand > .container-fluid { padding-right: 0; padding-left: 0; } .navbar-expand > .container, .navbar-expand > .container-fluid { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } @media (min-width: 768px) { .vh-md-100 { height: 100vh; } } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto { position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; } @media (min-width: 768px) { .col-md { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-md-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; } .col-md-8 { -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; max-width: 66.66667%; }} .mx-auto { margin-left: auto !important; margin-right: auto !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .text-white { color: #fff !important; } .text-center { text-align: center !important; } .img-fluid { max-width: 100%; height: auto; } .rounded-circle { border-radius: 50% !important; } .img-profile { max-width: 175px; } .lead { font-size: 1.2rem; font-weight: 400; } .mb-5, .my-5 { margin-bottom: 1.5rem !important; } .mb-6, .my-6 { margin-bottom: 1.8rem !important; } .font-weight-bold { font-weight: 700 !important; } /* Typist */ @keyframes blink { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } @-webkit-keyframes blink { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } .typist .selectedText { display: none; } .typist:after { position: relative; top: 7px; display: inline-block; height: 30px; margin-left: 5px; content: " "; -webkit-animation: blink .5s step-end infinite alternate; animation: blink .5s step-end infinite alternate; border-right: 2px solid; }{/cat_hide}html需创建一个html文件，填入以下内容{cat_hide} Hi, I'm ScarletDor. 火 喵 日 记 本 {/cat_hide}引入字体这一步如不需要可以省略 引入至主题将上述内容整合成一个html，假设命名为lalala.html定位到主题的index.php文件，在适当位置引入html，比如查找定位<?php $this->need('public/header.php'); ?>，在其下方引入：<?php include ("public/lalala.html"); ?>将lalala.html放在public文件夹下即可追加-注意如不清楚如何整合，可以下载我整理好的html文件，直接引入即可（上面的前三项都不用看了）：{cat_hide}{cat_download name="下载" url="https://dorcandy.lanzouw.com/igtDzu7sb1c" password=""}{/cat_hide}已知问题：和侧边栏的3D标签云共用可能会产生bug，建议关闭侧边栏的3D标签云。
论坛现已关闭，于2021-8-31什么是狗洞这只是我在找导航图标的时候，找到了当初做舔狗日记的小icon。本打算叫树洞啊，论坛啊，广场啊，但是顶着狗头，那就叫个狗洞吧所以，什么是狗洞这是我（火喵）最近修改的一个joe主题，起因是看到了腾讯的discuz!Q上线了3.0版本，而且非常精简实用，因此也打算自己创建一个附带论坛性质的简易网站。网站开起来登录发帖功能，需要注册账号才可以进行评论和回复。具体的版块功能还没有确定，而且页面内容相对简单，日后会加以完善。干嘛用的呢具体用途还没想好，但是作为一个简易论坛，注册可以发帖发文，有问题可以互动交流，但是还没想好，毕竟是博客程序，互动内容太少qaq。后台装了美化，方便的进行编辑发表。emmm..
前言今天下午本来打算将博客搬到docker上，再整个内网穿透，可是整整一下午都不行，好难受，突然qq响起，一看是小伙伴新做的夹子样式，非常好看！于是打算也整一个！虽然完成品看着很不错，但是我并不是非常满意，日后有可能就删掉了qaq步骤添加图片定位到\usr\themes\Joe\assets\js\joe.index.min.js在第大概28行添加{cat_hide} 效果如图：{/cat_hide}添加样式随便创建一个css，写入以下内容，记得要在include.php引用{cat_hide}/*首页夹子*/ .jiazi { position: absolute; margin: -15px 0; z-index: 1; } @media screen and (min-width:1200px) { .jiazi{ left: -15px; } } @media screen and (min-width:769px) and (max-width:1200px) { .jiazi{ left: -13px; } .jiazi img{ height: 155px; } } @media screen and (max-width:769px) { .jiazi{ left: -10px; } .jiazi img{ height: 110px; } }{/cat_hide}大功告成啦！！图片样式图片位置可以替换成自己喜欢的图片默认图片大小30x170，其中有图的中心内容30x130，上下留白各20px，以下素材可以自行替换如果你有更好看的样式欢迎分享样式图片作者链接档案夹火喵/猫猫爪HYTNHYTN.TOP猫爪书签HYTNHYTN.TOP
火喵自用typecho-joe主题文章目录插件及样式修改
{cat_tips_warning color=""}前排提示！！此方法为之前用的方法，实际效果和现在的不同。本文火喵原创，禁止转载{/cat_tips_warning}样式效果之前小站做了个文章目录，但是问题很多就没有写什么使用方法，但是今天有小伙伴来问我要小站的目录，于是只好写一篇这样的教程，本来是很简单的，用插件就可以实现了，但是有一些美中不足之处，这样写出来也方便和小伙伴们交流。（才不是为了水一篇博文的！绝对是呢！！→_→）最终的效果是这样的，小伙伴也能在小站浏览的时候发现它下载插件各位可以去插件作者地址去下载： https://github.com/wuruowuxin74/MenuTree也可以在我这下现成的{cat_hide}{cat_download name="joe文章目录" url="https://dorcandy.lanzoui.com/ixiGWs943va" password=""}{/cat_hide}写入样式可以新建一个postmenu.css，写入{cat_hide}/*文章目录样式,针对joe7主题修改*/ .index-menu { width: 250px; position: fixed; top:120px; left:30px; background: var(--background); border-radius: var(--radius-wrap); box-shadow: var(--box-shadow); max-height:600px; overflow-y:auto; } .index-menu-link{ color: var(--main); text-shadow: var(--text-shadow); } .index-menu-list{ margin-bottom:10px!important; margin-top:5px!important; } @media screen and (max-width:1900px) { .index-menu{ display:none; } }{/cat_hide}别忘了在include.php引用美化样式是火喵自用，不满意的地方可以自行修改，更多可修改的部分参见插件php内的说明。插件启动后，在想要插入目录的文章，页面的任意位置写 更方便的使用（可选）小伙伴们会发现在使用文字目录时，打字 很麻烦，现在有两个解决办法，一个是写入到joe编辑器的工具栏，二是放在编辑框的右侧，如图，用的时候直接复制一下就好了修改\admin\write-post.php内，想要的位置添加代码 <?php _e('文章目录 '); ?> 可选择修改write-page.php同理最后想说因为使用的插件可以自选当前文章是否需要用文章目录，我之前也修改过另一个文章目录插件，是自动检测文章内容的H2,H3字段，当然有需要的也可以这么改看css可知我选择的是position: fixed，针对浏览器窗口定位，缺点是在非1080的屏幕上很丑，因此隐藏了宽度小于1900的显示，高分辨率屏幕就显得格格不入了，没办法qaq，也不能跟随文章页滚动，有大佬会修改请告诉我，感谢
JOE主题首页显示新闻早报API，可每日更新（功能可扩展）