typecho多用户会员中心实现,新增后台界面风格支持

模板开发以及发布测试

版主: seita

头像
buxia97
帖子: 25
注册时间: 2018年 12月 14日 16:48
联系:

typecho多用户会员中心实现,新增后台界面风格支持

帖子 buxia97 »

注意:

此模板未引入任何外部框架,完全html配合css实现全手写
此模板主体js的库利用typecho自带,不会发生任何形式的js冲突
此模板代码非常精简,力求用最简单有效的方式,而且不会影响typecho的更新升级


经过一段时间的考虑,我为我的博客增加了这个功能,用一种投机取巧的方式实现了typecho的多用户会员中心,目前已经支持后台界面风格,下一步将进行多样式切换功能的实现。
具体的效果地址:https://www.ruletree.club/member.php
实现过程,原理及演示图片:https://www.ruletree.club/archives/1066/

Typecho会员中心
typecho开源博客程序,实现多用户会员中心。 不修改任何typecho重要文件,1.0+版本都可以使用,全响应式界面,原生js支持,代码仅仅十多KB,可以帮助博客网站快速的实现会员中心界面。目前已经添加了对后台界面的支持,只需要简单的修改页面判断即可。

功能介绍
对于非管理员用户呈现会员中心界面,同时根据用户组判断显示的导航栏,对达到贡献者用户组级别以上的用户显示文章和评论的相关功能,对QQ邮箱进行验证,获取QQ头像,这一切都是通过js进行控制。本项目算不上模板和插件,相当于一个对于typecho后台的调整,通过js对dom层的操作改变后台界面,但是不对typecho原本的功能样式进行修改,所以使用者可以随意的还原文件或者重新添加代码,这不会影响程序的使用。 网站全局开启QQ头像调用,可以参考:https://www.ruletree.club/archives/1087/

安装教程
1.备份原有的admin/header.php,将文件覆盖到根目录。
2.访问域名/member.php进入会员中心入口。
更新日志
2019/04/10:对后台风格提供了支持,进入测试阶段
2019/03/11:新增了对QQ邮箱的识别并生成QQ头像,在会员中心全局调用
2019/03/09:修复了提示框被遮挡和错位的问题,美化了登录页面,新定义了网站logo
2019/03/06:原始版本

主要实现代码
下列代码主要在admin/header.php的head标签对中,如果因为typecho更新导致该文件有很大变化,或者发现上传覆盖后出现报错,可以手动复制下发代码添加。

代码: 全选

<?php if($user->group != "administrator"): ?>
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="<?php $options->siteUrl(); ?>/user/user.css?v=1.10">
<script>
var UserLink="<?php $options->adminUrl('profile.php'); ?>";
var UserPic="<?php $email =$user->mail; if($email){if(strpos($email,'@qq.com') !==false){$email=str_replace('@qq.com','',$email);echo '//q1.qlogo.cn/g?b=qq&nk='.$email.'&';}else{$email= md5($email);echo '//cdn.v2ex.com/gravatar/'.$email.'?';}}else{echo '//cdn.v2ex.com/gravatar/null?';} ?>";
var SiteLink="<?php $options->siteUrl(); ?>";
var UserName="<?php $user->screenName(); ?>";
var UserGroup="<?php $user->group(); ?>";
var SiteName="<?php $options->title(); ?>";
var MenuTitle="<?php $menu->title(); ?>";
</script>
<style>
<?php if($menu->title == "网站概要"): ?>
.typecho-page-main div:nth-child(4){display:none;}
<?php endif; ?>
<?php if($menu->title == "登录到".$options->title): ?>
.popup{width:100% !important;
left:0px !important;
top:0px !important;}
<?php endif; ?>
</style>
<?php endif; ?>

另一部分在admin/fonter.php中,因为typecho自带了jquery,所以需要让它生效来节约代码。

代码: 全选

<?php if($user->group != "administrator"): ?>
<script src="<?php $options->siteUrl(); ?>/user/user.js?v=1.02"></script>
<?php endif; ?>

下方的判断相当于是否开启后台模板,如果去掉如下代码,将会让界面风格在后台生效(目前还处于测试界面,需要更多反馈意见)

代码: 全选

<?php if($user->group != "administrator"): ?>
<?php endif; ?>

相关截图
1.通用登录界面 登录界面
图片
2.贡献者权限发布文章界面 贡献者权限发布文章
图片
3.管理员权限发布文章界面 管理员权限发布文章
图片

项目地址:https://github.com/buxia97/Typecho-user
可以随意下载,自行二次开发,也可以向我提出意见和建议,欢迎Star
上次由 buxia97 在 2019年 4月 10日 14:24,总共编辑 4 次。
weich
帖子: 174
注册时间: 2018年 4月 6日 07:48
联系:

Re: typecho会员中心界面实现,不修改内核代码

帖子 weich »

可以发布文章?
buxia
帖子: 3
注册时间: 2018年 2月 19日 18:55

Re: typecho会员中心界面实现,不修改内核代码

帖子 buxia »

weich 写了:可以发布文章?

当然可以,调用的仍然是后台的功能,用户权限大于等于贡献者就会显示文章和评论的链接了
AdolpheAstro
帖子: 8
注册时间: 2019年 2月 16日 09:36

Re: typecho会员中心界面实现,不修改内核代码

帖子 AdolpheAstro »

不错哦,可以加我一起讨论1305767797
头像
buxia97
帖子: 25
注册时间: 2018年 12月 14日 16:48
联系:

Re: typecho会员中心界面实现,不修改内核代码

帖子 buxia97 »

AdolpheAstro 写了:不错哦,可以加我一起讨论1305767797

我都在你群里了,大佬
头像
buxia97
帖子: 25
注册时间: 2018年 12月 14日 16:48
联系:

Re: typecho多用户会员中心实现,新增后台界面风格支持

帖子 buxia97 »

项目大更新了哦,欢迎star,以及提出各种意见
头像
远.山
帖子: 66
注册时间: 2017年 2月 2日 19:48
来自: https://moefo.cn

Re: typecho多用户会员中心实现,新增后台界面风格支持

帖子 远.山 »

很有用,关注了
头像
ClayMore
帖子: 2481
注册时间: 2007年 11月 29日 02:55
来自: Sleeping Forest
联系:

Re: typecho多用户会员中心实现,新增后台界面风格支持

帖子 ClayMore »

已star
头像
buxia97
帖子: 25
注册时间: 2018年 12月 14日 16:48
联系:

Re: typecho多用户会员中心实现,新增后台界面风格支持

帖子 buxia97 »

远.山 写了:很有用,关注了

谢谢,有建议可以提出来哦!
头像
buxia97
帖子: 25
注册时间: 2018年 12月 14日 16:48
联系:

Re: typecho多用户会员中心实现,新增后台界面风格支持

帖子 buxia97 »

ClayMore 写了:已star

感谢!
回复