前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >系统自带模版在 emlog pro 1.8.0 底部信息错位问题暂时的解决方案

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

作者头像
独元殇
发布2023-03-21 17:20:34
3870
发布2023-03-21 17:20:34
举报
文章被收录于专栏:独元殇的文章

问题描述

作为一名 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 >。

代码语言:javascript
复制
位置 /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 在用户端的的解决即,在【系统后台】----【系统】----【设置】----【首页底部信息】添加如下代码。

代码语言:javascript
复制
<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 年!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-11-3 2,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 问题描述
  • 解决方案
  • 以后的优化想法
相关产品与服务
腾讯云服务器利旧
云服务器(Cloud Virtual Machine,CVM)提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源,适应变化的业务需求,并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本,简化 IT 运维工作。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档