編輯“Joomla/Joomla登錄模塊的DIY改造”

{{Joomla top}}
本條目主要介紹[[Joomla]]登錄模塊的一些個性化改造的簡單方法，注意，本文所談?wù)摰牡卿浤K修改指 Joomla! 1.0.13 版本的登錄模塊。

[[Image:Joomla login form.png]]

==具體步驟==
實(shí)際上登錄模塊在前臺顯示只占很小一塊地方。它的所有外觀布局都包含在 /modules/mod_login.php 文件中。因此，我們調(diào)整登錄模塊的所有操作實(shí)際上是對此文件的修改。打開  /modules/mod_login.php ，可以看到，從第 80 行以 <nowiki><table></nowiki> 標(biāo)記開始就是登錄模塊的前臺布局了。

[[Image:Joomla login form 1.png]]

我們看懂這些[[代碼]]，就可以自己來動手修改（Hacking）了。

首先，<table> 標(biāo)記提示這是通過“表格”來控制的布局；<tr> 表示表格中換行；<td>表示單元格，包含在同一個 <tr></tr> 標(biāo)記內(nèi)的<td>標(biāo)記表示表格中在同一行顯示的并列單元格；<br /> 標(biāo)記表示換行；<label> 標(biāo)記表示此處將顯示文字，而這個文字的定義取自網(wǎng)站當(dāng)前使用的語言文件；<?php echo_ 開頭的代碼表示這是提取語言文件中字串；<input> 標(biāo)記提示這里是輸入框或者按鈕，其類型根據(jù)該元素的 type 屬性來判斷；<a> 標(biāo)記代表一個超級鏈接。如果懂得 [[HTML]] 語言，那么這些一眼就能看懂。

例如，下面這段代碼代表的就是登錄模塊上“用戶名：”這個字串：
<pre><label for="mod_login_username">
    <?php echo _USERNAME; ?>
   </label></pre>
如果將這一段代碼刪除或者注釋掉（[[comment out]]），則前臺就不會顯示“用戶名：”這個字串。

同理，如果將這段代碼后面的 <br /> 標(biāo)記刪除或者屏蔽，那么前臺的用戶名輸入框就會直接跟在“用戶名：”后面而不是顯示在下一行。

假如你對照前臺猜測一下，很快就知道這些代碼所表示的內(nèi)容：

[[Image:Joomla login form 2.jpg]]

就這么簡單。如果你想改變布局，可以對表格中的換行標(biāo)記（<br /> 及<tr></tr>）作以修改，就能實(shí)現(xiàn)“用戶名輸入框與用戶名三個字在同一行”或者“所有項(xiàng)目都在同一行顯示”的效果。

或許，有些用戶提出更進(jìn)一步的需求：能否將“注冊”及“登錄”按鈕顯示為圖片？當(dāng)然可以。

請制作好分別用于“注冊”和“登錄”的按鈕圖片，例如名稱為 register.png 和 login.png，放置于網(wǎng)站當(dāng)前模板的 images 目錄下。

==“注冊”按鈕的修改==
將 <?php echo _CREATE_ACCOUNT; ?> 這段代碼替換為：
<pre>
<?php echo '<img src="'.$mosConfig_live_site. '/templates/' .$GLOBALS['cur_template']. '/images/register.png" alt="Join Us" />'; ?>
</pre>
這段代碼即可。 如果你的圖片名稱不是 register.png，位置也不是當(dāng)前模板的 images 目錄，那么請根據(jù)實(shí)際情況修改上述代碼。

例如，你可能使用了名為 regnew.jpg 圖片，并放置在網(wǎng)站的 /images/button/ 目錄下，那么上述代碼就必須變?yōu)椋? <?php echo '<img src="'.$mosConfig_live_site. '/images/button/regnew.jpg" alt="Join Us" />'; ?>

==修改“登錄”按鈕==
原本的“登錄”按鈕就是一個 <input> 元素，因此我們必須從這里入手。首先將其 type 從 submit 修改為 image，然后插入圖片鏈接即可。即：

將 <input type="submit" name="Submit" class="button" value="<?php echo _BUTTON_LOGIN; ?>" /> 這段代碼修改為：
<pre><?php echo '<input type="image" src="'.$mosConfig_live_site.'/templates/'.$GLOBALS['cur_template'].'/images/login.png" name="Submit" 
class="button" height="" width="" border="0" />'; ?>
</pre>
如果圖片名稱和位置與本例不同，可根據(jù)前面的變通方法修改。

如果你還需要給登錄模塊增加特定的背景圖片，如本文一開始展示的那種圓角圖片，那么就需要修改 mod_login.php 文件中有關(guān) <table> 或者 <td> 標(biāo)記，給其增加背景圖片屬性。如果修改不夠方便，可以將 <table> 用 <div> 重新編寫，用不同 ID 來區(qū)分多個 <div>，然后在模板文件的 css/template_css.css 文件中指定每一個<div> 的背景圖片。

==參考來源==
http://www.joomlagate.com/article/joomla10-tutorial/diy-joomla-login-form-for-vertical-or-horizontal-module-layout/

{{Joomla 1.0}}

[[category:Joomla|J]]