typecho多用户会员中心功能实现,附项目源码

[复制链接]
查看86 | 回复6 | 2020-9-24 23:08:43 | 显示全部楼层 |阅读模式
封面图片
网站模板 :
建站教程 :
其他建站教程
资源价格 :
纯免费
建站程序 :
网站源码 :
博客主题 :
typecho
  老早就想过这个问题,毕竟我的博客还是需要点儿会员投稿的,如果用typecho默认的后台界面,总感觉不怎么正式。一开始想到的是调用官方的文章添加接口,折腾了半天发现很复杂,然后又开始折腾后台的界面,但是如果要完美实现效果,修改typecho的内核文件不可避免,这样肯定是不行的,typecho毕竟还是要更新才行,琢磨了很久终于找到了灵感。
  要实现typecho会员中心,既然不能修改内核,不修改功能文件,那我直接通过js操控dom层添加删除代码来实现控制总行吧,于是这篇教程就诞生了。
  过程记录(只讲思路):
  1.首先,要改的只有一个文件,那就是admin/header.php,我需要在它的头部添加js和css的引用,这样就会全局生效。
  1. <?php if($user->group != "administrator"): ?>
  2.   <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
  3.   <link rel="stylesheet" href="<?php $options->siteUrl(); ?>/user/user.css?v=1.0">
  4.   <script>
  5.   var UserLink="<?php $options->adminUrl('profile.php'); ?>";
  6.   var UserPic="<?php echo Typecho_Common::gravatarUrl($user->mail, 100, 'X', 'mm', $request->isSecure()); ?>";
  7.   var SiteLink="<?php $options->siteUrl(); ?>";
  8.   var UserName="<?php $user->screenName(); ?>";
  9.   var UserGroup="<?php $user->group(); ?>";
  10.   var SiteName="<?php $options->title(); ?>";
  11.   </script>
  12.   <script src="<?php $options->siteUrl(); ?>/user/user.js?v=1.0"></script>
  13.   <?php if($menu->title == "网站概要"): ?>
  14.   <style>
  15.   .typecho-page-main div:nth-child(4){display:none;}
  16.   </style>
  17.   <?php endif; ?>
  18.   <?php endif; ?>
复制代码

  大概的含义是,对用户组进行判断,如果不是管理员则显示引用的外部代码,在此基础上判断是否为首页界面,想办法去掉typecho官方的更新公告,另外再设置常用字段,方便js进行判断。
  2.在根目录创建member.php,加入以下代码。
  1. <!DOCTYPE HTML>
  2.   <html class="no-js">
  3.   <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="renderer" content="webkit">
  8.   <meta name="viewport" content="width=device-width, initial-scale=1">
  9.   <title>会员中心</title>
  10.   <style>
  11.   *{margin:0;
  12.   padding:0;}
  13.   html,body{
  14.   height:100%;
  15.   width:100%;
  16.   }
  17.   </style>
  18.   </head>
  19.   <body>
  20.   <iframe id="contentPage" src="admin" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" frameborder="0"></iframe>
  21.   </body>
  22.   </html>
复制代码

  通过iframe 嵌套的方式,让用户访问member.php等同于访问后台,因为有了之前的判断,非管理员用户呈现的都是自己定义的样式。本来我是准备参考QQ爹博客实现前台登录功能,但是typecho方法里面的退出登录后跳转地址根本控制不了,所以干脆用嵌套来的实在。
  3.通过js修改判断登录的用户并且修改typecho的导航区域,我没有使用jquery而是原生js,然后通过css对js新增加的区块进行样式定义,同时还修改了登录注册界面的样式,于是就有了以下的效果。
  基本实现了我想要的功能,想要看实际效果的可以访问这个地址:点击进入
  因为所有的功能都是几个小时做出来的,都很简陋,代码也不复杂,如果有能力修改的可以自己美化以下,如果不会修改的可以将建议提交给我,我有时间会直接改好。
  项目下载地址:
  此处内容需要评论回复后方可阅读。
  更新记录:
  1. 2019/04/10:对后台风格提供了支持,进入测试阶段
  2.   2019/03/11:新增了对QQ邮箱的识别并生成QQ头像,在会员中心全局调用
  3.   2019/03/09:修复了提示框被遮挡和错位的问题,美化了登录页面,新定义了网站logo
  4.   2019/03/06:原始版本
  5.   
复制代码

  【规则之树版权所有,转载注明来源】

来源:规则之树
www.ziun.cn 最新,最快,免费素材资源,建站教程分享平台!
莫名的离别 | 2020-9-24 23:09:23 | 显示全部楼层
支持!!!
回复

使用道具 举报

来自地狱 | 2020-9-24 23:10:01 | 显示全部楼层
牛逼!!
回复

使用道具 举报

霍彬妍 | 2020-9-24 23:10:37 | 显示全部楼层
可能,遇到对的你,就想把压抑在心底话语,全部诉说;可能,遇到对的你,希望你来安抚我的心,那会舒心;可能,遇到对的你,我想把我心底话对你说,让你懂我……一切的一切,是因为遇见你。
回复

使用道具 举报

我余水多 | 2020-9-24 23:09:23 | 显示全部楼层
太棒了!!
回复

使用道具 举报

沧州比基尼小子 | 2020-9-24 23:09:59 | 显示全部楼层
夜深时,灯下静听心语,梦中一晌贪欢,依然明亮的眸子,映着那份淡然的静谧,聆一首云水,赋半生禅心,轻轻与自己私语,学会独自与心相守那份世间的美丽。
回复

使用道具 举报

魔彡有情愫 | 2020-9-24 23:10:37 | 显示全部楼层
你在侠骨柔情的江湖里等候回归,我在醉问长天的遐思里向往。
回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【云下小屋,免费分享,我们是认真的!】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则