lzy20021010

Typecho“时光机”页面实现
明天下午就要踏入高中校门了,今天发布暑假最后一篇文章。Typecho“时光机”页面实现在一些博客,大家可能会看到这...
扫描右侧二维码阅读全文
31
2018/08

Typecho“时光机”页面实现

明天下午就要踏入高中校门了,今天发布暑假最后一篇文章。

封面

Typecho“时光机”页面实现

在一些博客,大家可能会看到这种类似微博的页面:

handsome时光机页面(XSY&Free sky截图)

那么怎么实现这种功能呢?实现思路是在一个独立页面模板中调用评论区。
1.创建一个独立页面模板"cross.php"。
2.创建一个新的评论区模板"comments2.php"(先完全复制comments.php中的代码,然后删掉评论者昵称、评论者邮箱、评论者网址这三个输入框)。
3.在独立页面模板中调用新的评论区模板"comments2.php"。
4.在Typecho创建独立页面(模板选择刚刚所创建的独立页面模板)
下面引用了梁兴健博客的代码,使用了AmazeUI 前端框架,各位可以按自己的需求自行修改样式。
独立页面模板cross.php:

<?php
/**
* 闲言碎语
*
* @package custom
*/
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
$this->need('header.php');
?>

<div class="main">
  <div class="am-g">
    <div class="am-u-lg-12">
      <div class="post">
        <div class="post-top bg-white">
          <h1 class="post-title-x" itemprop="name headline"><?php $this->title() ?></h1>
        </div>
        <div class="post-content bg-white">
              <?php $this->need('comments2.php'); ?>
        </div>
      </div>
    </div>
  </div>
</div>
<?php $this->need('footer.php'); ?>

新评论区模板:

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<div id="comments">
    <?php $this->comments()->to($comments); ?>
    <?php if ($comments->have()): ?>
    
    <?php endif; ?>

    <?php if($this->allow('comment')): ?>
    <div id="<?php $this->respondId(); ?>" class="respond">
        <div class="cancel-comment-reply">
        <?php $comments->cancelReply(); ?>
        </div>
        <form method="post" action="<?php $this->commentUrl() ?>" id="comment-form" role="form">
            <?php if($this->user->hasLogin()): ?>
            <p><?php _e('登录身份: '); ?><a href="<?php $this->options->profileUrl(); ?>"><?php $this->user->screenName(); ?></a>. <a href="<?php $this->options->logoutUrl(); ?>" title="Logout"><?php _e('退出'); ?> &raquo;</a></p>
          <div class="am-form-group">
            <textarea class="am-form-field" placeholder="文明灌水~" rows="5" name="text" id="textarea" required><?php $this->remember('text'); ?></textarea>
          </div>
          <button type="submit" class="am-btn am-btn-primary"><?php _e('提交评论'); ?></button>
            <?php else: ?>
          <?php endif; ?>
        </form>
    </div>
    <?php $comments->listComments(); ?>
    <?php $comments->pageNav('«', '»', 1, '...', array('wrapTag' => 'ul', 'wrapClass' => 'am-pagination am-pagination-centered', 'itemTag' => 'li', 'textTag' => 'span', 'currentClass' => 'am-active', 'prevClass' => 'prev', 'nextClass' => 'next',)); ?>
    <?php else: ?>
    <h3><?php _e('评论已关闭'); ?></h3>
    <?php endif; ?>
</div>

本站实现的效果是这个样子的:

时光机页面

将“时光机”页面的内容输出到首页

如果要把“时光机”页面的内容显示在首页呢?其实亦不难。

在主题文件目录创建PHP文件,内容如下(参数请根据实际需要修改):

<?php
//start page comments
    $slug = "17"; //页面缩略名
    $limit = 1;  //调用数量
    $length = 40;  //截取长度
    $ispage = true;  //true 输出slug页面评论,false输出其它所有评论
    $isGuestbook = $ispage ? " = " : " <> ";
    $db = $this->db;//Typecho_Db::get();
    $options = $this->options;//Typecho_Widget::widget('Widget_Options'); 
    $page = $db->fetchRow($db->select()->from('table.contents')
        ->where('table.contents.status = ?', 'publish')
        ->where('table.contents.created < ?', $options->gmtTime)
        ->where('table.contents.slug = ?', $slug));  
    if( $page ){
        $type = $page['type'];
        $routeExists = (NULL != Typecho_Router::get($type));
        $page['pathinfo'] = $routeExists ? Typecho_Router::url($type, $page) : '#';
        $page['permalink'] = Typecho_Common::url($page['pathinfo'], $options->index);
            
        $comments = $db->fetchAll($db->select()->from('table.comments')
        ->where('table.comments.status = ?', 'approved')
        ->where('table.comments.created < ?', $options->gmtTime)
        ->where('table.comments.type = ?', 'comment')
        ->where('table.comments.cid '.$isGuestbook.' ?', $page['cid'])
        ->order('table.comments.created', Typecho_Db::SORT_DESC)
        ->limit($limit)  );
    
        foreach($comments AS $comment) {
            echo Typecho_Common::subStr(strip_tags($comment['text']), 0, $length, '...');
            echo ' <a href="'. $page['permalink']."#comment-".$comment['coid'] .'" class="btn btn-danger btn-sm" style="color:white">详情</a>';
        }    
    }else{
        echo "暂无公告";        
    }
//end page comments

然后在需要显示的地方插入:<?php include_once "xxx.php";?>(文件名请修改为实际文件名),效果如下:

将“时光机”页面的内容输出到首页

参考来源:梁兴健博客,SegmentFault

Last modification:August 31st, 2018 at 11:55 am
If you think my article is useful to you, please feel free to appreciate

8 comments

  1. 梁兴健

    时光机显示到首页是个好点子,学习了!

    1. lzy20021010
      @梁兴健

      这个功能初衷是用来显示公告的。

  2. Vultr VPS

    朋友 交换链接吗
    我站:https://www.laopan.org/ (便宜vps)

    1. lzy20021010
      @Vultr VPS

      你好,已收录到本站内页链接处,谢谢支持!

      1. 便宜vps
        @lzy20021010

        已添加贵站为首页链接,能否将我站链接也改为首页?

      2. 便宜vps
        @lzy20021010

        已添加贵站为首页链接,能否将我站链接也改为首页?

  3. 淘宝优惠券

    这个功能不错!

    1. lzy20021010

Leave a Comment