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

老早就想过这个问题,毕竟我的博客还是需要点儿会员投稿的,如果用typecho默认的后台界面,总感觉不怎么正式。一开始想到的是调用官方的文章添加接口,折腾了半天发现很复杂,然后又开始折腾后台的界面,但是如果要完美实现效果,修改typecho的内核文件不可避免,这样肯定是不行的,typecho毕竟还是要更新才行,琢磨了很久终于找到了灵感。
要实现typecho会员中心,既然不能修改内核,不修改功能文件,那我直接通过js操控dom层添加删除代码来实现控制总行吧,于是这篇教程就诞生了。

过程记录(只讲思路):
1.首先,要改的只有一个文件,那就是admin/header.php,我需要在它的头部添加js和css的引用,这样就会全局生效。

<?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.0">
<script>
var UserLink="<?php $options->adminUrl('profile.php'); ?>";
var UserPic="<?php echo Typecho_Common::gravatarUrl($user->mail, 100, 'X', 'mm', $request->isSecure()); ?>";
var SiteLink="<?php $options->siteUrl(); ?>";
var UserName="<?php $user->screenName(); ?>";
var UserGroup="<?php $user->group(); ?>";
var SiteName="<?php $options->title(); ?>";
</script>
<script src="<?php $options->siteUrl(); ?>/user/user.js?v=1.0"></script>
<?php if($menu->title == "网站概要"): ?>
<style>
.typecho-page-main div:nth-child(4){display:none;}
</style>
<?php endif; ?>
<?php endif; ?>

大概的含义是,对用户组进行判断,如果不是管理员则显示引用的外部代码,在此基础上判断是否为首页界面,想办法去掉typecho官方的更新公告,另外再设置常用字段,方便js进行判断。
2.在根目录创建member.php,加入以下代码。

<!DOCTYPE HTML>
<html class="no-js">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="renderer" content="webkit">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>会员中心 - 规则之树</title>
          <style>
          *{margin:0;
            padding:0;}
          html,body{
              height:100%;
            width:100%;
          }
        </style>
    </head>
    <body>
          <iframe id="contentPage" src="admin" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" frameborder="0"></iframe>
    </body>
</html>

通过iframe 嵌套的方式,让用户访问member.php等同于访问后台,因为有了之前的判断,非管理员用户呈现的都是自己定义的样式。本来我是准备参考QQ爹博客实现前台登录功能,但是typecho方法里面的退出登录后跳转地址根本控制不了,所以干脆用嵌套来的实在。

3.通过js修改判断登录的用户并且修改typecho的导航区域,我没有使用jquery而是原生js,然后通过css对js新增加的区块进行样式定义,同时还修改了登录注册界面的样式,于是就有了以下的效果。
1.jpg
2.jpg
3.jpg
基本实现了我想要的功能,想要看实际效果的可以访问这个地址:点击进入
因为所有的功能都是几个小时做出来的,都很简陋,代码也不复杂,如果有能力修改的可以自己美化以下,如果不会修改的可以将建议提交给我,我有时间会直接改好。

项目下载地址:

此处内容需要评论回复后方可阅读o(╯□╰)o

更新记录:

2019/04/10:对后台风格提供了支持,进入测试阶段
2019/03/11:新增了对QQ邮箱的识别并生成QQ头像,在会员中心全局调用
2019/03/09:修复了提示框被遮挡和错位的问题,美化了登录页面,新定义了网站logo
2019/03/06:原始版本

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

发表评论
加载中...
    1. 命悬十秒   2019-07-16 14:50

      试试效果

    2. 66666888   2019-07-14 19:13

      666

    3. 时光   2019-07-05 15:27

      看着不错的东西.厉害..

    4. 911   2019-07-01 22:28

      正好也在找呢,想学习学习。

    5. zyswht   2019-06-28 21:22

      这个真心不错来看看

    6. myxxw   2019-06-13 15:15

      看一下啦,大佬威武~

      查看对话
        1. 不暇   2019-06-14 11:19

          看的人多,用的人少 icon_idea.gif

    7. iyuan   2019-06-04 17:06

      看一下啦,大佬威武~

    8. 666   2019-05-29 09:37

      围观大佬

    9. 南蜇   2019-05-22 17:31

      留言支持一下

    10. Macye   2019-05-21 09:19

      感谢博主

    11. mocurio   2019-05-16 11:50

      哇塞,好强啊,试用了一下感觉很好。有个小建议就是用户中心“最近发布的文章”和“最近得到的回复”显示的是全站的,用户中心应该加一层过滤只显示属于用户自己的文章和回复。

      查看对话
        1. 不暇   2019-05-16 11:59

          我没有修改typecho任何原本的功能,所以导致了你说的问题,这个我会研究下的

          查看对话
            1. mocurio   2019-05-18 11:54

              嗯,我的想法只有改 Typecho 源码 icon_idea.gif 坐等大佬开发!

    12. 安笙   2019-05-05 19:30

      试试 icon_mrgreen.gif

    13. 小白   2019-05-04 17:35

      学习一下

    14. ERHECY1   2019-04-28 00:19

      厉害了有提交入口了!

    15. ahh   2019-04-26 15:51

      666666

    16. 清歌   2019-04-22 20:22

      贼需要这个

    17. 更好   2019-04-20 16:51

      我只能说漂亮,惊艳,牛b icon_arrow.gif

    18. 喵帕斯   2019-04-18 23:50

      膜拜大佬!!!

      查看对话
    19. q   2019-04-15 16:27

      这个不错,可否做插件的方案?

      查看对话
        1. 不暇   2019-04-15 20:07

          这个仍然相当于前端的代码,做插件有点小题大做了

    20. 相信   2019-04-15 13:08

      看看

    21. 小草   2019-04-12 15:43

      实施按!!!

    22. 1314   2019-04-09 12:23

      的说法是否对

    23. 丁町轩   2019-04-01 00:29

      学习了

    24. 君怡   2019-03-20 11:23

      自己在是你明

    25. Roogle   2019-03-17 20:53

      这个功能不错

    26. jvoni   2019-03-17 12:51

      膜拜大佬

    27. 航旗   2019-03-16 20:26

      不错,马上安装

    28. Mr.ChengPing   2019-03-14 10:47

      膜拜大佬,标记一下,晚点来操作这个!

      查看对话
        1. 不暇   2019-03-14 11:05

          有问题可以继续来这里反馈。

    29. 小闪'Blog   2019-03-12 00:08

      这个厉害了..感谢大佬分享!

      查看对话
        1. 不暇   2019-03-12 00:27

          投机取巧而已,找最简单的办法

    30. yamadie   2019-03-10 12:09

      学习了

    31. 寻梦xunm   2019-03-09 17:10

      本片文章转载了 icon_mrgreen.gif ,如果有作者不允许的话联系我删除即可。

      查看对话
    32. 路上看见我说   2019-03-09 10:51

      看起来不错啊

    33. 沙与沫   2019-03-06 18:29

      看着挺不错的 icon_smile.gif

      查看对话
        1. 不暇   2019-03-06 18:48

          因为代码不多,可能有些不够漂亮,有建议可以提出来

相关文章