立即注册 登录
彼岸网 返回首页

天香公主的个人空间 http://www.bian-wang.com/discuz/?10005 [收藏] [复制] [分享] [RSS] https://github.com/txgz999/discuz/wiki

日志

Discuz页面的宽窄风格

热度 2已有 1190 次阅读2018-4-29 03:05 PM |个人分类:Discuz

Discuz支持宽窄两种风格的页面。窄屏指网站页面的宽度是固定的,宽屏则网站页面宽至整个浏览器的可用部分。

设置在管理中心->界面->界面设置里


对每个板块可以单独设置宽窄风格,在管理中心的导航栏里点击论坛,选择一个论坛编辑,在扩展设置里:


用户的宽窄切换在网页的右上角:


窄屏相对容易控制页面的布局,宽屏则有可能容纳更多的内容。默认设置是宽屏,所以宽屏应该是Discuz的推荐设置。窄屏的宽度固定为960px,而宽屏虽然随浏览器变宽,但宽度不小于960px。 在窄屏时,网页头部的宽度定义在 template/default/common/common.css 里 .wp { margin: 0 auto; // 居中 width: 960px; } 宽屏时,头部的最小宽度定义在 template/default/common/widthauto.css 里: .wp { width: 98%; } #hd .wp, #wp { min-width: 960px; }
奇怪的是,在使用宽屏时,并不是每个网页都是宽屏。博客相册记录论坛等站点功能的主页均为宽屏,但门户页和门户功能所包含的频道页和专题页以及排行榜依旧是窄屏,这是由于 portal.php 和 source/module/misc/misc_ranklist.php 里有下面这句: $_G['disabledwidthauto'] = 1; 去掉它后这两个功能就变为宽屏了。

宽屏和窄屏显示上的区别是由不同的风格产生的,宽屏独用的CSS文件 template/default/common/widthauto.css 是在 template/default/common/header.htm 里以下述方式引入的: <!--{if widthauto()}--> <link rel="stylesheet" id="css_widthauto" type="text/css" href='{$_G['setting']['csspath']}{STYLEID}_widthauto.css?{VERHASH}' /> <script type="text/javascript">HTMLNODE.className += ' widthauto'</script> <!--{/if}--> 决定当前使用宽屏还是窄屏的函数 widthauto 定义在文件 source/function/function_core.php 里: function widthauto() { global $_G; if($_G['disabledwidthauto']) { // 整体变量disabledwidthauto在门户和排行榜功能所使用的脚本文件里设置为1来迫使当前网页以窄板显示 return 0; } if(!empty($_G['widthauto'])) { // 整体变量widthauto只在论坛里使用,代表当前板块的宽窄设置 return $_G['widthauto'] > 0 ? 1 : 0; } if($_G['setting']['switchwidthauto'] && !empty($_G['cookie']['widthauto'])) { // 如果网站允许用户自由切换(宽窄风格),而用户已经调节过宽窄 return $_G['cookie']['widthauto'] > 0 ? 1 : 0; // ,则以用户选择为准 } else { return $_G['setting']['allowwidthauto'] ? 0 : 1; // 不然,按网站设置站点宽窄风格选择为准 } }

个人空间的宽窄


前述宽屏风格是在模板文件里 template/default/common/header.htm 里引入的。但是个人空间并不使用这个模板,它使用的模板是 template/default/home/space_header.htm 。因而个人空间里的那些网页如日志和记录均为窄屏显示,不受宽窄风格设置的影响。
下面我们仿照模板里引入宽屏的方法,添加对个人空间里宽屏的支持。
1)新的风格文件 widthauto_space.css
将风格文件 template/default/common/widthauto.css 拷贝一份放在同一文件夹里,更名为 widthauto_space.css。并在它的末尾添加下面的内容: .wp { width: auto !important; } .ct2 { margin-right: 220px; } .ct2 .mn { width: 100% !important; } .ct2 .sd { margin-right: -195px; } #hd { width: 948px !important; } #moodfm table { width: 100%; } #moodfm textarea { width: 98%; } 2) 修改模板文件 space_header.htm
修改模板文件 template/default/home/space_header.htm,在 </head> 之前添加 <!--{if widthauto()}--> <link rel="stylesheet" id="css_widthauto_space" type="text/css" href='{$_G['setting']['csspath']}{STYLEID}_widthauto_space.css?{VERHASH}' /> <script type="text/javascript">HTMLNODE.className += ' widthauto'</script> <!--{/if}--> 3) 如果要在个人空间里加入用户宽窄切换按钮的话,还需做下述修改:
3a) 修改模板文件 space_header.htm
修改模板文件 template/default/home/space_header.htm,在 <div class="z"> 之前添加 <div class="y"> <!--{if empty($_G['disabledwidthauto']) && $_G['setting']['switchwidthauto']}--> < a href="javascript:;" id="switchwidth" onclick="widthauto_space(this)" title="{if widthauto()}{lang switch_narrow}{else}{lang switch_wide}{/if}" class="switchwidth"><!--{if widthauto()}-->{lang switch_narrow}<!--{else}-->{lang switch_wide}<!--{/if}--></a> <!--{/if}--> </div> 3b) 修改JS文件 common.js
修改文件 static/js/common.js,仿效函数widthauto,添加新函数widthauto_space function widthauto_space(obj) { $F('_widthauto_space', arguments); } 3c) 修改JS文件 common_extra.js
修改文件 static/js/common_extra.js,仿效函数_widthauto,添加新函数_widthauto_space function _widthauto_space(obj) { var strs = ['切换到宽版', '切换到窄版']; if ($('css_widthauto_space')) { CSSLOADED['widthauto'] = 1; } if (!CSSLOADED['widthauto'] || $('css_widthauto_space').disabled) { if (!CSSLOADED['widthauto']) { loadcss('widthauto_space'); } else { $('css_widthauto_space').disabled = false; } HTMLNODE.className += ' widthauto'; setcookie('widthauto', 1, 86400 * 30); obj.innerHTML = strs[1]; obj.title = strs[1]; } else { $('css_widthauto_space').disabled = true; HTMLNODE.className = HTMLNODE.className.replace(' widthauto', ''); setcookie('widthauto', -1, 86400 * 30); obj.innerHTML = strs[0]; obj.title = strs[0]; } hideMenu(); } 修改后要更新缓存才能见效。
4) 空间首页
在做了上述修改后,个人空间里除首页外的其它网页就都支持宽屏了。首页显示的是各种个人模块,它的内容部分的宽度是由个人模块的宽度决定的。因为那些模块都是固定宽度,所以首页的内容部分仍然是窄版,而且靠左而头部则居中。如果不想在空间首页上支持宽屏的话,应将内容部分居中:对文件template/default/home/space_index.htm 做个调整,将下面这句 <div id="frame1" class="frame cl" noedit="1"> 改为 <div id="frame1" class="frame cl" noedit="1" style="margin: 0 auto; width: 960px;"> 而如果要在空间首页上支持宽屏的话,则不需做此修改。但需要做下述修改来调节各模块的宽度:
4a)修改模板文件space_index.htm
修改模板文件 template/default/home/space_index.htm,将下面三句: <div id="frame1_left" style="width:{$widths[0]}px" class="z column"> <div id="frame1_center" style="width:{$widths[1]}px" class="z column"> <div id="frame1_right" style="width:{$widths[2]}px" class="z column"> 分别改成 <div id="frame1_left" style="width:{$widths[0]}%" class="z column"> <div id="frame1_center" style="width:{$widths[1]}%" class="z column"> <div id="frame1_right" style="width:{$widths[2]}%" class="z column"> 4b)修改文件 function_space.php
修改文件 source/function/function_space.php 中的函数 getlayout,将其中的变量定义 $layoutarr = array( '1:2:1' => array('240', '480', '240'), '1:1:2' => array('240', '240', '480'), '2:1:1' => array('480', '240', '240'), '2:2' => array('480', '480'), '1:3' => array('240', '720'), '3:1' => array('720', '240'), '1:4' => array('190', '770'), '4:1' => array('770', '190'), '2:2:1' => array('385', '385', '190'), '1:2:2' => array('190', '385', '385'), '1:1:3' => array('190', '190', '570'), '1:3:1' => array('190', '570', '190'), '3:1:1' => array('570', '190', '190'), '3:2' => array('575', '385'), '2:3' => array('385', '575') ); 改成 $layoutarr = array( '1:2:1' => array('25', '50', '25'), '1:1:2' => array('25', '25', '50'), '2:1:1' => array('50', '25', '25'), '2:2' => array('50', '50'), '1:3' => array('25', '75'), '3:1' => array('75', '25'), '1:4' => array('20', '80'), '4:1' => array('80', '20'), '2:2:1' => array('40', '40', '20'), '1:2:2' => array('20', '40', '40'), '1:1:3' => array('20', '20', '60'), '1:3:1' => array('20', '60', '20'), '3:1:1' => array('60', '20', '20'), '3:2' => array('60', '40'), '2:3' => array('40', '60') );
在做了上述修改后,个人空间里的所有网页就都支持宽屏了。下面的图示显示的是个人空间里的主要网页在宽屏下的样子:
窄屏 宽屏


相关文件下载: http://www.bian-wang.com/discuz/data/userupload/10005/widthauto_dz34.zip

注:本文中的代码里的<符号后和a相连时加了一个不应该有的空格,以避免Discuz在保存日志时自动改变日志内容。

发表评论 评论 (4 个评论)

回复 东风 2018-11-1 05:44 PM
好~~
回复 carry0987 2018-5-1 07:01 AM
天香公主: 嗯,
1)给引入宽屏的css文件的语句加了个ID,通过enable和disable它来实现宽窄切换,所以切换时不用重新load页面
2)按需引入css文件,这一点不是必不可少的。 ...
果然,第二種方式也能避免載入不必要的檔案,更可提升載入速度
回复 天香公主 2018-5-1 06:17 AM
carry0987: 這種css引入方式好特別,不像header_common.html用一句<!--{csstemplate}--!>就引入,反而是使用各種變量獲取css的檔案路徑以及VERHASH ...
嗯,
1)给引入宽屏的css文件的语句加了个ID,通过enable和disable它来实现宽窄切换,所以切换时不用重新load页面
2)按需引入css文件,这一点不是必不可少的。也可以不论初始状态是宽屏还是窄屏都引入宽屏的css文件,然后用1)来控制是否使用即可。但2)的做法更精致些
回复 carry0987 2018-5-1 05:52 AM
這種css引入方式好特別,不像header_common.html用一句<!--{csstemplate}--!>就引入,反而是使用各種變量獲取css的檔案路徑以及VERHASH

facelist doodle 涂鸦板

您需要登录后才可以评论 登录 | 立即注册

小黑屋|Archiver|彼岸网  

Powered by Discuz! X3.1 © 2001-2014 Comsenz Inc.
GMT-4, 2024-3-18 11:12 PM , Processed in 0.025645 second(s), 10 queries. ,ApcOn

返回顶部