创建“动态页面”与“过时提醒”
奈琳雪利 / 2023-04-16 / 技术
阅读量 341 / 本文字数 3245

一、序言

在创作过程中会有一些零碎的灵感或是感想,这些内容大都是不至于用一篇文章的大小来记录的。这时候我们往往需要一个类似于“动态”的页面,发布一些带有时间轴等基本情况的内容。

并且近期又考虑到有关“时效性”的问题,很多内容记录后随着时间的发展会有各种变化,所以我想再给文章添加上一个“过时提醒”用来提醒读者与自己注意内容发布的时效性。

于是创建一个“动态页面”和“过时提醒”的想法在我脑中浮现。

在思考过后,“动态页面”我想到最简单的方法是引用评论框体系,将整个动态页面当作一个私有的评论区,优化一些代码便可以实现。

而“过时提醒”则可以通过检测文章的发布时间和编辑时间调用 Bootstrap 警示框来创建。

让我们开始吧。

二、动态页面

(一)创建两个文件

首先,我们需要创建两个文件,分别命名为 page-says.phpsays.php

1.page-says.php

page-says.php 是用作 Typecho 的模板页面,也就是我们需要在文件头部写上:

<?php
/**
* 动态
* 
* @package custom
*/
?>

在这段代码后添加我们需要的主体框架后,在内容框架内加入如下代码:

<main class="main-content">
  <div class="container-sm">
    <div id="comments" class="w-100 post-comments">
      <?php if (Utils::isEnabled('enableComments', 'JConfig')): ?>
        <?php $this->need('says.php'); ?>
      <?php else: ?>
        <div id="vcomments" class="v">
        </div>
      <?php endif ?>
    </div>
  </div>
</main>

这段代码的作用便是在内容框架下引用评论框体系。
而接下来我们将新建一个评论框体系被用来引用。

2.says.php

创建完 says.php 后,将 comments.php 里的内容全部复制粘贴进来进行优化。
例如删除不必要的“游客评论”体系以及更改部分标识。

(二)运行

在后台新建一个独立页面,模板选择“动态”。

动态页面

如此一个通过引用评论框体系的动态页面便搭建完成了。

三、过时提醒

(一)修改 post.php 文件

打开 post.php ,在内容框架下 (main-content) 添加如下代码:

<?php
    $days_publish = round ((time() - $this->date->timeStamp) / 86400);
    $days_modified = round ((time() - $this->modified) / 86400);
    if($days_publish >= 30):
?>
    <div class="alert alert-warning alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>提醒:</strong>本文创作于 <?=$days_publish?> 天前,最后编辑于 <?=$days_modified?> 天前,部分内容可能不具备时效性,请您注意。
    </div>
<?php endif; ?>

其意为若文章发表日期超过 30 日,则在文章开头添加一个通过引用 Bootstrap 的警示框来告知有关内容时效性的事。
效果如题所示:
过时提醒

四、番外

有关 Bootstrap 警示框的补充内容

警告框(Alert)大多是用来向终端用户显示诸如警告或确认消息的信息,必须从下列 8 个情境类中选择一个合适的并使用。

<div class="alert alert-primary" role="alert">基本</div>
<div class="alert alert-secondary" role="alert">次要</div>
<div class="alert alert-success" role="alert">成功</div>
<div class="alert alert-info" role="alert">信息</div>
<div class="alert alert-warning" role="alert">警告</div>
<div class="alert alert-danger" role="alert">错误</div>
<div class="alert alert-light" role="alert">灰色</div>
<div class="alert alert-dark" role="alert">深色</div>

若有需要,可以为其添加关闭按钮

<a class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</a>
数字人民币赞赏
请使用数字人民币扫一扫进行赞赏
1 + 8 =
留下你的碎片吧