Joomla 常用模塊 - 自定義HTML模塊

在這一節(jié)中，我們將介紹如何建立自定義HTML模塊。

什么是自定義模塊？

自定義模塊就是您使用可編輯器來創(chuàng)建您自己的HTML模塊。你可以輸入文字，鏈接，或者直接復(fù)制其他網(wǎng)站的源碼，這些內(nèi)容將作為joomla的一個模塊輸出到頁面指定的位置

如何建立自定義模塊

1、選擇擴(kuò)展下的模塊管理，進(jìn)入模塊管理界面，點(diǎn)擊新建，找到自定義模塊，如圖

2、點(diǎn)擊自定義模塊，進(jìn)入編輯自定義的界面，如圖

3、編輯自定義模塊，如圖

• 下面是我們提供用來演示的自定義模塊的代碼，只需復(fù)制粘貼就可以實(shí)現(xiàn)相同的效果了（注意了：在粘貼代碼的時候，先點(diǎn)擊編輯器的右下方的“切換編輯器”才能粘貼）。
• 自定義模塊你可隨意布局你想要的效果，不受限制。

<div class="page-header"><form action="" method="post">
<div class="row-fluid">
<div class="span12">
<ul class="nav nav-tabs">
<li class="active"><a href="#status" data-toggle="tab">實(shí)例</a></li>
<li class=""><a href="#photo" data-toggle="tab">描述</a></li>
<li class=""><a href="#video" data-toggle="tab">如何使用</a></li>
</ul>
<div class="tab-content">
<div id="status" class="tab-pane active">
<h3>效果顯示</h3>
<div class="well"><img src="/images/joomla_black.png" alt="" /></div>
</div>
<div id="photo" class="tab-pane">
<div class="well">
<h3>主要特點(diǎn)</h3>
<ul class="index">
<li><a href="#examples">支持J25,J3x</a></li>
<li><a href="#galleries">高度定制化</a></li>
<li><a href="#inline-content">二維碼網(wǎng)址</a></li>
<li><a href="#lorem-ipsum">自定義QQ號</a></li>
<li><a href="#header-level-2">自定義標(biāo)簽</a></li>
<li><a href="#groups">自定義地址信息</a></li>
<li><a href="#menu">多種風(fēng)格，隨心設(shè)置</a></li>
<li><a href="#size">持續(xù)更新，提供技術(shù)支持</a></li>
<li><a href="#simple-modals">操作簡便，一鍵即可集成QQ在線客服</a></li>
</ul>
</div>
</div>
<div id="video" class="tab-pane">
<h3 class="page-header">如何安裝？</h3>
<p>下載完成后登錄網(wǎng)站的后臺通過 <code>{擴(kuò)展管理}</code>上傳安裝包，點(diǎn)擊<code>{安裝}</code>即可安裝成功。在到 <code>{模塊管理}</code>中找到該模塊進(jìn)行 <code>{發(fā)布}</code>填寫 <code>{模塊的位置}</code>以及菜單頁面分布，就可以在前臺顯示</p>
<p> </p>
<h3 class="page-header">關(guān)于模塊參數(shù)的設(shè)置</h3>
<h4>在線QQ說明：</h4>
<pre>寫入QQ號于名稱，每一組用;號隔開</pre>
<h4>附件信息說明：</h4>
<pre>可寫入公司電話、傳真、郵箱等，注意用;號隔開</pre>
<h4>QQ默認(rèn)標(biāo)簽說明：</h4>
<pre>QQ號碼沒有名稱，這里可以寫一個默認(rèn)的名稱</pre>
<h4>模塊風(fēng)格說明：</h4>
<pre>這里可以切換不同的風(fēng)格，風(fēng)格有“白色風(fēng)格”   “藍(lán)色風(fēng)格”，可預(yù)覽效果</pre>
<div class="well"><img src="/images/powered_by.png" alt="" /></div>
</div>
</div>
</div>
</div> 

</form></div> 

4、查看前臺的效果，如圖