创新实训(八)博客总览页面与详细博客页面

博客页面

本网站实现了博客的功能,用户可以发布自己的博客,查看其他用户已公开的博客并发表评论等,下面来介绍以下博客总览页面和博客展示页面的实现。

博客总览

image
blogs.php文件用于生成一个博客总览页面,展示了所有非隐藏博客的标题、发表者和发表日期,并提供了一些额外的功能按钮和表格样式。。

  1. 导入和函数声明:

    • 使用 requirePHPLib('form'); 导入所需的 PHP 库文件,假设这里是导入表单相关的功能。
    • 声明了 echoBlogCell($blog) 函数,用于输出每个博客条目的表格行。
    <?php
    requirePHPLib('form');
    
    function echoBlogCell($blog) {
        echo '<tr>';
        echo '<td>' . getBlogLink($blog['id']) . '</td>';
        echo '<td>' . getUserLink($blog['poster']) . '</td>';
        echo '<td>' . $blog['post_time'] . '</td>';
        echo '</tr>';
    }
    
  2. 定义表格表头:

    • 使用 heredoc 语法定义表格的表头行 ($header),设置标题、发表者和发表日期的列。
    $header = <<<EOD
    <tr>
        <th width="60%">标题</th>
        <th width="20%">发表者</th>
        <th width="20%">发表日期</th>
    </tr>
    EOD;
    
  3. 配置数组:

    • 定义了一个空的配置数组 $config,用于传递给 echoLongTable 函数作为可选参数。
    • 在这里预留了设置表格类的选项,使用了两个类名 'table''table-hover'
    $config = array();
    $config['table_classes'] = array('table', 'table-hover');
    
  4. 页面标题和权限检查:

    • 调用 echoUOJPageHeader(UOJLocale::get('blogs')) 输出页面标题为 'blogs',使用了 UOJLocale::get 来获取本地化的标题字符串。
    • 如果用户已验证登录 (Auth::check() 为真),则显示两个按钮,允许用户访问其博客首页和写新博客页面。
    <?php echoUOJPageHeader(UOJLocale::get('blogs')) ?>
    
    <?php if (Auth::check()): ?>
    <div class="float-right">
        <div class="btn-group">
            <a href="<?= HTML::blog_url(Auth::id(), '/') ?>" class="btn btn-secondary btn-sm">我的博客首页</a>
            <a href="<?= HTML::blog_url(Auth::id(), '/post/new/write')?>" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-edit"></span> 写新博客</a>
        </div>
    </div>
    <?php endif ?>
    
  5. 显示博客总览:

    • 使用 echoLongTable 函数生成和显示博客总览的表格。
    • 指定了需要显示的列 (array('id', 'poster', 'title', 'post_time', 'zan')),从 blogs 表中选择数据。
    • 使用条件 'is_hidden = 0' 过滤掉隐藏的博客条目。
    • 按照 post_time 降序排序博客条目。
    • 传递了前面定义的 $header 表头行模板和 echoBlogCell 函数来输出每行的内容。
    • 通过 $config 数组传递了表格的类名设置。
    <?php echoLongTable(array('id', 'poster', 'title', 'post_time', 'zan'), 'blogs', 'is_hidden = 0', 'order by post_time desc', $header, 'echoBlogCell', $config); ?>
    
  6. 显示页面页脚:

    • 调用 echoUOJPageFooter() 输出页面页脚,完成页面的结尾。
    <?php echoUOJPageFooter() ?>
    

博客展示页面

博客展示页面可能会在多个页面中复用,所以设计成了一个可复用的组件模块,实现在blog-preview.php文件中
image
这段代码用于显示博客的详细内容,包括标题、发布时间、作者、内容、标签、操作按钮等。

  1. 预览模式处理:

    • 如果 $is_preview 为真,则检查博客内容中是否包含 <!-- readmore -->,如果有,则截取该标记之前的内容作为预览内容,并添加一个阅读更多的链接。
    • 否则,直接使用完整的博客内容。
    <?php
    if ($is_preview) {
        $readmore_pos = strpos($blog['content'], '<!-- readmore -->');
        if ($readmore_pos !== false) {
            $content = substr($blog['content'], 0, $readmore_pos) . '<p><a href="' . HTML::blog_url(UOJContext::userid(), '/post/'.$blog['id']) . '">阅读更多……</a></p>';
        } else {
            $content = $blog['content'];
        }
    } else {
        $content = $blog['content'];
    }
    ?>
    
  2. 额外文本:

    • 如果博客被标记为隐藏 ($blog['is_hidden'] 为真),则在标题前添加一个标记,显示 [已隐藏],并使用 text-muted 类来标识文本为灰色。
    <?php
    $extra_text = $blog['is_hidden'] ? '<span class="text-muted">[已隐藏]</span> ' : '';
    ?>
    
  3. 博客类型:

    • 根据 $blog['type'] 的值来确定博客的类型是 'B' 还是 'slide',并存储在 $blog_type 变量中。
    <?php
    $blog_type = $blog['type'] == 'B' ? 'post' : 'slide';
    ?>
    
  4. 博客详情显示:

    • 显示博客的标题,标题包含了额外文本(如果有),并且链接到博客的详细页面。
    • 显示博客的发布时间和作者信息。
    <h2><?= $extra_text ?><a class="header-a" href="<?= HTML::blog_url(UOJContext::userid(), '/post/'.$blog['id']) ?>"><?= $blog['title'] ?></a></h2>
    <div><?= $blog['post_time'] ?> <strong>By</strong> <?= getUserLink($blog['poster']) ?></div>
    
  5. 博客内容显示:

    • 如果不是仅显示标题模式 ($show_title_only 为假),则显示博客的详细内容。
    • 根据博客类型,如果是 'post' 类型,则直接显示内容。
    • 如果是 'slide' 类型,则使用 <iframe> 元素嵌入幻灯片,并提供全屏查看按钮的链接。
    <?php if (!$show_title_only): ?>
        <div class="card mb-4">
            <div class="card-body">
                <?php if ($blog_type == 'post'): ?>
                    <article><?= $content ?></article>
                <?php elseif ($blog_type == 'slide'): ?>
                    <article>
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe class="embed-responsive-item" src="<?= HTML::blog_url(UOJContext::userid(), '/slide/'.$blog['id']) ?>"></iframe>
                        </div>
                        <div class="text-right top-buffer-sm">
                            <a class="btn btn-secondary btn-md" href="<?= HTML::blog_url(UOJContext::userid(), '/slide/'.$blog['id']) ?>"><span class="glyphicon glyphicon-fullscreen"></span> 全屏</a>
                        </div>
                    </article>
                <?php endif ?>
            </div>
            <div class="card-footer text-right">
                <ul class="list-inline bot-buffer-no">
                    <li class="list-inline-item">
                        <?php foreach (queryBlogTags($blog['id']) as $tag): ?>
                            <?php echoBlogTag($tag) ?>
                        <?php endforeach ?>
                    </li>
                    <?php if ($is_preview): ?>
                        <li class="list-inline-item"><a href="<?= HTML::blog_url(UOJContext::userid(), '/post/'.$blog['id']) ?>">阅读全文</a></li>
                    <?php endif ?>
                    <?php if (Auth::check() && (isSuperUser(Auth::user()) || Auth::id() == $blog['poster'])): ?>
                        <li class="list-inline-item"><a href="<?=HTML::blog_url(UOJContext::userid(), '/'.$blog_type.'/'.$blog['id'].'/write')?>">修改</a></li>
                        <li class="list-inline-item"><a href="<?=HTML::blog_url(UOJContext::userid(), '/post/'.$blog['id'].'/delete')?>">删除</a></li>
                    <?php endif ?>
                    <li class="list-inline-item"><?= getClickZanBlock('B', $blog['id'], $blog['zan']) ?></li>
                </ul>
            </div>
        </div>
    <?php endif ?>
    
  6. 页脚:

    • 最后输出页面的页脚部分。
    <?php endif ?>
    
posted @   贺丁  阅读(6)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
点击右上角即可分享
微信分享提示