Joomla空白模板

最新推荐文章于 2021-07-16 11:48:30 发布

yizhifrankluo

最新推荐文章于 2021-07-16 11:48:30 发布

阅读量1.4k

点赞数

分类专栏： Joomla

本文链接：https://blog.csdn.net/yizhifrankluo/article/details/9274635

版权

Joomla 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

一、關于blank.vc網站

這是空白模闆的官方網站，地址是：http://blank.vc

你可以在官網免費下載該模闆。
也可以浏覽模闆的快速使用指南和視頻（比較簡短）。
也可以付費購買他們的電子書教程，教程主要針對模闆的使用開發還有模闆集成的Modernizr、Twitter Bootstrap和PIE的使用，教程的費用大概1百多塊人民币。

二、空白模闆的優點

兼容joomla 2.5和joomla 3.0版本
幹淨，沒有多餘代碼，适合用于模闆開發
css壓縮功能，加快載入速度（JS可減少http請求次數，但不進行代碼壓縮）
提供Modernizr / PIE / Twitter Bootstrap 這三項可選的增強功能
适合開發多平台兼容的網站

三、空白模闆的安裝使用

1、到網站下載最新版本的空白模闆。

到網站首頁即可下載，得到的是模闆安裝包，可以直接安裝使用；當然，一般情況下還是建議先進行修改訂制成自己的安裝包再進行安裝，這樣你開發多個網站的時候，就可以使用自己的空白模闆安裝包。

2、解壓模闆文件夾，修改文件。

2.1 修改 templateDetails.xml 文件内容

<name>templatename</name><!--輸入你的模闆文件名-->
<creationDate>xxxx-xx-xx</creationDate><!-- 輸入你的模闆創建時間 -->
<author>your name</author><!-- 你的名字  -->
<copyright>Copyright © xxxx example.com</copyright><!-- 版權所屬 -->
<authorEmail>
 your.name@example.com</authorEmail><!-- 你的電子郵箱地址  -->
<authorUrl>http://www.example.com</authorUrl><!-- 你的網站、博客地址 -->
<version>1.0.0</version><!-- 你的模闆版本号 -->
<description><![CDATA[ 
 <h1>你的模闆名稱</h1>
 <p><img src="/../templates/templatename/template_preview.png" /></p>
 <p>你可以插入一張圖片，當然你也可以将其去掉</p>
 <h2>Module positions</h2>
 <ol>
 <li>debug</li>
 </ol>
 <p>Created by <a href="http://www.example.com" target="_blank">your name | example.com</a>.</p>
 ]]></description><!-- 按需要修改描述内容，可以使用html語言标簽 -->
 
 <languages folder="language"><!-- 中文用戶可以按此修改 -->
 <language tag="zh-CN">zh-CN.tpl_你的模闆名稱（當然你不要使用中文命名）.ini</language>
 <language tag="en-GB">en-GB.tpl_templatename.ini</language>
 </languages>

2.2 修改語言文件 language/de-DE.tpl_templatename.ini

更改爲 language/zh-CN.tpl_templatename.ini ，然後翻譯其内容

TPL_TEMPLATENAME_PARAMETER_MODERNIZR_LABEL="Modernizr (14 KB)"
TPL_TEMPLATENAME_PARAMETER_MODERNIZR_DESC="允許載入modernizr.js腳本文件"
TPL_TEMPLATENAME_PARAMETER_MODERNIZR_DOC="<a href='http://modernizr.com/docs/' target='blank'>Modernizr 說明文檔</a>"
 
TPL_TEMPLATENAME_PARAMETER_BOOTSTRAP_LABEL="Twitter Bootstrap (211 KB)"
TPL_TEMPLATENAME_PARAMETER_BOOTSTRAP_DESC="啓用Twitter Bootstrap自适應模式"
TPL_TEMPLATENAME_PARAMETER_BOOTSTRAP_DOC="<a href='http://twitter.github.com/bootstrap/scaffolding.html' target='blank'>Bootstrap說明文檔</a>"
 
TPL_TEMPLATENAME_PARAMETER_PIE_LABEL="PIE (41 KB)"
TPL_TEMPLATENAME_PARAMETER_PIE_DESC="啓用PIE (CSS3 for IE 8+7)"
TPL_TEMPLATENAME_PARAMETER_PIE_DOC="<a href='http://css3pie.com/documentation/' target='blank'>PIE說明文檔</a>"

2.3 修改js/template.js.php文件

JS的一些參數設置部分，如果沒有特别需要，建議保留默認的

增加需要用到的JS文件，使用語句：

require('你的JS文件名稱');

前提是你已經把你的JS文件放置在模闆的JS文件夾内

當然你不想載入默認的JS文件，可以将下面語句注釋：

//require('../../../media/system/js/mootools-core.js'); 
//require('../../../media/system/js/core.js'); 
//require('../../../media/system/js/caption.js');

2.4 修改 template.css.php 文件

增加需要用到的css文件，使用語句：

require('你的css文件名稱');

前提是你已經把你的css文件放置在模闆的css文件夾内

如果不需要用到默認的CSS文件，可以将其注釋：

//require('../../../media/system/css/system.css');
//require('../../system/css/system.css');

//require('../../system/css/general.css');

template.css.php 和 template.js.php 文件的用法類似，一方面根據模闆參數的設定動态加載相關的文件；一方面可以減少http請求次數，加快載入速度的作用

2.5 修改index.php文件

如果你已經修改了template.js.php并注釋了caption.js的載入語句，你就需要進行此修改，否則沒必要做這步。

// unset scripts, put them into /js/template.js.php to minify http requests
unset($doc->_scripts[$this->baseurl.'/media/system/js/mootools-core.js']);
unset($doc->_scripts[$this->baseurl.'/media/system/js/core.js']);
unset($doc->_scripts[$this->baseurl.'/media/system/js/caption.js']);

在上面代碼的後面添加

// Remove the JCaption code from within the template using a Regular Expression
if (isset($this->_script['text/javascript']))
{
 $this->_script['text/javascript'] = preg_replace('%window\.addEvent\(\'load\',\s*function\(\)\s*{\s*new\s*JCaption\(\'img.caption\'\);\s*}\);\s*%', '', $this->_script['text/javascript']);
 if (empty($this->_script['text/javascript']))
 unset($this->_script['text/javascript']);
}

用正則表達式移除代碼

window.addEvent('load', function() {
 new JCaption('img.caption');
});

若安裝了k2，添加此代碼：

unset($this->_scripts[$this->baseurl.'/media/system/js/modal.js']);
unset($this->_scripts[$this->baseurl.'/media/k2/assets/js/k2.noconflict.js']);
unset($this->_scripts[$this->baseurl.'/components/com_k2/js/k2.js']);
unset($this->_styleSheets[$this->baseurl .'/media/system/css/modal.css']);

然後添加

if (isset($this->_script['text/javascript']))
{
 $this->_script['text/javascript'] = preg_replace('%\s*window\.addEvent\(\'domready\',\s*function\(\)\s*{\s*SqueezeBox([\s\S]*)\s*var\s*K2SitePath\s*\=\s*\'([\s\S]*)\/\';\s*%', '', $this->_script['text/javascript']);
 $this->_script['text/javascript'] = preg_replace('%\s*window\.addEvent\(\'load\',\s*function\(\)\s*{\s*new\s*JCaption\(\'img.caption\'\);\s*}\);\s*%', '', $this->_script['text/javascript']);
 if (empty($this->_script['text/javascript']))
 unset($this->_script['text/javascript']);
}

用正則表達式移除代碼

<script type="text/javascript">
 
 window.addEvent('domready', function() {
 
 SqueezeBox.initialize({});
 SqueezeBox.assign($$('a.modal'), {
 parse: 'rel'
 });
 });
var K2SitePath = '/peg2/';
window.addEvent('load', function() {
 new JCaption('img.caption');
 });
 </script>