巅峰霸主 > 设计开发 > 前端技术 >

discuz论坛使用bootstrap格子实现PC响应式自适应宽度

时间:2021-02-04 02:09:40  来源:巅峰霸主网  作者:烈火大地 点击:
摘要:discuz论坛默认的模板宽屏和窄屏已经不那么能满足需求,宽屏太宽了,而窄屏又太过于窄,使用bootstrap的格子系统来调整宽屏,使用户体验更好……

现在大部分电脑的分辨率都在1300~1920px之间,而discuz“窄屏”是固定宽度960px,在分辨率为1200px的电脑上浏览感觉是很好的;如果改为默认使用“宽屏”,由于宽屏默认是满屏状态,在分辨率小于1320px的电脑上浏览感觉也挺好,但是现在很多的电脑分辨率都是1400px、1520px、1920px的,而且这种大分辨率的电脑还特别多,如果使用“窄屏”,在这些电脑上浏览网站的帖子感觉就是在电脑的屏幕中间有那么一丢丢内容,如果默认使用宽屏,而大屏幕电脑上又显得混乱,感觉满屏太宽了。

为了解决这个问题,引入bootstrap栅格系统,将屏幕分辨率小于1400px时,帖子页面显示满屏,分辨率大于1400px时页面的左右两边显示一定宽度的空白,根据屏幕的宽度自动判断。支持后台的各种设置,但是要使用本方法,建议在后台——界面——界面设置——站点宽窄风格:——选择“宽屏(自由宽度)”。

由于discuz的模板设计比较复杂,使用bootstrap的格子系统,我们直接改默认模板,其实花不了多少时间。首先将template/default这个文件夹备份,避免改错了还可以还原回来。

演示网站:www.asneel.com(查看帖子相关页面)

bootstrap下载和目录建立

1、打开template/default文件夹,在里面新建一个名为“liehuo_style”的文件夹,再在liehuo_style文件夹里面分别建立js和css两个文件夹,用于存放bootstrap的js和css文件。目录结构如下图所示:

discuz使用bootstrap.png

2、去bootstrap网站下载源码,我这里使用的是最新版本的bootstrap5.0,下载地址:https://getbootstrap.com/docs/5.0/getting-started/download/

下载完成之后解压缩,得到bootstrap-5.0.0-beta1-dist这个文件夹,然后分别将:

  1. bootstrap-grid.min.css

  2. bootstrap-grid.min.css.map

拷贝到template/default/liehuo_style/css文件夹里面;将:

  1. bootstrap.bundle.min.js

  2. bootstrap.bundle.min.js.map

拷贝到template/default/liehuo_style/js文件夹里面。因为bootstrap完整的css会破坏discuz系统自带的css样式,有兼容性问题,比如字体大小不一致会导致格式错乱,所以我们只使用bootstrap的格子css文件“bootstrap-grid.min.css”这个文件。

引入bootstrap文件到discuz模板里面

3、需要修改的地方并不多,所以懒得新建模板,直接在系统默认的模板里面修改,修改之前请先备份template/default整个默认的模板文件夹。然后打开template/default/common/header.htm文件,搜索:

</head>

在其前面一行添加代码:

<link rel="stylesheet" type="text/css" href="template/default/liehuo_style/css/bootstrap-grid.min.css?{VERHASH}" />

4、继续打开template/default/common/footer.htm文件,搜索代码:

</body>

在其前面一行添加如下代码:

<script type="text/javascript" src="template/default/liehuo_style/js/bootstrap.bundle.min.js?{VERHASH}"></script>

修改discuz模板实现响应式自适应

经过上面的代码添加,bootstrap的格子文件就全部添加完毕。下面修改模板代码实现相应是布局。

5、实现顶部小导航响应式宽度,打开template/default/common/header.htm文件,搜索代码:

<!--{hook/global_cpnav_top}-->

在其下面一行添加:

<div class="container-xxl">

继续搜索以下代码,大约85行左右:

<!--{if !IS_ROBOT}-->
            <!--{if $_G['uid']}-->
            <ul id="myprompt_menu" class="p_pop" style="display: none;">

在其上面一行添加一个div闭合前面所增加的div:

</div>

6、实现logo和导航部分响应式,依然打开template/default/common/header.htm文件,继续搜索:

<!--{ad/headerbanner/wp a_h}-->
        <div id="hd">

将其替换为如下代码,就是在div上面增加一个class:

<!--{ad/headerbanner/wp a_h}-->
        <div id="hd" class="container-xxl">

7、实现帖子内容和回复主体部分响应式布局,依然打开template/default/common/header.htm文件,搜索以下代码,其实在最后一行:

<div id="wp" class="wp">

在其上面一行添加:

<div class="container-xxl">

然后打开template/default/common/footer.htm文件,对这个新添加的div进行结束,在这个footer.htm文件的第一行添加:

</div>

注意原来有一个div,添加时不能删哦。

8、实现尾部版权页脚部分响应式布局,打开template/default/common/footer.htm文件,搜索代码:

<!--{hook/global_footer}-->

在其下面一行添加代码:

<div class="container-xxl">

继续搜索如下代码,大约89行左右:

<!--{/if}-->

<!--{if !$_G['setting']['bbclosed'] && !$_G['member']['freeze'] && !$_G['member']['groupexpiry']}-->

在这段代码的前面一行添加:

</div>

也就是将前面新增加的div闭合结束。

通过上面的修改,就全部完毕了。支持前台用户随意对“宽屏”和“窄屏”随意切换而排版不会乱。到此基本完成,后台清除缓存可以看看效果。

返回顶部按钮位置修改

经过前面的修改,discuz首页、列表页、和帖子详情页都实现了PC宽屏状态下的响应式布局,不过这时候你会发现“返回顶部”那一组按钮的位置始终在浏览器的最右边,看起来很不爽,下面来修改以下代码,让返回顶部按钮和在“窄屏”状态时一样紧贴主体内容的右边。

9、返回顶部按钮位置美化,打开template/default/common/footer.htm文件,搜索代码:

<div id="scrolltop">

在其上面一行添加代码:

<div class="container-xxl">
<div class="y lh-dhr">

然后继续搜索代码:

<script type="text/javascript">_attachEvent(window, 'scroll', function () { showTopLink(); });checkBlind();</script>

在其前面一行添加:

</div>
</div>

将我们新增加的2个div结束。此时HTML代码生效,但是控制“宽屏”状态下返回顶部按钮位置的还有JavaScript代码,所以继续打开static/js/common.js文件,搜索以下代码,大约在1847行左右:

            scrolltop.style.left = 'auto';
            scrolltop.style.right = 0;

将这2行代码修改为如下:

//            scrolltop.style.left = 'auto';
//            scrolltop.style.right = 0;

也就是在前面加上两个斜杠将其注释掉,直接删除也是可以的。

接下来需要增加一丢丢css,用于控制返回顶部按钮的位置,打开template/default/common/common.css文件,拉倒最后的位置,添加如下代码:

/* 宽屏返回按钮位置 */
.lh-dhr { padding-right: 15px; }
@media(max-width:1400px){ .lh-dhr { padding-right: 60px; } }

到此整个修改就全部完成了,其中修改系统核心文件是common.js这个文件里面,注释了两行代码,模板文件只修改了header.htm和footer.htm这2个文件,common.css增加了一点样式,其他的文件无需修改。为了修改预览时生效,改完之后要到后台——工具——清除缓存。

实现discuz宽屏状态下(当分辨率大于960px)更好的用户体验,而且不破坏系统核心代码,主要解决的是默认宽屏时太宽,而窄屏又太窄的问题:默认使用宽屏,当屏幕分辨率大于1400px时会在所有的帖子页面左右分别显示空白,页面不会全屏,当电脑屏幕分辨率小于1400px时则显示全屏。

需要注意的是本代码中使用的bootstrap5.x版本,如果想要电脑分辨率大于1200px时也在页面的左右两边有空白,则将上面所有的“container-xxl”修改为“container-xl”;如果使用bootstrap4.x版本,则需要将上面代码中的所有“container-xxl”修改为“container-xl”,并且需要在footer.htm文件中引入jQuery3.X,不推荐低于bootstrap5以下的版本;如果使用bootstrap3.X版本,则将所有的“container-xxl”修改为“container”并且要在footer.htm文件中引入jQuery。

最后关于手机版:由于帖子展示的功能元素太多,并不能直接将这个代码响应式自适应移动端,经过试验都失败了,所以手机端还得单独写针对性的手机触屏版代码,有时间再分享经验。

(责任编辑:陆柏熺)
评价:
用户名: 验证码: 看不清?点击更换


关注站长自媒体 获取更多优质内容

  • 百家号
    百家号
  • 头条号
    头条号
  • 企鹅号
    企鹅号

2019-2021 ©巅峰霸主网 京ICP备12023415号-2
返回
顶部