XOOPS 的轉向頁面

睡蓮 標籤
XOOPS

　　System 樣板檔中的 system_redirect.html 是 XOOPS 常會用到的跳轉頁面，當網站換上漂亮的佈景主題後，跳轉頁面依然沿用舊樣式，與新佈景的格調顯得不同，可試試動手在新佈景下為跳轉頁加入新樣式。

刪除語法

　　先在 /modules/system/templates/system_redirect.html 檔內刪除一段語法，以下為 XOOPS 2.0.* 版的 system_redirect.html 檔代碼內容，XOOPS 2.3 ─ 2.3.2b版也通用，差別在於首行多了 DOCTYPE ，其他的與 XOOPS 2.0.* 版沒有差別。

　　將如下橘色部分語法刪除：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<{$xoops_charset}>" />
<meta http-equiv="Refresh" content="<{$time}>; url=<{$url}>" />
<title><{$xoops_sitename}></title>
<link rel="stylesheet" type="text/css" media="all" href="<{$xoops_themecss}>" />
</head>
<body>
<div style="text-align:center; background-color: #EBEBEB; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight : bold;">
  <h4><{$message}></h4>
  <p><{$lang_ifnotreload}></p>
</div>
<{if $xoops_logdump != ''}><div><{$xoops_logdump}></div><{/if}>
</body>
</html>

　　然後在<html>中插入 id="redirect" ，儲存檔案後就可以到 theme 資料夾下所用的佈景主題中加入新樣式。

<html id="redirect">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<{$xoops_charset}>" />
<meta http-equiv="Refresh" content="<{$time}>; url=<{$url}>" />
<title><{$xoops_sitename}></title>
<link rel="stylesheet" type="text/css" media="all" href="<{$xoops_themecss}>" />
</head>
<body>
<div>
  <h4><{$message}></h4>
  <p><{$lang_ifnotreload}></p>
</div>
<{if $xoops_logdump != ''}><div><{$xoops_logdump}></div><{/if}>
</body>
</html>

範例演示

　　先從下表的示例中，按背景圖選擇合適的舖排方式，複製語法加入至佈景主題的 css 檔中：

背景圖鋪排方式範例演示素材來源語法
全局repeat 1水澄ましの歌
repeat 2Studio Blue Moon
水平x1Salon de Ruby
x2水澄ましの歌
x3水澄ましの歌
垂直yStudio Blue Moon
無img1Salon de Ruby
img2除了置中圖標來自官方及經去背處理外，其餘皆來自池水間

語法

 全局鋪排 - repeat 1  [返回列表]
在style.css裡的最後一行加入如下 
/*---------------- system_redirect.html ----------------*/
#redirect body{
     margin:0;
     background:url(images/圖檔名稱);
     text-align:center;
}
#redirect div{
     margin:150px auto; 
     padding:70px 20px;
     width:50%;
     background:#fff; 
     opacity:0.65; 
     outline:4px double #fff;
}
#redirect h4, #redirect p{color:#000; } 
#redirect a{font-weight:bold;text-decoration:none;color:#0f42a6}
#redirect a{color:#000}
/*--------------------------- end ---------------------------*/
▲ 灰碼：語法可選，不加入則文字和連結使用佈景主題顏色。
theme.html下，在 </head> 之前加入如下 
<!--[if IE]>
<style type="text/css">
/*<![CDATA[*/
#redirect div{
     filter:alpha(opacity=65);
     border:4px double #fff; 
}
/*]]>*/
</style>
<![endif]-->
 全局鋪排 - repeat 2  [返回列表]
在style.css裡最後一行加入如下 
/*---------------- system_redirect.html ----------------*/
#redirect body{
     margin:0;
     background:url(images/圖檔名稱); 
     text-align:center;
}
#redirect div{
     margin:150px auto; 
     padding:50px 20px;
     width:50%;
     background:#b689a0; 
     opacity:0.75; 
     outline:4px double #b689a0;
}
#redirect h4, #redirect p{color:#fff; } 
#redirect a{font-weight:bold;text-decoration:none;color:#3e1229}
#redirect a{color:#fff}
/*--------------------------- end ---------------------------*/
▲ 灰碼：語法可選，不加入則文字和連結使用佈景主題顏色。
theme.html下，在 </head> 之前加入如下 
<!--[if IE]>
<style type="text/css">
/*<![CDATA[*/
#redirect div{
     filter:alpha(opacity=75);
     border:3px double #b689a0; 
}
/*]]>*/
</style>
<![endif]-->
 水平鋪排 - x1  [返回列表]
在style.css裡最後一行加入如下 
/*---------------- system_redirect.html ----------------*/
#redirect{overflow:hidden}
#redirect body{
     margin:0;
     background:#000 url(images/圖檔名稱) repeat-x;
     text-align:center;
     padding-top:190px;
}
#redirect div{
     margin:0;
     width:100%;
     height:300px;
     overflow:auto;
}
#redirect h4, #redirect p{color:#fff; } 
#redirect a{font-weight:bold;text-decoration:none;color:#658ef8}
#redirect a:hover{color:#fff}
/*--------------------------- end ---------------------------*/
▲ 灰碼：語法可選，不加入則文字和連結使用佈景主題顏色。
theme.html下，在 </head> 之前加入如下 
<!--[if IE]>
<style type="text/css">
/*<![CDATA[*/
#redirect{
scrollbar-face-color:#000;
scrollbar-highlight-color: #658ef8;
scrollbar-3dlight-color: #000;
scrollbar-darkshadow-color: #658ef8;
scrollbar-shadow-color: #000;
scrollbar-arrow-color:#658ef8;
scrollbar-track-color:#000;
}
/*]]>*/
</style>
<![endif]-->
 水平鋪排 - x2  [返回列表]
在style.css裡最後一行加入如下 
/*---------------- system_redirect.html ----------------*/
#redirect{overflow:hidden}
#redirect body{
     margin:0;
     background:#fff url(images/圖檔名稱) fixed repeat-x;
     text-align:center;
     height:599px;
     overflow:hidden;
}
#redirect div{
     margin:220px auto 160px;
     width:60%;
     height:220px;
     overflow:auto;
}
#redirect h4, #redirect p{color:#3a3a3a; } 
#redirect a{font-weight:bold;text-decoration:none;color:#384d76}
#redirect a:hover{color:#3a3a3a}
/*--------------------------- end ---------------------------*/
▲ 灰碼：語法可選，不加入則文字和連結使用佈景主題顏色。
theme.html下，在 </head> 之前加入如下 
<!--[if IE]>
<style type="text/css">
/*<![CDATA[*/
#redirect div{
scrollbar-face-color:#fffffe;
scrollbar-highlight-color: #8a95ab;
scrollbar-3dlight-color: #fffffe;
scrollbar-darkshadow-color: #8a95ab;
scrollbar-shadow-color: #fffffe;
scrollbar-arrow-color:#fffffe;
scrollbar-track-color:#fffffe;
filter:chroma(color=#fffffe);
}
/*]]>*/
</style>
<![endif]-->
 水平鋪排 - x3  [返回列表]
在style.css裡最後一行加入如下 
/*---------------- system_redirect.html ----------------*/
#redirect body{
     margin:0;
     background:#000 url(images/圖檔名稱) fixed repeat-x;
     text-align:center;
}
#redirect div{margin:80px auto}
#redirect h4, #redirect p{color:#fff; } 
#redirect a{font-weight:bold;text-decoration:none;color:#f8dcb1}
#redirect a:hover{color:#fff}
/*--------------------------- end ---------------------------*/
▲ 灰碼：語法可選，不加入則文字和連結使用佈景主題顏色。
 垂直鋪排 - y  [返回列表]
在style.css裡最後一行加入如下 
/*---------------- system_redirect.html ----------------*/
#redirect body{
     margin:0;
     background:#f4a7a4 url(images/圖檔名稱) fixed repeat-y 50% 0;
     text-align:center;
}
#redirect div{
     margin:0 auto;
     padding:180px 0;
     width:680px;
}
#redirect h4, #redirect p{color:#c46360; } 
#redirect a{font-weight:bold;text-decoration:none;color:#a03f3c}
#redirect a:hover{color:#c46360}
/*--------------------------- end ---------------------------*/
▲ 灰碼：語法可選，不加入則文字和連結使用佈景主題顏色。
 無鋪排 - img 1  [返回列表]
在style.css裡最後一行加入如下 
/*---------------- system_redirect.html ----------------*/
#redirect body{
     margin:0;
     background:#fff url(images/圖檔名稱) fixed no-repeat; 
     text-align:center;
     padding-left:383px;
}
#redirect div{margin:150px auto}
#redirect h4, #redirect p{color:#50463d; } 
#redirect a{font-weight:bold;text-decoration:none;color:#bf7a90}
#redirect a:hover{color:#50463d}
/*--------------------------- end ---------------------------*/
▲ 灰碼：語法可選，不加入則文字和連結使用佈景主題顏色。
 無鋪排 - img 2  [返回列表]
在style.css裡最後一行加入如下 
/*---------------- system_redirect.html ----------------*/
#redirect{overflow:hidden}
#redirect body{
     margin:0;
     background:#fff url(images/圖檔名稱) fixed no-repeat right bottom;
     text-align:center;

}
#msg-block{
     overflow:hidden;
     background:url(images/xoops-ribbon.png) no-repeat 0 0;
     width:100%;
     overflow:hidden;
}
#msg-block div{
     margin:6% auto 250px;
     padding:60px 20px 20px;
     background:url(images/xoops-icon.png) no-repeat 50% 13px;
     width:45%;
     overflow:auto;
     max-height:170px;
     color:#002563; 
}
#redirect h4, #redirect p{color:#002563; } 
#redirect a{font-weight:bold;text-decoration:none;color:#2a6cc5}
#redirect a:hover{color:#002563}
/*--------------------------- end ---------------------------*/
▲ 灰碼：語法可選，不加入則文字和連結使用佈景主題顏色。
theme.html下，在 </head> 之前加入如下 
<!--[if IE]>
<style type="text/css">
/*<![CDATA[*/
#redirect div{
scrollbar-face-color:#ffffff;
scrollbar-highlight-color: #3281c4;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color: #3281c4;
scrollbar-shadow-color: #ffffff;
scrollbar-arrow-color:#ffffff;
scrollbar-track-color:#ffffff;
padding:80px 20px 50px;
height:140px;
}
/*]]>*/
</style>
<![endif]-->
在/modules/system/system_redirect.html 內加入 
<body>
<div id="msg-block">
<div>
  <h4><{$message}></h4>
  <p><{$lang_ifnotreload}></p>
</div>
<{if $xoops_logdump != ''}><div><{$xoops_logdump}></div><{/if}>
</div>
</body>
</html>

圖片預載

　　加入語法後，如發現在進入轉向頁面時背景圖或圖片有顯示延遲的現象，就繼續下一步，在theme.html裡加上一段預先載入圖片的語法，本例只適合少量圖片的預載。

在theme.html裡的</body>之前加上：

<div id="imgloading"></div>

在 style.css 裡的 end 註解之前：

/*---------------- system_redirect.html ----------------*/
#imgloading{
     background-image:url(images/圖檔名稱);
     width:0;
     height:0;
}
/*--------------------------- end ---------------------------*/

如果要預載兩三幅圖片，在 theme 可以這樣：

<div id="imgloading">
<span id="loading1"></span>
<span id="loading2></span>
<span id="loading3></span>
</div>

於 style.css 中：

/*---------------- system_redirect.html ----------------*/
#imgloading{
     width:0;
     height:0;
}

#loading1{
     background-image:url(images/圖檔名稱1);
}
#loading2{
     background-image:url(images/圖檔名稱2);
}
#loading3{
     background-image:url(images/圖檔名稱3);
}
/*--------------------------- end ---------------------------*/

至此，整個步驟便完成。