1)修改的是模板文件夹内的文件,不同的模板肯定定义不同,但是思路应该都是一样;
2)修改设计到的文件:/zb_user/theme/current-theme/template下面两个文件:single.php,post-single.php,/zb_user/theme/current-theme/style目录下面的default.css文件,前面两个是修改发帖模板和模板选择,后面一个是修改对应模板显示的设置;不同的主题这些文件名称应该都是一样(不确定),不过找到的思路很简单。
3)以下的修改是基于论坛上提供的模板:erx_Easying_p
修改具体步骤:
1)single.php对应的就是后台新建文章时候选择的模板列表之一(其他两个是index模板和404模板,这两个忽略),三个模板对应的是template下面三个同名的php文件,理解为选择了哪个模板,论坛就会执行哪个文件里面的代码,所以先把single.php文件复制一个,加入命名为single-2.php,这时候发帖模板的下拉菜单中就会增加这个single-2.php,这时候两个文件内容是一致的,所以现在选择两个任意一个没有区别;
2)BT面板进入后台,编辑single-2.php文件,打开应该是这样的:
{* Template Name:文章单页判断模块 *}
{template:header}
{if $article.Type==ZC_POST_TYPE_ARTICLE}
{template:post-single}
{else}
{template:post-page}
{/if}
{template:footer}
看下面那个if判断,当符合条件的时候选择的帖子显示模板是post-single,否则选择的是post-page。这两个名字对应的同目录下的两个php文件,这两个文件就是负责输出页面的显示效果;(因为以前修改分享代码的时候是修改single-post.php文件,所以这次还是修改它)但是在前面新建文章选择的模板是single-2.php文件,所以需要让这个single-2判断选择的时候选择一个新的输出文件,比如输入为post-single2.php,这样就是在sql数据中保存的该文章的模板是采用post-single2输出的;所以这里要把post-single.php同样复制一份,改名为post-single2.php。并且把上面的代码修改如下:
{* Template Name:文章单页判断模块 *}
{template:header}
{if $article.Type==ZC_POST_TYPE_ARTICLE}
{template:post-single2} <!--这里修改为post-single2-->
{else}
{template:post-page}
{/if}
{template:footer}
这个时候如果sql记录中某文章是采用默认的single模板,那么它就会调用post-single.php来输出;如果某文章采用的是single-2模板,那么就调用post-single2.php来输出;
3)现在就来修改负责指定文章输出的single2-php文件:编辑该文件,帖子的正文部分代码在这个位置:
<section class="i">作者:<a href="{$article.Author.Url}">{$article.Author.StaticName}</a><i>|</i>分类:<a href="{$article.Category.Url}">{$article.Category.Name}</a>
</section>
{if count($article.Tags)}
<span class="tags"><i>|</i>标签:{foreach $article.Tags as $tag}<a href="{$tag.Url}" target="_blank">{$tag.Name}</a> {/foreach}</span>
{/if}
<section class="t">
{$article.Content}
</section>
其中的{$aticle.Content}变量就是正文的内容,如果要修改其他,逐一对照页面位置;这里看出正文变量的输出实在section class=t里面,正常的情况下这时候就是修改这个t了,但是如果直接修改class=t的样式,那么这个影响将是全局的;其他未采用single-2模板的也会收到影响(因为post-single.php中也调用了这个class的样式),所以这里简单的处理就是修改class的名字,比如修改为<section class="t2">,就是输出不按照原来的class=t,而是按照新的class=t2。
4)关于调用服务器上的字体文件:而不是调用浏览的客户端上字体,采用css3中的@font-face,支持ttf,otf,应该还有别的类型;具体可以查看css3标准资料。该内容写在css style里面,结构模式如下:
首先定义一个样式:
@font-face{
font-family: yourdef-fontname;
src: url("fontname"); /*这里的fontname可以写相当路径,如果是引用其他服务器的话,需要用完整路径*/
/*example1: src:url(../fontname1.ttf),这表示在当前css文件上一级目录下面的fontname1.ttf文件,该文件需要存在*/
/*example2: src:url("
这表示在某个具体服务器上的文件,该文件需要存在,好像跨服务器调用需要设置一个参数,没细研究!*/
format('truetype')
}
定义好之后,就可以在其他需要调用的地方直接调用,例如:<div style="font-family:youdef-fontname" !important;},需要加上important参数,防止浏览器插件屏蔽;调用的名称就是前面定义的名称;不能在div的css中嵌套,例如:
.class1{
width:100%;
@font-face{
font-family:...
}
}
这种调用是不允许的。
5)修改css文件,编辑上面说到的default.css,首先定义一段@font-face,例如:
@font-face{
font-family: "fzxiukai";src: url(../../../../fz.ttf); format('truetype')
}
/*这里采用相对路径,该字体在css文件的上四级的目录内*/
/*也可以写成 src:url("{#ZC_BLOG_HOST#}myfonts/fz2.ttf")*/
定义好之后,现在就到下面找到关于 .erx-article .t 中的内容,因为该模板代码中,这个class=t隶属于 .erx-article,所以原作者是这样写的;可以发现有几行关于t的定义:
.erx-article .t{line-height:1.8;padding:0 0 30px;word-wrap:break-word;overflow:hidden;}
.erx-article .t *{max-width:100%;}
.erx-article .t p{margin:12px 0;}
.erx-article .t blockquote{font-size:14px;background:#f6f6f6;padding:15px;border:4px transparent solid;border-left-color:#ddd;}
.erx-article .t pre{font-size:12px;}
其中pre应该是浮动的返回首页那些;blockquote应该是帖子中代码引用代码语言的,
这时候不能直接修改t,因为这些t是负责默认single模板的输出的,上面修改了class=t2,所以在css中直接把这些代码复制,修改一下名称t为t2,然后修改t2部分的代码就可以了;
这时候简单粗暴的方法就是在上面三个里面加入: font-family:"fzxiukai" !important;,一个一个的测试,也可以直接找,这里有一个地方,如果用firefox或者chrome查看页面元素,会发现帖子的正文源码中是采用<p>正文</p>的样式(这个应该是zblog程序内部设定好的,在模板代码中是是看不到的),所以正确的位置应该是:
.erx-article .t2 p{margin:12px 0;font-family:"fzxiukai" !important;}
6)保存,修改结束!
两个提醒点:
6.1)php文件全部修改好之后,在后台切换一下主题,再重新切换该主题,更新一下缓存,防止修改看不见效果;
6.2)css文件修改是即时的,但是如果看不到效果,用ctrl+F5强制刷新就可以了。
6.3)选择的ttf文件最好不要太大,英文的无所谓,体积都小,主要是中文字体体积太大;太大的更新就会缓慢,效果不能即时出来;
6.4)如果一直不显示,查看浏览器是否强制使用了字体显示扩展或者插件,一直也没搞明白扩展或者本地css定义与网页上定义 !impartant 话,到底谁的优先级高?
6.5)移动端未必显示正常;还没有研究透,应该css中针对安卓和ios有相应的代码;
7)演示选用了秀楷字体;第一次估计服务器需要下载文件到本地缓存,所以应该第一次浏览效果稍微延迟!