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

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

目录树


有个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

评论 (4)

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

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

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

      表情

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

    文章写的不错的了呀

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

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

      回复