Discuz3.3精仿小米风格整站模板制作——1、新建模板方案

术语说明:

 

模板——模板是一堆按照规定命名方式的html文件,用于指定整个论坛不同页面的外观。
标签——标签和模板共同作用以实现论坛换肤功能,其中标签主要控制页面显示什么数据,显示多少条等。
风格——风格是一个xml配置文件,用于配置一些固定区域字体的大小、颜色、背景色等。例如春节时,整个版面变成喜庆红色等。风格这个功能实质上是一种可以直接在后台设置论坛中固定格式的文字(如标题列表等)的大小、颜色、背景色等而不用单独写css文件进行覆盖的技术。对于有编码能力的站长来说,其实无多大意义。

Discuz模板制作官方说明: http://faq.comsenz.com/library/template/made/made_extend.htm

本部分内容是对Discuz官方提供的模板概述的扩展说明。请参阅上述网址,对Discuz模板制作有个初步认识。discuz模板文件位于网站根目录/template/目录下。其中子目录default是其默认模板,站长可以根据需要在此目录下新建模板目录以放置自己的模板。

Discuz的模板是固定文件名的htm文件。例如,首页的模板文件叫discuz.html。其中,默认模板的首页模板文件位于站点根目录/template/default/forum/discuz.html。discuz对模板做了两点基本要求:

  1. 模板名称固定——对于不同的功能,模板的文件名是固定的,例如首页的模板名叫discuz.htm,板块的主体列表页模板文件名叫forumdisplay_list.htm等等。http://faq.comsenz.com/library/template/filelist/filelist_index.htm 此网址给出了默认模板目录下各个模板文件所对应的功能区域名称。我们所要做的工作就是按照这个目录列表,创建对应的htm文件,以实现论坛换肤。
  2. 模板文件扩展名固定为htm——html文件的扩展名有两种,分别为htm和html。以htm为后缀的文件一般在早期linux中比较常见。现在大多为html为后缀,同时这也是w3c推荐的做法。

个人认为,discuz如此设计恨怪异,让新上手的使用者理解起来非常困难。良好的设计方案应该让使用者自由选择模板才对。例如,对于论坛首页这个功能而言,使用者能自由决定是选择x模板方案下的index.html还是default.php或是其他什么文本文件。如此做法更符合一般人的直觉。后续,作者将对discuz的源码做小小修改,使其可以识别html后缀的文件(修改为识别html后缀文件或其他后缀文件,例如asp、jsp、php等代码大同小异,使用者可以自行参照修改)。在discuz模板目录下,有一特殊目录——common,此目录下的文件为非必须模板文件,它只是将各个模板的公用部分提纯,其本身可有可无,完全依照制作者的思路而定。

discuz读取模板的规则(以首页模板举例):首先读取后台指定的模板目录中是否存在discuz.htm文件,如存在,直接以此文件做为模板,如不存在,则取默认模板文件中的discuz.html文件作为模板。

Discuz新建模板方案的主要流程

一、新建风格方案

登录后台,点击顶部【界面】功能区,页面刷新后,左侧会显示关于【界面】的功能导航,此时选择左侧的【风格管理】。在新增输入区域输入自定义的风格名称,点击【新增】。此时系统会复制一套空的风格方案。(风格方案实质上是一堆css和图片路径设置,先忽略这个,后续再详细说明具体设置)然后选择,当浏览者使用什么浏览设备时,采用此风格(模板)方案。系统提供了

 电脑版

 手机标准版

 手机触屏版

 手机极简版

四个选项,其中,【电脑版】必选。其他可忽略,此处的判断是通过http头进行筛选的。意味着我们可以建立四套风格及对应的模板,分别为不同的浏览者提供不同的显示效果。

二、新建模板目录

在站点根目录/template/下新建模板目录,并将默认模板目录(default)中的discuz_style_default.xml文件拷贝到新建的目录中,修改文件名为:discuz_style_新建的目录名.xml。模板目录建议采用英文字符。以防止服务器不识别中文目录。然后用记事本打开该xml文件进行编辑,修改对应的配置项。具体修改参见官方提供的模板制作概述下图为修改好的示例:

注意:directory项中,路径要和模板文件夹所在的路径保持一致。templateid项中,具体的值修改为对应风格方案的id,(在风格方案中,点击编辑,从网址栏中可以看到具体的id。)

三、后台新建模板套系

在【界面】——【模板管理】中,新增模板名称(建议和风格名称保持一致)并指定正确的路径。参见下图:

 

至此,新建模板方案就大功告成了。在【工具】——【更新缓存】中更新一次缓存。前台样式就是新建的模板了。此时我们会发现前台没有任何变化,这是因为我们只是新建了模板方案,但是没有建立具体的模板文件,系统检测到没有模板文件后,自动采用了默认模板方案中的对应模板文件(在discuz模板读取规则中有叙述),故前台没有任何变化。在后续的章节中,我们将制作各个模板文件,此时前台就会发生对应的变化。

转载于:https://www.cnblogs.com/brucelee/p/7129170.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/429102.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

普元连接mysql_普元EOS 案例 - 还有一行代码的个人空间 - OSCHINA - 中文开源技术交流社区...

1 创建项目1) 进入EOS Studio开发透视图;单击主菜单项“文件”选择“新建”->“空EOS项目2) 在弹出的“创建空EOS项目”视图中,配置相关参数。“项目名称”:EOSTriping,3) 单击【完成】按钮,系统完成该项目框架…

十年WEB技术发展历程

Ajax03年的时候我上六年级。那时候网吧刚在小县城的角落萌生。传奇,大话西游第一代网游一时风靡。我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩,然后接下来的一个小时我一直在,注,冊,账。号。彼时网吧用的512k…

Python之编写登陆接口

1.输入用户名密码; 2.认证成功后显示欢迎信息; 3.错误三次后,账号被锁定。 账号文件:user.txt 锁定文件:locked.txt 流程图如下: # -*- coding:utf-8 -*- # Author Caoxl import sysaccount_fileE:\user…

好全的Android面试题

转载:http://www.jianshu.com/p/84ee896c3329 需求描述 各种新技术接触渠道比较狭窄, 面试没有底气。 常见面试知识点及回答没有较系统的准备,就业指导提供的资料没时间看,看了记不住。 面试没有经验, 不清楚面试前要做的各种准备、面试过程…

JavaSE--类加载器

参考:http://www.importnew.com/6581.html Java 编译器会为虚拟机转换源指令。虚拟机代码存储在以 .class 为扩展名的类文件中,每个类文件都包含某个类或者接口的定义和代码实现。这些类文件必须由一个程序进行解释,该程序能够将虚拟机的指令…

java netbeans 教程_NetBeans 教程

NetBeans IDE Java 快速入门教程第一章本章通过指导您创建一个简单的 "Hello World" Java 控制台应用程序,简要介绍 NetBeans IDE 工作流。学习完本教程后,您将对如何在 IDE 中创建和运行应用程序有一个基本了解。学习完本教程所需的时间不到 …

几个python小程序

python小程序 1-100求和 1 def Sum(x, y):2 return xy3 print reduce(lambda x,y:xy,range(1,101))4 5 i 16 j 07 while i < 101:8 j i j9 i 1 10 print j View Code输出1-100之间的奇偶数1 i 1 2 a [] 3 while i < 100: 4 if i%2 0: 5 …

Linux下git使用

一、安装 本人使用的是centos 7&#xff0c;首先安装git 1.下载git&#xff1a;wget https://Github.com/Git/Git/archive/v2.3.0.tar.gz 2.下载之后解压&#xff1a;tar xvf v2.3.0.tar.gz 3.进入解押文件目录&#xff1a;cd git-2.3.0 4.依次运行如下命令&#xff1a; ./conf…

java 水表识别_一种水表数字的AI智能识别方法与流程

本发明涉及模式识别与人工智能技术领域&#xff0c;特别涉及一种直观的水表数字的AI智能识别方法。背景技术&#xff1a;深度学习在目标检测的应用发展迅速&#xff0c;在YOLO(You Only Look Once)之后又出现了升级版本YOLOv2&#xff0c;采用的是Darknet-19作为基础网络&#…

mysql.w002_mysql简单例子

登陆数据库&#xff1a;mysql -u用户名 -p密码 -P端口 -h数据库地址‍‍‍‍‍‍修改mysql提示符&#xff1a;(仅本次连接有效)‍‍‍‍‍‍方法一&#xff1a;执行mysql -uroot -proot -prompt \h结果为&#xff1a;localhost方法二&#xff1a;进入mysql后&#xff0c;执行PR…

JQuery中的Deferred-详解和使用

首先&#xff0c;为什么要使用Deferred&#xff1f; 先来看一段AJAX的代码&#xff1a; 1 var data; 2 $.get(api/data, function(resp) { 3 data resp.data; 4 }); 5 doSomethingFancyWithData(data); View Code 这段代码极容易出问题&#xff0c;请…

【Eclipse】eclipse在线安装反编译插件

1.help->install new software 2.Add Name&#xff1a;jd-eclipse_update_site Location&#xff1a;http://jd.benow.ca/jd-eclipse/update 3.等待加载出来 4.持续点击下一步&#xff0c;直到完成。 转载于:https://www.cnblogs.com/flydkPocketMagic/p/7170283.html

Spring Boot 系列(一)快速入门

简介 Spring Boot是由Pivotal团队提供的全新框架&#xff0c;其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置&#xff0c;从而使开发人员不再需要定义样板化的配置。通过这种方式&#xff0c;Spring Boot致力于在蓬勃发展的快速应…

1. 在虚拟机中 添加内容

步骤&#xff1a; 1. 找到要添加的内容&#xff0c;按住 ctrl c 复制 &#xff0c;例如&#xff1a;复制 飞秋 2. 打开 虚拟机&#xff0c;找到 要复制文件的位置。 3. 将 复制的文件添加到 共享文件夹下面。 4. 打开虚拟机&#xff0c;安装飞秋 5&#xff0c; 最后就完成了…

java web scala_spring boot+scala编写web接口

本人是Java开发者&#xff0c;有面向对象的基础&#xff0c;而Scala也是面向对象的语言&#xff0c;学习后可快速入门。通过学习Scala的面向对象(和java面向对象类似)、Scala的高级函数(map,reduce等&#xff0c;和Java8中的stream编程类似)、Scala的隐式转换(在Java中可通过sp…

java小应用_java小应用

第一次使用简书记笔记&#xff0c;主要目的是为了加深印象&#xff0c;方便忘记时及时翻看。hello.java代码如下&#xff1a;import java.applet.Applet;import java.awt.*;public class hello extends Applet{private Font f1;public void init(){f1 new Font("宋体&quo…

java做橡皮擦效果_HTML5 canvas橡皮擦擦拭效果

这是一款HTML5 canvas橡皮擦擦拭效果。该效果通过canvas来制作遮罩层和擦拭用的橡皮擦&#xff0c;用户可以通过移动鼠标来移除遮罩层&#xff0c;效果非常炫酷。因为发代码有时会排版混乱&#xff0c;所以先发图演示了。源码已经打包好了&#xff0c;想学习的朋友可以下载练习…

mysql to mssql_MysqlToMsSql

MysqlToMsSql是一款简单易用的数据库迁移工具&#xff0c;这款软件功能强大&#xff0c;可以帮助用户将MySQL数据库内容转移到msSQL数据库中&#xff0c;采用可视化操作&#xff0c;支持预览&#xff0c;方便用户查看数据库&#xff0c;实用性强&#xff0c;有需要的用户快来下…

java延迟覆盖_高效Java第九条覆盖equals时总要覆盖hashCode

原标题&#xff1a;高效Java第九条覆盖equals时总要覆盖hashCode高效Java第九条覆盖equals时总要覆盖hashCode在每个覆盖了equals方法的类中&#xff0c;也必须覆盖hashCode方法。否则会导致该类无法与基于散列的集合一起正常运作。 hashCode约定在应用程序的执行期间&#xff…

原生js简单实现双向数据绑定原理

根据对象的访问器属性去监听对象属性的变化&#xff0c;访问器属性不能直接在对象中设置&#xff0c;而必须通过 defineProperty() 方法单独定义。 访问器属性的"值"比较特殊&#xff0c;读取或设置访问器属性的值&#xff0c;实际上是调用其内部特性&#xff1a;get…