执念博客教程备份 joe主题强化功能
登录
标签搜索
侧边栏壁纸
博主昵称
KNIFE

  • 累计撰写 12 篇文章
  • 累计收到 35 条评论
typecho

执念博客教程备份 joe主题强化功能

KNIFE
KNIFE
2023-01-26 / 4 评论 / 154 阅读 / 正在检测是否收录...

目录树

有个joe主题二改的王者，他叫执念博客
经他之手的joe主题，终于赶上了时代的浪潮，获取了一波又一波的强化
joe主题，在您之手，又一次成为了typecho现象级的主题（虽然我承认joe到现在为止也是现象级的主题）
您为joe主题加装了打赏、评论美化、阅读时长统计、在线人数统计手机端登陆等千奇百怪的但是又异常实用的教程

但是，王者终究会跌落神坛
2022年6月25日，执念博客最后一次发文章
2021年10月2日，执念博客款 joe 主题 （下文称之为 joe max ） 最后一次更新。
而今天是2023年1月24日
起初，我只是以为 执念博客 跟joe主题原作者一样，只是摆烂了，但是没有停止对网站的运营
但是，随着昨天我发现执念博客以及其所有附属网站的ssl全部实效
我意识到了危机
没错，执念博客的joe max，可能以后真的不能用下去了

以下是我不推荐使用 joe max 的原因
首先，是主题大小的臃肿，joe只有 1.8mb ，而joe max却组组有 41.3mb ！后者是前者的足足 22.9 倍！这意味着，joe主题原本所宣传的轻量，以及不存在了，打开网页会比原版joe更加慢
而且，最致命的是， joe max 主题在打开文章时，需要与执念博客官网进行联系，如果联系不上，就会显示网络错误。看上去不错的功能，缺因此这变相拖累文章加载速度。如果像今天这样，出现了执念博客无法正常访问的情况，那 joe max 虽然还是能用，但是体验会很差，特别是当你打开文章的时候，会进行长时间加载，最后弹出弹窗：网络错误
综上所述， joe max 虽然功能强大，缺十分囊肿，最致命的一点是，：joe max 与执念博客官网紧紧联系在一起，也就是说如果执念官网没了，那你的网站体验就会极差。

当然我认为执念博客还是有希望的，考虑到最近正在过年，所以执念博客的站长很有可能在老家没网，无法处理网站事务
2023-01-28 补充，执念博客官网ssl已恢复

相较于以上的一些观点，其实最重要的最好不要你使用 joe max 的原因就是：执念博客发了一堆教程，这些教程就有包括如何 单独实现 joe max 里部分功能 ，所以，通过这样，我们或许能够选择自己感兴趣的功能，自己动动手改改代码，或许就能实现你感兴趣的功能了

而本文的作用，就是为了防止执念博客倒了以后这些教程也随之消失，同时，也作为教程整理

严正声明：以下内容均原创自 执念博客 本文仅为备份和整理


11451333.jpg

Joe主题实现打赏设置

成品图

教程如下
1.新增一个php文件，用于以后新增自定义设置，文件名：custom.php；文件路径：usr/themes/Joe-master/public

<?php 

    // 收款设置
    $ZNPaySet = new Typecho_Widget_Helper_Form_Element_Select(
        'ZNPaySet',
        array(
            'on' => '开启（默认）',
            'off' => '关闭',
        ),
        'on',
        '是否启用执念打赏功能',
        '介绍：开启后，文章底部展示打赏功能 <br>
        详情可查看 <a href="https://www.ymhave.com/archives/zhinian.html#menu_index_2">https://www.ymhave.com/archives/zhinian.html#menu_index_2</a>
        '
    );
    $ZNPaySet->setAttribute('class', 'joe_content joe_custom');
    $form->addInput($ZNPaySet->multiMode());
    
    $ZNAlipay = new Typecho_Widget_Helper_Form_Element_Text(
        'ZNAlipay',
        NULL,
        NULL,
        '支付宝收款码',
        '介绍：填写此处，打赏界面展示支付宝收款码，图片地址 <br />'
    );
    $ZNAlipay->setAttribute('class', 'joe_content joe_custom');
    $form->addInput($ZNAlipay->multiMode());
    
    $ZNWeChat = new Typecho_Widget_Helper_Form_Element_Text(
        'ZNWeChat',
        NULL,
        NULL,
        '微信收款码',
        '介绍：填写此处，微信界面展示微信收款码，图片地址 <br />'
    );
    $ZNWeChat->setAttribute('class', 'joe_content joe_custom');
    $form->addInput($ZNWeChat->multiMode());
    
    $ZNQqPay = new Typecho_Widget_Helper_Form_Element_Text(
        'ZNQqPay',
        NULL,
        NULL,
        'QQ收款码',
        '介绍：填写此处，QQ界面展示QQ收款码，图片地址 <br />'
    );
    $ZNQqPay->setAttribute('class', 'joe_content joe_custom');
    $form->addInput($ZNQqPay->multiMode());
?>

成品如图
iShot_2023-01-28_17.12.43.jpg

2.修改handle.php文件，底部新增代码，放在最后一行上面，文件路径：usr/themes/Joe-master/public

<style>
    /*弹出*/
    .footer_flex { width: 42px; height: 42px; background-color: #f56c6c; border-radius: 50%; cursor: pointer; position: relative; z-index: 10; display: flex; justify-content: center; align-items: center; color:#909399; font-size:12px}
    .footer_flex:hover { background-color: #409eff; }
    /*top*/
    .footer_flex:hover .flex-footer { display: block; }
    .footer_flex .flex-footer { box-shadow: 0px 0px 5px 0px #409eff; border-radius: 8px; width: 156px; height: 166px; position: absolute; left: -52px; top: -175px; text-align: center; padding-top: 15px; background: #fff; display: none; }
    .flex-footer input{vertical-align:middle; margin-bottom:3px; *margin-bottom:3px;}
    </style>
    <script language="javascript" type="text/javascript">
    function zfb(){
     var obj=document.getElementById("ewm");
     obj.src=`<?php $this->options->ZNAlipay() ?>`;
    };
    function wx(){
     var obj=document.getElementById("ewm");
     obj.src=`<?php $this->options->ZNWeChat() ?>`;
    };
    function qq(){
     var obj=document.getElementById("ewm");
     obj.src=`<?php $this->options->ZNQqPay() ?>`;
    };
    </script> 
    <div style="text-align: center; margin-left:30px; <?php if(Helper::options()->ZNPaySet !== 'on') echo 'display:none;' ?>">
        <div class="footer_flex">
            <img src="https://www.ymhave.com/shang.png" width="20px" height="20px">
            <div class="flex-footer">
            <img id="ewm" src="<?php $this->options->ZNAlipay() ?>" width="120px" height="120px">
            <div style="margin-top:5px;">
            <label><input name="pay" type="radio" value="wx" checked="checked" onclick="wx()">微信</label>
            <label style="margin-left:3px; display:block-inline"><input name="pay" type="radio" value="zfb" onclick="zfb()" checked>支付宝</label>
            <label style="margin-left:3px;"><input name="pay" type="radio" value="qq" onclick="qq()">QQ</label>
            </div>
            <div style="height:40px; background:rgba(0,0,0,0);"></div>
            </div>
        </div>
        <p style="margin-top:5px; color:#909399; font-size:12px">打赏</p>
    </div>

成品图

iShot_2023-01-30_14.56.34.jpg

3.修改functions.php文件 （需修改两处） ，加入打赏设置菜单和底部引入新建的php文件，文件路径：usr/themes/Joe-master

<li class="item" data-current="joe_custom">打赏设置</li>

iShot_2023-01-26_21.24.17.jpg

// 收款设置
require_once("public/custom.php");

iShot_2023-01-26_21.26.21.jpg

4.为打赏按钮增加跳动特效，将以下代码放在主题的全局设置-自定义CSS里面

.footer_flex {
    animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}

iShot_2023-01-26_21.31.30.png

这样就成功了

注：源代码进行些许改动，源代码的打赏图标已经实效，已经改成了 KNIFE的小站 自用图标

手机端登录/注册功能

成品展示

教程

1.修改header.php，新增代码，路径：usr/themes/Joe-master/public

<ul class="joe_header__slideout-menu panel-box" style="margin-top: 15px; <?php if(Helper::options()->login4Phone !== 'on') echo 'display:none;'  ?>">
    <li>
        <?php if ($this->user->hasLogin()) : ?>
            <a class="link panel" href="#" rel="nofollow">
                <span><?php $this->user->screenName(); ?></span>
                <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="15" height="15">
                    <path d="M231.594 610.125C135.087 687.619 71.378 804.28 64.59 935.994c-.373 7.25 3.89 23.307 30.113 23.307s33.512-16.06 33.948-23.301c6.861-114.025 63.513-214.622 148.5-280.346 3.626-2.804 16.543-17.618 3.24-39.449-13.702-22.483-40.863-12.453-48.798-6.08zm280.112-98.44v63.96c204.109 0 370.994 159.345 383.06 360.421.432 7.219 8.649 23.347 32.44 23.347s31.991-16.117 31.62-23.342c-12.14-236.422-207.676-424.386-447.12-424.386z" />
                    <path d="M319.824 319.804c0-105.974 85.909-191.883 191.882-191.883s191.883 85.91 191.883 191.883c0 26.57-5.405 51.88-15.171 74.887-5.526 14.809-2.082 31.921 20.398 38.345 23.876 6.822 36.732-8.472 41.44-20.583 11.167-28.729 17.294-59.973 17.294-92.65 0-141.297-114.545-255.842-255.843-255.842S255.863 178.506 255.863 319.804s114.545 255.843 255.843 255.843v-63.961c-105.973-.001-191.882-85.909-191.882-191.882z" />
                    <path d="M512 255.843s21.49-5.723 21.49-31.306S512 191.882 512 191.882c-70.65 0-127.921 57.273-127.921 127.922 0 3.322.126 6.615.375 9.875.264 3.454 14.94 18.116 37.044 14.425 22.025-3.679 26.6-21.93 26.6-21.93-.028-.788-.06-1.575-.06-2.37.001-35.325 28.637-63.961 63.962-63.961z" />
                </svg>
            </a>
            <ul class="slides panel-body">
                <li>
                    <?php if ($this->user->group == 'administrator' || $this->user->group == 'editor' || $this->user->group == 'contributor') : ?>
                        <a class="link" rel="noopener noreferrer nofollow" target="_blank" href="<?php $this->options->adminUrl("manage-posts.php"); ?>">管理文章</a>
                    <?php endif; ?>
                </li>
                <li>
                    <?php if ($this->user->group == 'administrator' || $this->user->group == 'editor') : ?>
                        <a class="link" rel="noopener noreferrer nofollow" target="_blank" href="<?php $this->options->adminUrl("manage-comments.php"); ?>">管理评论</a>
                    <?php endif; ?>
                </li>
                <li>
                    <?php if ($this->user->group == 'administrator') : ?>
                        <a class="link" rel="noopener noreferrer nofollow" target="_blank" href="<?php $this->options->adminUrl("options-theme.php"); ?>">修改外观</a>
                    <?php endif; ?>
                </li>
                <li>
                    <a class="link" rel="noopener noreferrer nofollow" target="_blank" href="<?php $this->options->adminUrl(); ?>">进入后台</a>
                </li>
                <li>
                    <a class="link" rel="noopener noreferrer nofollow" href="<?php $this->options->logoutUrl(); ?>">退出登录</a>
                </li>
            </ul>
        <?php else : ?>
            <a class="link panel" href="#" rel="nofollow">
                <span>用户登录</span>
                <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="15" height="15">
                    <path d="M231.594 610.125C135.087 687.619 71.378 804.28 64.59 935.994c-.373 7.25 3.89 23.307 30.113 23.307s33.512-16.06 33.948-23.301c6.861-114.025 63.513-214.622 148.5-280.346 3.626-2.804 16.543-17.618 3.24-39.449-13.702-22.483-40.863-12.453-48.798-6.08zm280.112-98.44v63.96c204.109 0 370.994 159.345 383.06 360.421.432 7.219 8.649 23.347 32.44 23.347s31.991-16.117 31.62-23.342c-12.14-236.422-207.676-424.386-447.12-424.386z" />
                    <path d="M319.824 319.804c0-105.974 85.909-191.883 191.882-191.883s191.883 85.91 191.883 191.883c0 26.57-5.405 51.88-15.171 74.887-5.526 14.809-2.082 31.921 20.398 38.345 23.876 6.822 36.732-8.472 41.44-20.583 11.167-28.729 17.294-59.973 17.294-92.65 0-141.297-114.545-255.842-255.843-255.842S255.863 178.506 255.863 319.804s114.545 255.843 255.843 255.843v-63.961c-105.973-.001-191.882-85.909-191.882-191.882z" />
                    <path d="M512 255.843s21.49-5.723 21.49-31.306S512 191.882 512 191.882c-70.65 0-127.921 57.273-127.921 127.922 0 3.322.126 6.615.375 9.875.264 3.454 14.94 18.116 37.044 14.425 22.025-3.679 26.6-21.93 26.6-21.93-.028-.788-.06-1.575-.06-2.37.001-35.325 28.637-63.961 63.962-63.961z" />
                </svg>
            </a>
            <ul class="slides panel-body">
                <li>
                    <a class="link" href="<?php $this->options->adminUrl('login.php'); ?>" target="_blank" rel="noopener noreferrer nofollow">登录</a>
                    <?php if ($this->options->allowRegister) : ?>
                        <a class="link" href="<?php $this->options->adminUrl('register.php'); ?>" target="_blank" rel="noopener noreferrer nofollow">注册</a>
                    <?php endif; ?>
                </li>
            </ul>
        <?php endif; ?>
    </li>
</ul>

php文件中搜索“推荐”关键词找到大概位置，再配合图片找到具体位置

iShot_2023-01-31_11.13.12.jpg

2.修改functions.php，新增代码，文件路径：usr/themes/Joe-master

// 手机端登录
$login4Phone = new Typecho_Widget_Helper_Form_Element_Select(
    'login4Phone',
    array(
        'off' => '关闭（默认）',
        'on' => '开启',
    ),
    'on',
    '是否启用手机端登录功能',
    '介绍：开启后，手机端侧边栏将展示登录功能和登录后的操作'
);
$login4Phone->setAttribute('class', 'joe_content joe_custom'); // 如果无法展示，则将joe_custom替换为joe_other
$form->addInput($login4Phone->multiMode());

随便放，如果是第一次放的话，建议放在“其他设置”里面，也就是邮箱授权码后面，记得要放在 $form->addInput($JCommentMailPassword->multiMode()); 下面才行
11451333.jpg

完成！

新增在线人数统计功能

成品图

教程如下

1.修改functions.php，底部新增，文件路径：usr/themes/Joe-master；如果无法显示设置，则将以下joe_custom修改为joe_other

// 在线人数设置
$onlinePersion = new Typecho_Widget_Helper_Form_Element_Select(
    'onlinePersion',
    array(
        'on' => '开启（默认）',
        'off' => '关闭',
    ),
    'on',
    '是否启用在线人数统计',
    '介绍：开启后，文章底部展示当前在线人数'
);
$onlinePersion->setAttribute('class', 'joe_content joe_custom');
$form->addInput($onlinePersion->multiMode());

iShot_2023-02-14_16.11.17.jpg

2.修改footer.php文件，文件路径：/usr/themes/Joe-master/public（需修改两处）

一处放在代码最顶端

<?php
    //首先你要有读写文件的权限，首次访问不显示，正常情况刷新即可
    $online_log = "slzxrs.dat"; //保存人数的文件到根目录,
    $timeout = 30;//30秒内没动作者,认为掉线
    $entries = file($online_log);
    $temp = array();
    for ($i=0;$i<count($entries);$i++){
        $entry = explode(",",trim($entries[$i]));
        if(($entry[0] != getenv('REMOTE_ADDR')) && ($entry[1] > time())) {
            array_push($temp,$entry[0].",".$entry[1]."\n"); //取出其他浏览者的信息,并去掉超时者,保存进$temp
        }
    }
    array_push($temp,getenv('REMOTE_ADDR').",".(time() + ($timeout))."\n"); //更新浏览者的时间
    $slzxrs = count($temp); //计算在线人数
    $entries = implode("",$temp);
    //写入文件
    $fp = fopen($online_log,"w");
    flock($fp,LOCK_EX); //flock() 不能在NFS以及其他的一些网络文件系统中正常工作
    fputs($fp,$entries);
    flock($fp,LOCK_UN);
    fclose($fp);
    $tj= "在线人数：".$slzxrs."人";
?>

iShot_2023-02-14_16.12.20.jpg

一处放在上一处下方（具体位置看图）

<div class="item" style="margin: 10px; <?php if(Helper::options()->onlinePersion !== 'on') echo 'display:none;'  ?>">
    <?php echo $tj ?>
</div>

iShot_2023-02-14_16.14.35.jpg

教程持续更新中 loading……
发评论催更

1
typecho教程网站joe源码
版权属于： KNIFE
本文链接： https://www.ymhave.com/archives/zhinian.html
作品采用： 《 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权
相关推荐
哔哩哔哩视频插入网页 iframe播放器全网最详细使用教程
哔哩哔哩视频插入网页 iframe播放器全网最详细使用教程
 往事-记一次无法访问网站的情况
往事-记一次无法访问网站的情况
 看电影/动漫要钱？不妨试试这些视频解析接口！
看电影/动漫要钱？不妨试试这些视频解析接口！
 禁用右键？我来教你如何获取网页源码！（html）
禁用右键？我来教你如何获取网页源码！（html）

评论 (4)

取消
  1. 头像
    KNIFE 作者
    MacOS · Google Chrome

    执念博客没崩，所以这篇文章就先鸽哩～

    回复
    1. 头像
      ceshi
      MacOS · Google Chrome
      @ KNIFE

      表情

      回复
  2. 头像
    抖音下拉框
    Windows 7 · Google Chrome

    文章写的不错的了呀

    回复
    1. 头像
      KNIFE 作者
      Android Pie · Google Chrome
      @ 抖音下拉框

      谢谢夸奖表情鸽只是暂时的，等有空了会再更的

      回复