變更網頁版面

AlanJui · Apr 22, 2024 · 46598ab · 46598ab
1 parent da89691
commit 46598ab
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 27 deletions.
diff --git a/docs/_template.html b/docs/_template.html
@@ -2,22 +2,34 @@
 <html lang="zh-TW">
 
 <head>
-    <meta charset="UTF-8">
-    <!-- <title>{title}</title> -->
+    <meta charset="utf-8">
     <title>文章清單</title>
-    <meta charset="UTF-8">
-    <link rel="stylesheet" href="assets/styles/styles.css" />
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
+    <link href="./assets/styles/base.css" rel="stylesheet" media="all">
+    <link href="./assets/styles/main.css" rel="stylesheet" media="all">
 </head>
 
 <body>
-    <div style="text-align: center">
-        <img src="./assets/picts/king_tian.jpg" alt="四晝五經">
-        <h1>河洛話暢讀古文</h1>
-    </div>
-    <div id="articles">
-        {articles_placeholder}
+    <!-- 頁首 -->
+    <header id="header">
+        <div class="inner">
+            <img src="./assets/picts/king_tian.png" width="600" height="400" alt="四晝五經">
+            <h1>河洛話暢讀古文</h1>
+        </div>
+    </header><!-- /#header -->
+
+    <!-- 內容 -->
+    <div id="contents">
+        <!-- 主內容 -->
+        <main id="main">
+        </main><!-- /#main -->
+
+        <!-- 側邊選單 -->
+        <div id="articles">
+            {articles_placeholder}
+        </div>
     </div>
+
     <div>
         <p>
             為能正確顯示「注音符號」，請點擊以下連結，下載注音符號專用字型：
@@ -27,7 +39,8 @@ <h1>河洛話暢讀古文</h1>
             ，並於使用之電腦端安裝此字型。
         </p>
     </div>
-    <script src="./assets/javascripts/main.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    <script type="text/javascript" src="./assets/javascripts/main.js"></script>
 </body>
 
 </html>

diff --git a/docs/assets/picts/bg_header.png b/docs/assets/picts/bg_header.png
diff --git a/docs/index.html b/docs/index.html
@@ -3,14 +3,13 @@
 
 <head>
     <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
     <title>文章清單</title>
     <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
     <link href="./assets/styles/base.css" rel="stylesheet" media="all">
     <link href="./assets/styles/main.css" rel="stylesheet" media="all">
 </head>
 
-<body id="service" class="coding">
+<body>
     <!-- 頁首 -->
     <header id="header">
         <div class="inner">
@@ -19,12 +18,6 @@ <h1>河洛話暢讀古文</h1>
         </div>
     </header><!-- /#header -->
 
-    <!-- 主功能 -->
-    <nav id="gnav">
-        <ul class="inner">
-        </ul>
-    </nav> <!-- /#gnav -->
-
     <!-- 內容 -->
     <div id="contents">
         <!-- 主內容 -->
@@ -155,16 +148,18 @@ <h2 class="title">顏氏家訓【教子】</h2>
                     <li><a href="顏氏家訓【教子】_雙排注音.html">雙排注音</a></li>
                 </ul>
             </div>
-            </nav><!-- /#menu -->
-
-            <aside id="banner">
-            </aside><!-- /#banner -->
-
         </div><!-- /#sidebar -->
-
-        <!-- <p id="pagetop"><a href="#header">回到首面上方</a></p> -->
     </div><!-- /#contents -->
 
+    <div>
+        <p>
+            為能正確顯示「注音符號」，請點擊以下連結，下載注音符號專用字型：
+            <a href="https://github.com/cmex-30/Bopomofo_on_Web/tree/master/font/BopomofoRuby1909-v1-Regular.ttf">
+                BopomofoRuby1909-v1-Regular.ttf
+            </a>
+            ，並於使用之電腦端安裝此字型。
+        </p>
+    </div>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
     <script type="text/javascript" src="./assets/javascripts/main.js"></script>
 </body>