theme.html

:::
四小時佈景開發
2-3-1 theme.html

<!DOCTYPE html>
<html lang="<{$xoops_langcode}>">
  <head>
    <!--將目前的資料夾名稱，設定為樣板標籤變數 theme_name-->
    <{assign var=theme_name value=$xoTheme->folderName}>

    <!--載入由使用者設定的各項佈景變數-->
    <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/get_var.html"}>
    <!-- 設定網站文字編碼 -->
    <meta charset="<{$xoops_charset}>">
    <!-- 套用XOOPS中的網頁索引規則 -->
    <meta name="robots" content="<{$xoops_meta_robots}>" />
    <!-- 套用XOOPS中的網站關鍵字設定 -->
    <meta name="keywords" content="<{$xoops_meta_keywords}>" />
    <!-- 套用XOOPS中的網站描述設定 -->
    <meta name="description" content="<{$xoops_meta_description}>" />
    <!-- 套用XOOPS中的網頁分級設定 -->
    <meta name="rating" content="<{$xoops_meta_rating}>" />
    <!-- 套用XOOPS中的網站作者設定 -->
    <meta name="author" content="<{$xoops_meta_author}>" />
    <!-- 套用XOOPS中的版權宣告 -->
    <meta name="copyright" content="<{$xoops_meta_copyright}>" />
    <!-- 網站的編輯工具 -->
    <meta name="generator" content="XOOPS" />

    <!-- 網站的標題及標語 -->
    <title><{$xoops_sitename}> - <{$xoops_pagetitle}></title>

    <!-- 網站的RSS連結，<{xoAppUrl}>代表網站網址 -->
    <link rel="alternate" type="application/rss+xml" title="" href="<{xoAppUrl backend.php}>" />

    <!-- 網站圖示設定 -->
    <link rel="shortcut icon" type="image/ico" href="<{xoImgUrl icons/favicon.ico}>" />
    <link rel="icon" type="image/png" href="<{xoImgUrl icons/favicon.png}>" />

    <!-- 網站所需的外部樣式檔，<{xoImgUrl}> 代表佈景路徑，通常是[http://網址/themes/佈景名稱] -->
    <!-- XOOPS本身內建的樣式 -->
    <link rel="stylesheet" type="text/css" media="all" title="Style sheet" href="<{xoAppUrl xoops.css}>" />
    <!-- XOOPS中會用到的一些樣式 -->
    <link rel="stylesheet" type="text/css" media="all" title="Style sheet" href="<{xoImgUrl css/xoops.css}>" />
    <!-- Bootstrap 樣式表-->
    <link href="<{xoAppUrl modules/tadtools/bootstrap/css/bootstrap.css}>" rel="stylesheet" media="screen">
    <!-- 佈景的主樣式 -->


    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Icons -->
    <link href="<{xoImgUrl scripts/icons/general/stylesheets/general_foundicons.css}>" media="screen" rel="stylesheet" type="text/css" />
    <link href="<{xoImgUrl scripts/icons/social/stylesheets/social_foundicons.css}>" media="screen" rel="stylesheet" type="text/css" />
    <!--[if lt IE 8]>
        <link href="<{xoImgUrl scripts/icons/general/stylesheets/general_foundicons_ie7.css}>" media="screen" rel="stylesheet" type="text/css" />
        <link href="<{xoImgUrl scripts/icons/social/stylesheets/social_foundicons_ie7.css}>" media="screen" rel="stylesheet" type="text/css" />
    <![endif]-->
    <link rel="stylesheet" href="<{xoImgUrl scripts/fontawesome/css/font-awesome.min.css}>">
    <!--[if IE 7]>
        <link rel="stylesheet" href="<{xoImgUrl scripts/fontawesome/css/font-awesome-ie7.min.css}>">
    <![endif]-->

    <link href="http://fonts.googleapis.com/css?family=Syncopate" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Abel" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Pontano+Sans" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet" type="text/css">

    <link href="<{xoImgUrl styles/custom.css}>" rel="stylesheet" type="text/css" />

    <!-- 給模組套用的樣板標籤 -->
    <{$xoops_module_header}>

    <!-- 局部套用的樣式，如果有載入完整樣式 theme_css.html 那就不需要這一部份 -->
    <style type="text/css">
      body{
        font-family:<{$font_family}>;
      }
      <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/theme_css_blocks.html"}>
      <!--{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/theme_css_navbar.html"}-->
    </style>

    <!-- 載入 jquery -->
    <script type='text/javascript'>
      if(typeof jQuery == 'undefined') {
      document.write("<script type='text/javascript' src='<{xoAppUrl modules/tadtools/jquery/jquery.js}>'><\/script>");
      }
    </script>
  </head>
<body id="pageBody">

<div id="divBoxed" class="container">

    <div class="transparent-bg" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;zoom: 1;"></div>

    <div class="divPanel notop nobottom">
            <div class="row-fluid">
                <div class="span12">

                    <div id="divLogo" class="pull-left">
                        <a href="index.html" id="divSiteTitle">網站標題</a><br />
                        <a href="index.html" id="divTagLine">Your Tag Line Here</a>
                    </div>

                    <div id="divMenuRight" class="pull-right">
                    導覽列
                    </div>

                </div>
            </div>

            <div class="row-fluid">
                <div class="span12">
                    <div id="contentInnerSeparator"></div>
                </div>
            </div>
    </div>

    <div class="contentArea">

        <div class="divPanel notop page-content">
            主內容區

            <div id="footerInnerSeparator"></div>
        </div>
    </div>

    <div id="footerOuterSeparator"></div>

    <div id="divFooter" class="footerArea">

        <div class="divPanel">
            頁尾區
        </div>
    </div>
</div>
<br /><br /><br />

<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="scripts/default.js" type="text/javascript"></script>





</body>
</html>
2-3 將 theme.html 套用共同樣板檔（30分鐘）