使用RuleUser接管Typecho用户中心教程 - 星泽V社

星泽V社

发布于 2022-05-15 09:56:13

1.1K1

发布于 2022-05-15 09:56:13

文章被收录于专栏：星泽V社的博客

RuleUser通过API的方式完全接管typecho的用户系统，让Typecho网站拥有一个独立会员中心的同时，还可以将前台用户的操作全部API化。

具体演示请查看 Typecho独立用户中心上线-星泽V社

RuleUser安装及介绍请查看 Typecho独立会员中心，前后端分离，充值付费功能集成，APP扫码登录

本文讲解会员系统接管typecho的教程（不接管也没事，看自己心情就好），这里我只写我网站Joe主题的修改，仅供参考，其他主题去看看不暇的教程会员系统接管教程。

方案有两种，第一种是php实现，第二种是js实现

方案一的好处是不会对模板进行大改，可以很方面的接管，而且完全按照php的标签规范，但是坏处是如果挂了cdn就会导致登录状态被缓存，就比如我自己网站的首页。而且性能的提升不如纯js前后端分离。
方案二的好处是完全js前后端分离，无论是用户交互还是网站性能都可以依靠js达到很高的提升，缺点就是需要有js的基础知识，对个人能力有要求，并且如果碰到复杂的模板，改起来也废时间。

我使用的是方案二 js前后端分离

，需要在typecho模板中引入RuleUser，只需要修改模板的footer.php文件，在的上方，加入如下代码（ruleuser是我前面步骤自定义的文件夹名称，代表RuleUser所在目录）：

    loadPostBtn(<?php echo $this->cid; ?>);
    loadPostShop(<?php echo $this->cid; ?>)

然后，在文章模板，post.php合适的位置（一般是文章内容底下，加入如下代码）：

<div id="RuleUser-PostShop"></div>
<div id="RuleUser-PostBtn"></div>

这样，就可以调用出文章插入的付费商品和操作按钮，截图如下：

会员的登录注册

替换/usr/themes/joezhinian/Joe-master/public/ 下的header.php文件

文件下载：header.zip

在 themes/Joe/public/footer.php 文件最后添加以下代码

userInfo()
function userInfo(){
    if(localStorage.getItem('userinfo')){
        var userInfo = JSON.parse(localStorage.getItem('userinfo'));
        var uid = userInfo.uid;
        var name = userInfo.name;
        var lv = Number(userInfo.lv);
        var lvText = rankList[lv];
        var lvStyle = rankStyle[lv];
        if(userInfo.screenName){
            name = userInfo.screenName;
        }
        var customize = "";
        if(userInfo.customize){
            customize = `<span>${userInfo.customize}</span>`;
        }
        $.ajax({
            type : "post",
            data:{
                "token":userInfo.token
            },
            url :  API.getUserData(),
            dataType: 'json',
            success : function(result) {
                if(result.code==1){
                    var userData = result.data;
                    var userhtml =`
                          <div class="joe_dropdown" trigger="click"> 
                            <div class="joe_dropdown__link"> 
                             <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> 
                              <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> 
                              <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"></path> 
                             </svg> 
                             <span>${name}</span> 
                            </div> 
                            <nav class="joe_dropdown__menu" style="top: 45px;"> 
                             <a rel="noopener noreferrer nofollow" target="_blank" href="/ruleuser">会员中心</a> 
                             <a href="javascript:;" onclick="UserQuit()" >退出登录</a> 
                            </nav> 
                           </div> 
                    `;
                    $(".joe_header__below-sign").html(userhtml);
                    
                    var userinfohtml = `
                           <li> <a class="link panel" href="#" rel="nofollow" > <span>${name}</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> 
                             <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> 
                             <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"></path> 
                            </svg> </a> 
                           <ul class="slides panel-body"> 
                            <li> <a class="link" rel="noopener noreferrer nofollow" target="_blank" href="/ruleuser" >会员中心</a> </li> 
                            <li> <a class="link" rel="noopener noreferrer nofollow" href="javascript:;" onclick="UserQuit()" >退出登录</a> </li> 
                           </ul> </li>
                    `;
                    $("#login-wap").html(userinfohtml);
                    
                    
                    var commentHtml = `
                        <div class="list"> 
                            <input type="text" value="${name}" autocomplete="off" name="author" maxlength="16" placeholder="请输入昵称..."  disabled="disabled"/> 
                           </div> 
                           <div class="list"> 
                            <input type="text" value="${userInfo.mail}" autocomplete="off" name="mail" placeholder="请输入邮箱..."  disabled="disabled"/> 
                           </div> 
                           <div class="list"> 
                            <input type="text" value="${userInfo.url}" autocomplete="off" name="url" placeholder="请输入网址（非必填）..."  disabled="disabled"/> 
                        </div> 
                    `;
                    $("#joe_comment__respond-form .head").html(commentHtml);
                    $('.joe_dropdown').each(function (index, item) {
                        const menu = $(this).find('.joe_dropdown__menu');
                        const trigger = $(item).attr('trigger') || 'click';
                        const placement = $(item).attr('placement') || $(this).height() || 0;
                        menu.css('top', placement);
                        if (trigger === 'hover') {
                            $(this).hover(
                                () => $(this).addClass('active'),
                                () => $(this).removeClass('active')
                            );
                        } else {
                            //$("body").on('click',this,function(e){
                            $(this).on('click', function (e) {
                                $(this).toggleClass('active');
                                $(document).one('click', () => $(this).removeClass('active'));
                                e.stopPropagation();
                            });
                            menu.on('click', e => e.stopPropagation());
                        }
                    });
                }
            },
            error : function(e){
                
            }
        });
        
        
    }else{
        var userhtml =`
            <div class="item"> 
            <a href="javascript:;" rel="noopener noreferrer nofollow" onclick="UserLogin()">登录</a> | 
            <a href="javascript:;" rel="noopener noreferrer nofollow" onclick="UserRegister()" >注册</a> 
           </div> 
        `;
        $(".joe_header__below-sign").html(userhtml);
        
        var userinfohtml = `
              <li> <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> 
                  <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> 
                  <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"></path> 
                 </svg> </a> 
                <ul class="slides panel-body"> 
                 <li> <a class="link" href="javascript:;" rel="noopener noreferrer nofollow" onclick="UserLogin()">登录</a><a class="link" href="javascript:;" rel="noopener noreferrer nofollow" onclick="UserRegister()" >注册</a> </li> 
                </ul> </li> 
        `;
        $("#login-wap").html(userinfohtml);
        
        var commentHtml = `
             <div class="list"> 
                <input type="text" value="" autocomplete="off" name="author" maxlength="16" placeholder="请输入昵称..." /> 
               </div> 
               <div class="list"> 
                <input type="text" value="" autocomplete="off" name="mail" placeholder="请输入邮箱..." /> 
               </div> 
               <div class="list"> 
                <input type="text" value="" autocomplete="off" name="url" placeholder="请输入网址（非必填）..." /> 
               </div> 
        `;
        $("#joe_comment__respond-form .head").html(commentHtml);
    }
}

替换 themes/Joe/public 下 comment.php 文件

下载：comment.zip

替换 usr/themes/Joe/assets/js 下的joe.global.js文件

下载：joe.global.zip

可能应该大概就是这样了....我不太确定...备份一下再测试哈家人们！！！！！

本文来源于星泽V社，未经允许禁止转载，原文链接:https://cloud.tencent.com/developer/article/2003651

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

网站