当前位置:首页 > 技术 > 正文内容

Discuz手机模版不支持有序列表和无序列表的修改方法

Lavfun3年前 (2022-04-16)技术867

有序列表:

  1. 条目内容1;

  2. 条目内容2;

  3. 条目内容3...

无序列表:

  • 条目内容1;

  • 条目内容2;

  • 条目内容3...


这两种列表对于文本排版来说非常重要,可以将很多条目列的很清楚,看起来整齐划一,一目了然,本人非常喜欢使用,但很多dz手机模版都不支持,编辑好后只有PC端显示,而手机端则没有,这怎么行?自己动手改它!


1、查找手机模版目录下的文件:/touch/forum/viewthread.phpviewthread_list.phpviewthread_node.php,以及/touch/portal/view.php等文件;

2、分别打开这些文件,论坛搜索:“$post[message]”,文章页面搜索:“$content['content']”;

3、对于出现在独立一行时,给他们加上一个div标签,方便加样式,如手机论坛页:<div class="gxy">$post[message]</div>

<!--{if !$_G[forum_thread][special]}-->
 <div class="gxy">$post[message]</div>
<!--{elseif $_G[forum_thread][special] == 1}-->
<!--{template forum/viewthread_poll}-->
<!--{elseif $_G[forum_thread][special] == 2}-->
<!--{template forum/viewthread_trade}-->
<!--{elseif $_G[forum_thread][special] == 3}-->
<!--{template forum/viewthread_reward}-->
<!--{elseif $_G[forum_thread][special] == 4}-->
<!--{template forum/viewthread_activity}-->
<!--{elseif $_G[forum_thread][special] == 5}-->
<!--{template forum/viewthread_debate}-->
<!--{elseif $threadplughtml}-->
$threadplughtml
 <div class="gxy">$post[message]</div>
<!--{else}-->
 <div class="gxy">$post[message]</div>
<!--{/if}-->
<!--{else}-->
 <div class="gxy">$post[message]</div>
<!--{/if}-->

手机文章页:

<div id="article_content"><div class="gxy">$content[content]</div></div>


4、增加CSS样式,找到手机模版对应的css文件,如手机论坛:css/extend_common.css、手机文章:/image/style.css,分别打开编辑增加如下内容:

/*220330Gxy添加,用于支持有序和无序列表*/
.gxy ul li{list-style-type:disc; margin-left:20px; line-height:2em;}
.gxy ol li{list-style-type:decimal; margin-left:20px; line-height:2em;}
.gxy ul,ul.litype_1,ul.litype_2,ul.litype_3{margin-left:10px; line-height:2em;}
.gxy ol,ol.litype_1,ol.litype_2,ol.litype_3{margin-left:10px; line-height:2em;}
ul.litype_1 li{list-style-type:decimal !important;margin-left:20px;}
ul.litype_2 li{list-style-type:lower-alpha !important;margin-left:20px;}
ul.litype_3 li{list-style-type:upper-alpha !important;margin-left:20px;}
/*220330Gxy添加,用于支持有序和无序列表*/

注:由于本人比较喜欢行高设置为2,看起来比较清爽,所以增加了“line-height:2em;”,如不喜欢可删除每行里的这部分;


5、个别情况下自己喜欢:

去掉手机论坛viewthread_node.php中字体大小限制,搜索Message后的font-size: .17rem

修改几处手机版列表和页面字体大小,必要时增加行高设置,如:

.list_dt_yt a,
.threadlist li a
.plc .pi .message{ font-size: 16px; line-height:2}


6、完成!


7、个别站点(DGPXW)修改支持有序和无序列表记录:

  • PC端:/phpcms/templates/default/content,主要是show开头的html文件;

  • 手机端:/m//phpcms/templates/default/content,主要是show开头的html文件;


都要修改多个文件

<div class="gxy"><?php echo $content;?></div>


PC端CSS:/css/inside.css

/*220330Gxy添加,用于支持有序和无序列表*/
.gxy ul li{list-style-type:disc; margin-left:30px; line-height:2;}
.gxy ol li{list-style-type:decimal; margin-left:30px; line-height:2;}
.gxy ul,ul.litype_1,ul.litype_2,ul.litype_3{margin-left:0px; line-height:2;}
.gxy ol,ol.litype_1,ol.litype_2,ol.litype_3{margin-left:0px; line-height:2;}
/*220330Gxy添加,用于支持有序和无序列表*/


手机端CSS:/m/style/mobile.css

/*220330Gxy添加,用于支持有序和无序列表*/
.gxy ul li{list-style-type:disc; margin-left:30px; line-height:2;}
.gxy ol li{list-style-type:decimal; margin-left:30px; line-height:2;}
.gxy ul,ul.litype_1,ul.litype_2,ul.litype_3{margin-left:0px; padding-left:0; line-height:2;}
.gxy ol,ol.litype_1,ol.litype_2,ol.litype_3{margin-left:0px; padding-left:0; line-height:2;}
/*220330Gxy添加,用于支持有序和无序列表*/




扫描二维码推送至手机访问。

版权声明:本文由 声光视趣 - blog.lavfun.com 发布,如需转载请注明出处。

本文链接:https://blog.lavfun.com/technical-forum/36.html

分享给朋友:

相关文章

修改misc.phpmod=mobile使DiscuzX论坛PC端与移动端互相跳转

修改misc.phpmod=mobile使DiscuzX论坛PC端与移动端互相跳转

用discuz!论坛访问手机版本的网址不会自动跳转到电脑版网址,而是会跳转到http://域名/misc.php?mod=mobile,这样体验很不好。现提供修改方法:打开论坛根目录找到文件:/source/class/discuz/dis...

Linux系统下DiscuzQ换了服务器后图片加载不正常解决办法

Linux系统dzq要创建软链接,命令如下:ln -s /www/wwwroot/dzq/storage/app/public /www/wwwroot/dzq/public/storage注意:命令中/www...

DiscuzX更换域名的方法及步骤

下面先说更换域名的步骤方法:后台--全局--站点信息--网站 URL:后台--全局--域名设置--应用域名和根域名设置后台--界面--导航--连接里面的地址修改后台--运营--关联连接,没有设置就不用修改后台--云平台--同步站点信息后台-...

常用html编辑代码及条目样式记录备用

常用html编辑代码及条目样式记录备用HTML条目排版样式红头条目html代码内容:视频教程内容从激光认识、激光灯的结构与原理、常见的概念等基础知识讲起,以及BEYOND软件操作界面、快速工具、编辑器、时间线、播放列表、实战搭建与连接、激光...

本站原创:PHPCMS的NGINX伪静态和URL规则设置实践记录

本站原创:PHPCMS的NGINX伪静态和URL规则设置实践记录

首先说明一下,本人小白,不懂网页代码编程语言或技术,只是自己摸索了一点简单的修改页面的方法,大部分都是在网上找到的资料,再加上自己的理解、修改、测试琢磨出来的,写出来一方面是自己做个记录,另外一方面希望能帮助到有需要的人吧,水平有限还请鉴谅...

Discuz X3.4文章和帖子图片存储阿里云OSS远程附件记录

Discuz X3.4文章和帖子图片存储阿里云OSS远程附件记录

首先,站点比较小但却很重要,又有快速访问的要求,又不想花钱买付费版插件,所以就自己想办法手动改一下图片存储OSS以达到要求,以下是手动更改过程记录。再次提醒:以下操作有风险,数据无价!记得备份网站和数据库!另外,本文前提是阿里云OSS要提前...