Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

[待审核] 【教程】最简练的模版修改教程

[复制链接]
Zazck 发表于 2013-12-6 04:59:42 | 显示全部楼层 |阅读模式
之前想搞个仿PHPWIND的模版,结果因为是discuz!x2.5还有一些问题导致模版显示各种出BUG,懒得搞了。更懒得修了,于是决定自己做一个模版。

首先做模版就是要在官方的基础之上去改动,而且你需要有CSS HTML的基础,不然接下来的文章你可以不用看了,因为大部分你都无法看懂,本文只面向有一定代码基础和拥有高度理解能力的人。最好能拥有本地服务器。码者(用笔者怪怪的,毕竟是打字)选择了Apache2.2 + PHP5.4 +MySQL最新版

改模版首先你需要拥有一个有好开发者模式的浏览器,当然如果你的代码阅读能力超神的话也可以考虑不用。码者用的是Chrome浏览器,一直保持最新版,也推荐各位用Chrome的浏览器。开发者模式按F12即可打开,下面会弹出来一个1:1的调试窗口,左侧的是页面代码,右侧的是CSS样式



之所以我强调了要高度理解能力的人是因为我不想废话过多,省略了对开发者模式的详细介绍,具体用法只要你摸索上几分钟就会了



新建一个模版的方法:
在模版文件夹里面新建一个文件夹,把discuz_style_default.xml复制并改名为你自己的模版名,删掉<item id="templateid"><![CDATA[1]]></item>这段文字,其余的除了Title不能编辑以外都可以随意编辑。然后把需要修改的文件按照相对路径复制到自己的模版文件夹里面。



我们现在来说一下关键的修改方式:
在开发者模式里面寻找要改动的地方 - 复制ID或者CLASS - 打开模版文件夹,挨个文件搜索代码 - 编辑页面内容或者样式内容 - 保存更新缓存查看效果






举个例子:
现在的论坛导航条在LOGO和用户信息的下面,但是PHPWIND的导航条是置顶的,我希望把搜索框放进导航条然后一起丢到整个页面的最顶部,然后把那个作用不大的快捷导航和顶部设为首页那栏一起删掉,让LOGO也在导航条显示,最后把用户信息移动到边栏显示,仿制类似PHPWIND的效果。


做法:在开发者模式里面找到顶部设为首页那栏的代码,找到common/header.htm,完整删掉对应的div数据(div id="toptb"的那一整串)。同样方法找到用户信息的代码,发现被保存在header_userstatus.htm里面,整个代码剪切到discuz.htm里面的sd那个DIV下面。查找论坛LOGO的DIV代码,在header.htm里面,将它移动到div id="nv"下面,<ul>的前面。最后寻找search(搜索)的相关代码,在header.htm里面找到一行被注释的内容
  1. <!--{subtemplate common/pubsearchform}-->
复制代码
将它移动到导航条</ul>标签后面,在CSS里面设置float属性保证能够让这些元素正常显示。我只给DIV的CLASS后面添加了空格和z字母,在CSS表里面官方的团队已经预先设置好了float的样式,左侧float的class是字母z,右侧是y。这一切都设定好以后挑战一下样式让导航条能正常显示,然后在调整边栏的用户信息的样式,大功告成。

难点:
1.div如果不设置float属性是不会正常显示的,你把logo移动到导航条的时候如果不正确设置float属性,LOGO会挤掉后面的<ul>,让<ul>显示在下面隐藏的地方。
2.其实这里面的注释信息并不是毫无作用,你需要寻找一切你能找到的信息,挨个尝试,就如同这个搜索栏的入口一样。其实这次的修改并不完美,因为header那里的用户信息应该也是可以通过移动注释的方式直接在边栏加载,这些就需要活学活用了。
3.搜索文件是一个痛苦的过程,挨个文件搜索的同时别忘了大概看一下文件内容,等熟悉文件结构的时候就不用来回寻找了
4.在开发者模式里面右侧会显示对应的css文件名。这也是discuz缓存的模版给我们提供的最大化的便利,要善加利用,多留意那一眼没有坏处。



附加内容(小技巧,随时更新):
1.模版设置里面你可以自定义新的设置,这个自定义设置可以在CSS里面读取。例:HEADERBG 设定为一个图片在图片目录的地址 CSS里面:
  1. .headerpic {background:url({STYLEIMGDIR}/{HEADERBG}) no-repeat right 0 transparent}
复制代码
2.你可以在对应的htm里面找到diy的接口div,把那个div移动到官方没设定到的地方,你就可以在那里添加DIY了(例子:边栏上方没有DIY位置,首页边栏左侧版块上方没有DIY位置)。
3.Discuz!X3使用的新模版架构,如果用X2.5的话后果会很严重,非常严重,会导致模版几乎不能用,所以新版本的别尝试使用旧版本的模版



最后:我感觉这是Discuz模版修改制作教程里面最简单字数最少的一篇了
hxx739988293 发表于 2014-1-3 16:42:56 | 显示全部楼层
谢谢楼主分享,现在在学php
回复

使用道具 举报

hihiweb 发表于 2015-6-7 00:43:50 | 显示全部楼层
楼主图文教程一下吧
回复

使用道具 举报

老闆 发表于 2015-10-22 12:50:23 | 显示全部楼层
恩很好教學謝謝大分享
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-12-4 16:28 , Processed in 0.022769 second(s), 3 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表