«

系统自带模版在 emlog pro 1.8.0 底部信息错位问题暂时的解决方案

时间:2022-11-3     作者:独元殇     分类: emlog 文档


问题描述

作为一名 emlog 爱好者,笔者闲暇时间经常为 emlog 系统的 Github 仓库里( https://github.com/emlog/emlog )提 pr 和修修补补,就像其他知名的开源软件有源源不断的世界各地的技术人员为它们助力成长。

(pr 的意思大概就是,提交代码给仓库)

在前两天课余时间,为 1.8.0 版本进行维护开发时,一个疏忽,在一个 pr 中忘记将 default 模版底部的 <p> 标签转为 <div>,因此造成了一个很可笑的 bug,即如果后台设置了 ICP 备案,那么底部信息会恐怖的变成下图那样(底部内容向左对齐了,原先的是居中)。

这是因为,在修复群成员提出的一个反馈优化意见时,忽略了显示底部自定义内容的部分这里是 <p> 标签。下面的代码是 1.8.0 版本中的代码内容,可见到 < p > 中嵌套了 < div >。

位置 /opt/homebrew/var/www/my/0325/content/templates/default/footer.php

<div class="container">
    <p class="text-center">
        <?php
            if(!empty($icp)){
                echo '<div><a href="https://beian.miit.gov.cn/" target="_blank">'.$icp.'</a></div>';
            }
        ?>
        <?= $footer_info ?>
        <?php doAction('index_footer') ?>
    </p>
</div>

前端界中众所周知,<p> 里面是不能插入块级元素的,比如 <div>、<p>、<pre> 等,所以这里的代码中 出现了 echo '<div><... 这种内容实在是荒谬。

当时没有看太多,也没进行测试,想当然的在 Github 的修改代码界面输入了 <div> ... 本以为就一个 HTML 而已,能出什么 bug,但没想到一个 1.8.0 一个大的版本号,出现这样可笑的 bug。

所以吸取教训!!!以后一定要在进行测试后再提交代码。幸好是前端,如果是后端的话,出现这样级别的 BUG 代码将会恐怖至极。

解决方案

当然,目前是有解决方案的。html 的 bug ,40% 可以用新增加的 CSS 解决, 60% 可以用新增加的 JavaScript 解决。

本 bug 在用户端的的解决即,在【系统后台】----【系统】----【设置】----【首页底部信息】添加如下代码。

<style>
 footer .container {
    text-align: center;
}
</style>

然后就行了,显示效果神奇般的就恢复正常了。



当然在未来的 1.8.1 中也有它的优化解决方案,就是把 < p > 改成 < div >。

其实在本地我原先的修改中,是已经更改成 < div > 的,并且还在 CSS 中进行了 div 的 CSS 样式(因为 p 元素默认有上下边距的),但提交代码时不知为何没提交上,所以 1.8.0 中的原来想法被迫要在 1.8.1 中实现。

当然,10 月 4 日早晨,经老王的提醒,其实这个多出来的 < div > 已经没有它存在的意义了。所以可以将 < div class="text-center" > 删除。把 .text-center 放在 .container 里。完美!等下次添加 feature 更新到 Github 仓库里。

当然这次 1.7.x --> 1.8.0 的更新还是挺不错的。修复了很多 bug,还有很多 feature。

以后的优化想法

可见,左侧的 toc 目录导航,在字比较少的情况下,右侧散出很大的空间。所以之后 toc 程序里可以检测一下字数等,防止出现这种不舒服的效果,以致没人再想去用这个功能。

确实散出很大的空间,有利于的大量文字和长标题下观看,但对于一般文章来说,还是短小精悍点好。

自己长久以来,做过的最大的 前端 工程,恐怕就是这个 emlog pro default 默认主题了。其中除 jqurey 和 imgzoom 两个 js 库外,没有其他库了。因为是系统自带的,所以体积要小一点,因为是作为样板使用的,所以代码要认真点,为易读做很多工作。虽然很简单,甚至很多人都说丑的不得了,但其实也是花了挺多时间研究的。自己的前端水平也很有限。

当然至少对我来讲,互联网上绝大部分花里胡哨的网站效果我都是可以做出来的,只是时间问题,就像一个建筑工人,看着一些三四十米高的小楼,也是能建出来的,只是时间问题。

之后就是多做一些模版,并且在 emlog.cn 这个“社区”发布一些关于 emlog 细节的文章,助力 emlog 再热闹起来。。。不禁感叹,在其他圈子里讨论 emlog,如今已大概率可陷入冷场了,那种尴尬的感觉刻骨铭心。而初中时候,初入互联网,网上盘山遍野的都是 emlog.......

PHP 还能再战 10 年!

标签: 原创 前端

评论:
avatar
Lvtu 2022-11-04 08:54
text-center 为啥不直接放container后面,然后去掉p ……
commentator
独元殇 2022-11-04 09:46
@Lvtu:这是因为 p 有浏览器默认样式,也就是上下有 30 px 的间距。而 div 没有。

不过前两天我给 .text-center 加上上下 30 px 的边距 CSS 了,可惜我居然忘了我已经加上了!

我刚按照你的说法试了试,效果很完美,和原来一模一样!这就更新!
commentator
Lvtu 2022-11-04 10:34
@独元殇:上下30px可以再写一个样式my-30 {margin-top:30px;margin-bottom:30px},或者py-30 {padding-top:30px; padding-bottom:30px},不然其他class用text-center也会变成上下30px,同样左右用mx 或 px ……
commentator
独元殇 2022-11-04 10:36
@Lvtu:✓,有道理