MyLife主题演示站 - joe主题
type: channel
link: https://store.mmbkz.cn/demo/mylife/index.php/tag/joe%E4%B8%BB%E9%A2%98/
items: 为Joe主题添加更多，新的表情
items: 对于JOE主题，使用自定义头像，解决部分评论没有头像的问题
items: JOE主题添加全屏头图显示（通用）
items: 狗洞——改自JOE主题的简单的小论坛
items: joe主题首页添加夹子装饰
items: 火喵自用typecho-joe主题文章目录插件及样式修改
items: JOE主题首页显示新闻早报API，可每日更新（功能可扩展）

为Joe主题添加更多，新的表情
type: item
date: 2021-11-21T11:46:00+00:00
description: {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 ' them…

对于JOE主题，使用自定义头像，解决部分评论没有头像的问题
type: item
date: 2021-11-02T10:01:00+00:00
description: 方案一博客使用经常会遇到有的评论没有头像，直接返回显示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'方案二方案一虽然完美，但是使用此方法会被发送大量的请求，如果页面的头像数据多，会导致网站相应及其缓慢…

JOE主题添加全屏头图显示（通用）
type: item
date: 2021-09-19T02:12:00+00:00
description: 最近也是经常有小伙伴问我，全屏的头图怎么做。因为之前我用的是图片，后来改成了视频，但是视频的文件我已经修改了很多牵扯到自定义的部分，不能通用，我现在就从备份中扒出来之前的那份纯图片的文件，现在整理一下分享给大家文件的大部分内容是从一个国外的免费模板扒的，但是找不到出处了。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 …

狗洞——改自JOE主题的简单的小论坛
type: item
date: 2021-08-19T07:34:00+00:00
description: 论坛现已关闭，于2021-8-31什么是狗洞这只是我在找导航图标的时候，找到了当初做舔狗日记的小icon。本打算叫树洞啊，论坛啊，广场啊，但是顶着狗头，那就叫个狗洞吧所以，什么是狗洞这是我（火喵）最近修改的一个joe主题，起因是看到了腾讯的discuz!Q上线了3.0版本，而且非常精简实用，因此也打算自己创建一个附带论坛性质的简易网站。网站开起来登录发帖功能，需要注册账号才可以进行评论和回复。具体的版块功能还没有确定，而且页面内容相对简单，日后会加以完善。干嘛用的呢具体用途还没想好，但是作为一个简易论坛，注册可以发帖发文，有问题可以互动交流，但是还没想好，毕竟是博客程序，互动内容太少qaq。后台装了美化，方便的进行编辑发表。emmm..

joe主题首页添加夹子装饰
type: item
date: 2021-08-08T14:46:00+00:00
description: 前言今天下午本来打算将博客搬到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主题文章目录插件及样式修改
type: item
date: 2021-08-05T02:49:00+00:00
description: {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，可每日更新（功能可扩展）
type: item
date: 2021-07-28T07:39:00+00:00
description: 现在推荐使用 RSS方式呈现“新闻早报” （但是API方式本教程没毛病啦 |´・ω・)ノ ）{cat_tips_info}今天有小伙伴来问我，主页的新闻是怎么做的，讲了半天也没说清楚，现在记录一下过程~{/cat_tips_info}{cat_tips_error}本文火喵原创，禁止原文转载，部分引用请标明参考出处及本文链接！！！{/cat_tips_error}效果图内页效果因为本站已经改变，可参考 他的链接 样式，使用本站教程制作。选择APIAPI有许多网站提供，可以丰富我们的博客，这里作为教程，使用本站正在使用的 ALAPI注册后，进入后台个人中心复制出tokenALAPI主页进入 每日60秒早报查看到php示例代码，别忘了末尾的?>新闻内页因为是api，所以新闻内页我们使用独立的页面作为载体新建页面模板从\usr\themes\Joe复制出一份page.php，并在头部添加<?php /** * 新闻 * * @package custom * **/ ?> 将内部<?php $this->need('public/article.php'); ?>代码替换成api的示例代码，别忘了换token在$err = curl_error($curl);下添加一行$a=json_decode($response,true);，效果为：$err = curl_error($curl); $a=json_decode($response,true);设置新闻页将echo $response;替换为以下代码{cat_hide}echo " 每日新闻 "; echo " 当前时间：" . date('Y年n月j日 H时') . " "; echo " " . $a['data']['news'][0] . " "; echo " " . $a['data']['news'][1] . " "; echo " " . $a['data']['news'][2] . " "; echo " " . $a['data']['news'][3] . " "; echo " " . $a['data']['news'][4] . " "; echo " " . $a['data']['news'][5] . " "; echo " " . $a['data']['news'][6] . " "; echo " " . $a['data']['news'][7] . " "; echo " " . $a['data']['news'][8] . " "; echo " " . $a['data']['news'][9] . " "; echo " " . $a['data']['news'][10] . " "; echo " " . $a['data']['news'][11] . " "; echo " " . $a['data']['news'][12] . " "; echo " " . $a['data']['news'][13] . " "; echo " " . $a['data']['news'][14] . " "; echo " " . $a['data']['weiyu'] . " "; echo " 内容来自ALAPI ";{/cat_hide}保存后台新建页面，假设自定义的地址是dailynews.html，模板选择新闻查看新页面是否显示正常主页文章流为了达到在首页显示的效果，需要修改index.php因为是每天更新，因此选择显示在文章最顶部Ctrl+F查找<div class="joe_index__list" data-wow="<?php $this->options->JList_Animate() ?>">在此代码上方位置粘贴上一步文章内页考过来的示例代码将此前的echo位置开始替换echo的内容{cat_hide} echo " "; echo ""; echo " "; echo " " . $a['data']['date'] . " "; echo ""; echo "日更火喵新闻早早报"; echo "" . $a['data']['weiyu'] . ""; echo " " . date('Y年n月j日') . " 每日60秒早报 <path d='M512.2 564.743a76.818 76.818 0 0 1-30.973-6.508L108.224 393.877c-26.105-11.508-42.56-35.755-42.927-63.272-.384-27.44 15.356-52.053 41.042-64.232l373.004-176.74c20.591-9.737 45.1…