一、序言
在创作过程中会有一些零碎的灵感或是感想,这些内容大都是不至于用一篇文章的大小来记录的。这时候我们往往需要一个类似于“动态”的页面,发布一些带有时间轴等基本情况的内容。
并且近期又考虑到有关“时效性”的问题,很多内容记录后随着时间的发展会有各种变化,所以我想再给文章添加上一个“过时提醒”用来提醒读者与自己注意内容发布的时效性。
于是创建一个“动态页面”和“过时提醒”的想法在我脑中浮现。
在思考过后,“动态页面”我想到最简单的方法是引用评论框体系,将整个动态页面当作一个私有的评论区,优化一些代码便可以实现。
而“过时提醒”则可以通过检测文章的发布时间和编辑时间调用 Bootstrap
警示框来创建。
让我们开始吧。
二、动态页面
(一)创建两个文件
首先,我们需要创建两个文件,分别命名为 page-says.php
与 says.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">×</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">×</a>