theme.html

:::
XOOPS 新版佈景設計
6-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}>" />
    <!-- 佈景的主樣式 -->
    <link rel="stylesheet" type="text/css" media="all" title="Style sheet" href="<{xoImgUrl css/style.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">

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

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

      #container{
        margin: <{$margin_top}>px auto 0px auto;
      }

      #container_footer{
        background-color: <{$footer_bgcolor}>;
        <{$footer_style}>
      }
    </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>

    <!-- 導覽列 -->
    <div id="container_nav">
      <!--{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/menu/menu.html"}-->
      <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/navbar.html"}>
    </div>

    <!-- id 屬性 -->
    <div id="container">

      <div id="container_header">
        <div class="row-fluid">

          <div class="span5">
            <{if $logo_img}>
              <a href="<{$xoops_url}>"><img src="<{$logo_img}>" alt="<{$xoops_sitename}>"></a>
            <{else}>
              <h1><a href="<{$xoops_url}>"><{$xoops_sitename}></a></h1>
            <{/if}>
          </div>

          <div class="span7">
            <ul id="head_menu">
              <{foreach from=$topmenu item=tm}>
                <li><a href="<{$tm.url}>" target="<{$tm.target}>"><{$tm.name}></a></li>
              <{/foreach}>
            </ul>
          </div>

        </div>
      </div>


      <!--滑動圖片-->
      <div id="container_slide">
        <{includeq file="$xoops_rootpath/themes/$theme_name/xotpl/templatemo_slider.html"}>
      </div>

      <!--跑馬燈-->
      <{if $marquee}>
        <marquee style="background-color:black;color:yellow;padding:6px 0px;">
          <{$smarty.const.TF_MARQUEE_PREFIX}><{$marquee}>
        </marquee>
      <{/if}>

      <!--主內容區-->
      <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/$theme_type.html"}>

    </div>

    <div id="container_footer">
      <{$xoops_footer}>
    </div>


    <!-- 載入 BootStrap所需的javascript -->
    <script src="<{xoAppUrl modules/tadtools/bootstrap/js/bootstrap.min.js}>"></script>

    <!-- 載入自訂的javascript -->
    <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/my_js.html"}>

    <!-- 是否顯示樣板變數資訊 -->
    <{if $show_var==1}>
      <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/show_var.html"}>
    <{/if}>
  </body>
</html>
6. beauty_class 佈景素材及範例原始碼