RuleUser通过API的方式完全接管typecho的用户系统,让Typecho网站拥有一个独立会员中心的同时,还可以将前台用户的操作全部API化。
具体演示请查看 Typecho独立用户中心上线-星泽V社
RuleUser安装及介绍请查看 Typecho独立会员中心,前后端分离,充值付费功能集成,APP扫码登录
本文讲解会员系统接管typecho的教程(不接管也没事,看自己心情就好),这里我只写我网站Joe主题的修改,仅供参考,其他主题去看看不暇的教程 会员系统接管教程 。
方案有两种,第一种是php实现,第二种是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
文件
可能应该大概就是这样了....我不太确定...备份一下再测试哈家人们!!!!!
本文来源于星泽V社,未经允许禁止转载,原文链接:https://cloud.tencent.com/developer/article/2003651