Typecho 前台登录、Gist 页面上线

目前 Gist 页面正在整修中…

上线了一个新的页面:GIST - 熊猫小A的博客,名字来自 GitHub 的 Gist 功能,主要目的是记录一些简短的代码片段,兼做说说之用。

为了使这个页面的体验更友好,有以下几个目标:

  • 便于管理,不要搞乱我的文章数据库
  • 要能够在前台发表,而不必登入后台
  • 要有分页功能(以防止我过于话痨)
  • 拒绝编辑麻烦的 HTML,直接使用 Markdown 语法
  • 代码高亮自然也要有

因此,最佳的方法是将这个页面的评论伪造成条目,只允许我自己发表,并重写一下样式。针对以上几点问题,分别记录解决方法如下。

Typecho 前台登录

其实这是个很常用的需求,比如博主回复评论什么的,每次都要去后台登录一下真的很麻烦,最好能在前台直接登录,然后跳转回当前页面。

现在我的博客已经可以点击右上角的头像在前台登陆了,方法是仿造 Typecho 登录页面,构造一个 form:

<form action="<?php $this->options->loginAction()?>" method="post" name="login" rold="form">
    <p>
        <input type="text" name="name" autocomplete="username" placeholder="请输入用户名" required/>
    </p>
    <p>
        <input type="password" name="password" autocomplete="current-password" placeholder="请输入密码" required/>
    </p>
    <button type="button">关闭</button>
    <button type="submit">登录</button>
    <input type="hidden" name="referer" value="<?php 
        if($this->is('index')) $this->options->siteUrl();
        else $this->permalink();
    ?>">
</form>

其中 referer 这个 input 就指明了登录成功后的跳转位置。本站使用的是 Bootstrap 的模态框,所以样式就不写了。

输出条目

由于这里的条目都是独立评论,不存在评论嵌套的问题,因此只需要按部就班输出就行了。

<?php $this->comments()->to($comments); ?>
<?php if($comments->have()): ?>
<div id="gist">  <!--start gists-->
    <?php while($comments->next()): ?>
    <div id="<?php $comments->theId();?>" class="gist-item">
        <div class="gist-header"><time><?php $comments->date('Y-m-d');?></time> By 熊猫小A   <a href="<?php $comments->permalink()?>"><i class="glyphicon glyphicon-link"></i></a></div>
        <div class="gist-content"><?php echo $comments->content; ?></div>
    </div>
    <?php endwhile;?>
</div> <!--end gist-->
<?php else: ?>
<h1>糟糕,这里啥也没有。</h1>
<?php endif;?>

前台发表条目

与一般的评论框没有两样,你甚至可以直接把 comments.php 放到这里来,但注意要判断一下当前用户是否已经登录,未登录不应该允许发表。由于已经登陆了,所以用户名、邮箱、网址输入框都是不必要的,只需要保留内容输入区域和提交按钮就好。

<?php if($this->user->hasLogin()): ?>
<form method="post" action="<?php $this->commentUrl() ?>" id="comment-form">
    <p>
        <textarea class="input-area" rows="5" name="text" id="textarea" placeholder="在这里输入..."><?php $this->remember('text'); ?></textarea>
    </p>
    <button id="comment-submit-button" type="submit" class="submit"><?php _e('发表'); ?></button>
</form>
<?php else:?>
<p>您需要先登录才能发表新条目。</p>
<?php endif; ?>

分页功能(加载更多)

这与我在首页实现的加载更多是一个道理。实际上是一个简化版的 PJAX:使用 JQuery 用 AJAX 请求下一页的数据,然后从中提取出目标部分,插入当前页面中,并更新下一页链接。

首先,后台评论设置要开启评论分页,然后在模板中添加分页链接:

<?php $comments->pageNav('上一页', '下一页', 0, '', 'wrapClass=hidden&prevClass=prev&nextClass=next'); ?>
<button id="load-more" onclick="loadMoreGists()">加载更多</button>

为了页面美观,使用一段 CSS 来隐藏原本的分页链接:.hidden{display:none}。点击按钮后执行的 JS 如下:

var nextUrl="";
function loadMoreGists(){
    if(nextUrl==null) return;
    var target;
    if(nextUrl=="") target=$(".next a").attr("href");
    else target=nextUrl;
    if(target!="" && $(".next a").length>0){
        $("#load-more").html("加载中");
        $.ajax({
            url:target,
            async:true,
            success:function(data){
                nextUrl=$(data).find(".next a").attr("href");
                $("#gist").append($(data).find("#gist").html());
                if(typeof(nextUrl)=="undefined"){
                    $("#load-more").html("没有了");
                    nextUrl=null;
                }else{
                    $("#load-more").html("加载更多");
                }          
            },
            error:function(){
                alert('加载失败!');
            }
        });
    }else{
        $("#load-more").html("没有了");
    }
}

Markdown 与代码高亮

在后台评论设置中启用 Markdown 即可,另外,需要设置评论中允许的标签。我的设置是:

<a href=""> <img class="" src=""> <blockquote> <pre> <code>

本站使用的是 Highlight.js 进行代码高亮,AJAX 加载后需要重载高亮:

$("pre code").each(function(a,c){hljs.highlightBlock(c)});

OK 就是这些了。具体如何使用这些代码根据模板不同有所差别,就不贴出全部代码了。

Tags:none
上一篇
打赏
下一篇

添加新评论

已有 10 条评论

 过滤沙缸 2 星期前 • |

博主我觉得还不错,加油

 熊猫小A 2 星期前 • |
@过滤沙缸

谢谢你~

 小哲 2 星期前 • |

本来是不想说话,这几天看主题一直变,而且越来越不好看了,我只能发声了,参考我的博客和素锦博客,做一个结合体,就跟完美了。

 熊猫小A 2 星期前 • |
@小哲

怕怕,我折腾主题就图个开心愉快,辣了大佬的眼睛在此说声抱歉。

 广树 2 星期前 • |

每次过来都是不一样的主题耶

 熊猫小A 2 星期前 • |
@广树

这说明你还来得不够勤哈哈

 夏和帆 3 星期前 • |

哇,你这个博客真的是三天换一下主题样式啊

 熊猫小A 3 星期前 • |
@夏和帆

因为一直没有达到想要的样子,自己也在探索。正巧最近折腾兴致比较足

 唯美图片 2 星期前 • |
@熊猫小A

看看这个怎么样?https://www.ithmz.com 可惜自己不会改~ 😭

 熊猫小A 2 星期前 • |
@唯美图片

挺好看的呀