From 9b0283e5586fb9cb1a1445944ba4aa49758b4709 Mon Sep 17 00:00:00 2001
From: = <2316683971@qq.com>
Date: Mon, 13 Dec 2021 18:07:33 +0800
Subject: [PATCH] add admin/_fragments.html,admin/index.html

---
 .idea/workspace.xml                           |  14 +-
 .../resources/templates/admin/_fragments.html | 103 ++++++++++++++
 .../templates/admin/blogs-input.html          |   4 +-
 src/main/resources/templates/admin/index.html | 127 ++++++++++++++++++
 src/main/resources/templates/admin/login.html |   4 +-
 5 files changed, 241 insertions(+), 11 deletions(-)
 create mode 100644 src/main/resources/templates/admin/_fragments.html
 create mode 100644 src/main/resources/templates/admin/index.html

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index b82b580..703d34b 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,7 +6,7 @@
   <component name="ChangeListManager">
     <list default="true" id="1d93f524-563e-42bd-b355-1d8074b258eb" name="Default Changelist" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/main/resources/templates/admin/login.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/templates/admin/login.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/main/resources/templates/admin/blogs-input.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/templates/admin/blogs-input.html" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -67,7 +67,7 @@
       <recent name="com.xiaxinyu.myblog" />
     </key>
   </component>
-  <component name="RunManager" selected="JavaScript Debug.login.html">
+  <component name="RunManager" selected="JavaScript Debug.index.html">
     <configuration default="true" type="ArquillianTestNG" factoryName="" nameIsGenerated="true">
       <option name="arquillianRunConfiguration">
         <value>
@@ -81,15 +81,15 @@
         <option name="Make" enabled="true" />
       </method>
     </configuration>
-    <configuration name="404.html" type="JavascriptDebugType" temporary="true" nameIsGenerated="true" uri="http://localhost:63342/demo/myblog/templates/error/404.html" useBuiltInWebServerPort="true">
-      <method v="2" />
-    </configuration>
     <configuration name="500.html" type="JavascriptDebugType" temporary="true" nameIsGenerated="true" uri="http://localhost:63342/demo/myblog/templates/error/500.html" useBuiltInWebServerPort="true">
       <method v="2" />
     </configuration>
     <configuration name="error.html" type="JavascriptDebugType" temporary="true" nameIsGenerated="true" uri="http://localhost:63342/demo/myblog/templates/error/error.html" useBuiltInWebServerPort="true">
       <method v="2" />
     </configuration>
+    <configuration name="index.html" type="JavascriptDebugType" temporary="true" nameIsGenerated="true" uri="http://localhost:63342/demo/myblog/templates/admin/index.html" useBuiltInWebServerPort="true">
+      <method v="2" />
+    </configuration>
     <configuration name="login.html" type="JavascriptDebugType" temporary="true" nameIsGenerated="true" uri="http://localhost:63342/demo/myblog/templates/admin/login.html" useBuiltInWebServerPort="true">
       <method v="2" />
     </configuration>
@@ -115,11 +115,11 @@
     </configuration>
     <recent_temporary>
       <list>
+        <item itemvalue="JavaScript Debug.index.html" />
         <item itemvalue="JavaScript Debug.login.html" />
         <item itemvalue="Spring Boot.MyBlogApplication" />
         <item itemvalue="JavaScript Debug.error.html" />
         <item itemvalue="JavaScript Debug.500.html" />
-        <item itemvalue="JavaScript Debug.404.html" />
       </list>
     </recent_temporary>
   </component>
@@ -134,7 +134,7 @@
       <workItem from="1639302887760" duration="53000" />
       <workItem from="1639302992811" duration="3748000" />
       <workItem from="1639310656222" duration="10721000" />
-      <workItem from="1639387852965" duration="863000" />
+      <workItem from="1639387852965" duration="1818000" />
     </task>
     <servers />
   </component>
diff --git a/src/main/resources/templates/admin/_fragments.html b/src/main/resources/templates/admin/_fragments.html
new file mode 100644
index 0000000..e446975
--- /dev/null
+++ b/src/main/resources/templates/admin/_fragments.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
+<head th:fragment="head(title)">
+    <meta charset="UTF-8">
+    <!--    设置移动端预览-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title th:replace="${title}">博客</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
+    <link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
+    <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
+    <link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
+    <link rel="stylesheet" href="../static/lib/tocbot.css" th:href="@{/lib/tobot/tobot.css}">
+    <!--必须在引入typo之后再引入prism，否则代码高亮不能正确显示-->
+    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
+</head>
+<body>
+
+<!--导航栏-->
+<nav th:fragment="menu(n)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
+    <!--        attached 去除圆角-->
+    <!--        inverted 颜色反转-->
+    <div class="ui container">
+        <div class="ui inverted secondary stackable menu">
+            <!--stackable使组件变成可堆叠的-->
+            <!--使用secondary去掉竖线-->
+            <h2 class="ui teal header item">博客后台</h2>
+            <a href="#" class="active m-item item m-mobile-hide" th:classappend="${n==1} ? 'active'"><i class="home icon"></i>博客</a>
+            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==2} ? 'active'"><i class="idea icon"></i>分类</a>
+            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==3} ? 'active'"><i class="tags icon"></i>标签</a>
+            <div class="right m-item m-mobile-hide menu">
+                <div class="ui dropdown item">
+                    <div class="text">
+                        <img src="../../static/images/avatar.png" alt="" class="ui avatar image">
+                        小夏
+                    </div>
+                    <i class="dropdown icon"></i>
+                    <div class="menu">
+                        <a href="#" class="item">注销</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!--使用container的目的是不让My Blog的位置过于靠前-->
+    </div>
+    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
+        <i class="sidebar icon"></i>
+    </a>
+</nav>
+
+    <!--底部footer-->
+    <footer th:fragment="footer" class="ui inverted attached segment m-padded-tb-massive">
+        <div class="ui center aligned container">
+            <!-- center aligned使container内的内容居中 -->
+            <div class="ui inverted divided stackable grid">
+                <!-- ui grid 将宽度分成16份 -->
+                <div class="three wide column">
+                    <div class="ui inverted link list">
+                        <div class="item">
+                            <img src="../static//images/wechat.png" th:src="@{/images/wechat.png}" class="ui rounded image" alt="" style="width: 100px">
+                        </div>
+                    </div>
+                    <!-- ui rounded image使图片变成圆角 -->
+                </div>
+                <div class="three wide column">
+                    <h4 class="ui inverted header">最新博客</h4>
+                    <div class="ui inverted link list">
+                        <a href="#" class="item">用户故事(User Story)</a>
+                        <a href="#" class="item">用户故事(User Story)</a>
+                        <a href="#" class="item">用户故事(User Story)</a>
+                    </div>
+                </div>
+                <div class="three wide column">
+                    <h4 class="ui inverted header">联系我</h4>
+                    <div class="ui inverted link list">
+                        <a href="#" class="item">Email: xiaxinyuxy@163.com</a>
+                        <a href="#" class="item">QQ: 2316683971</a>
+                    </div>
+                </div>
+                <div class="seven wide column">
+                    <h4 class="ui inverted header">My blog</h4>
+                    <p class="m-opacity-mini">小夏的第一个Springboot入门项目</p>
+                </div>
+            </div>
+            <!--画分割线-->
+            <div class="ui inverted section divider"></div>
+            <p class="m-text-thin m-text-spaced">有道无术术可求，有术无道止于术</p>
+        </div>
+
+    </footer>
+
+<th:block th:fragment="script">
+    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
+    <!--scrollTo依赖jquery，所以必须先引入jaquery-->
+    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
+    <script src="../static/lib/waypoints/jquery.waypoints.min.js" th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
+    <script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
+    <script src="../static/lib/tocbot/tocbot.js" th:src="@{/lib/tocbot/tocbot.js}"></script>
+    <script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script>
+</th:block>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/admin/blogs-input.html b/src/main/resources/templates/admin/blogs-input.html
index bc7e2da..7092477 100644
--- a/src/main/resources/templates/admin/blogs-input.html
+++ b/src/main/resources/templates/admin/blogs-input.html
@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>博客发布</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
-    <link rel="stylesheet" href="../../static/lib/lib/editormd/css/editormd.min.css">
-    <link rel="stylesheet" href="../../static/css/css/me.css">
+    <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css">
+    <link rel="stylesheet" href="../../static/css/me.css">
 </head>
 <body>
 
diff --git a/src/main/resources/templates/admin/index.html b/src/main/resources/templates/admin/index.html
new file mode 100644
index 0000000..bc4ee26
--- /dev/null
+++ b/src/main/resources/templates/admin/index.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
+<head th:replace="admin/_fragments :: head(~{::title})">
+    <meta charset="UTF-8">
+    <!--    设置移动端预览-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>博客管理</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
+    <link rel="stylesheet" href="../../static/css/me.css">
+</head>
+<body>
+
+<!--导航栏-->
+<nav th:replace="admin/_fragments :: menu(0)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
+    <!--        attached 去除圆角-->
+    <!--        inverted 颜色反转-->
+    <div class="ui container">
+        <div class="ui inverted secondary stackable menu">
+            <!--stackable使组件变成可堆叠的-->
+            <!--使用secondary去掉竖线-->
+            <h2 class="ui teal header item">博客后台</h2>
+            <a href="#" class="active m-item item m-mobile-hide"><i class="home icon"></i>博客</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
+            <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
+            <div class="right m-item m-mobile-hide menu">
+                <div class="ui dropdown item">
+                    <div class="text">
+                        <img src="../../static/images/avatar.png" alt="" class="ui avatar image">
+                        小夏
+                    </div>
+                    <i class="dropdown icon"></i>
+                    <div class="menu">
+                        <a href="#" class="item">注销</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!--使用container的目的是不让My Blog的位置过于靠前-->
+    </div>
+    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
+        <i class="sidebar icon"></i>
+    </a>
+</nav>
+
+<div class="ui attached pointing menu">
+    <div class="ui container">
+        <div class="right menu">
+            <a href="#" class="item">发布</a>
+            <a href="#" class="active item">列表</a>
+        </div>
+    </div>
+</div>
+
+<!--中间内容-->
+<div class="m-padded-tb-big">
+    <div class="ui container">
+        <div class="ui success large message ">
+            <h3>Hi !</h3>
+            <p>小夏，欢迎登录</p>
+        </div>
+        <img src="https://s1.ax1x.com/2021/12/10/o52D1O.jpg" alt="" class="ui rounded bordered fluid image">
+    </div>
+</div>
+
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+
+<!--底部footer-->
+<footer th:replace="admin/_fragments :: footer" class="ui inverted attached segment m-padded-tb-massive">
+    <div class="ui center aligned container">
+        <!-- center aligned使container内的内容居中 -->
+        <div class="ui inverted divided stackable grid">
+            <!-- ui grid 将宽度分成16份 -->
+            <div class="three wide column">
+                <div class="ui inverted link list">
+                    <div class="item">
+                        <img src="../../static/images/wechat.png" class="ui rounded image" alt="" style="width: 100px">
+                    </div>
+                </div>
+                <!-- ui rounded image使图片变成圆角 -->
+            </div>
+            <div class="three wide column">
+                <h4 class="ui inverted header">最新博客</h4>
+                <div class="ui inverted link list">
+                    <a href="#" class="item">用户故事(User Story)</a>
+                    <a href="#" class="item">用户故事(User Story)</a>
+                    <a href="#" class="item">用户故事(User Story)</a>
+                </div>
+            </div>
+            <div class="three wide column">
+                <h4 class="ui inverted header">联系我</h4>
+                <div class="ui inverted link list">
+                    <a href="#" class="item">Email: xiaxinyuxy@163.com</a>
+                    <a href="#" class="item">QQ: 2316683971</a>
+                </div>
+            </div>
+            <div class="seven wide column">
+                <h4 class="ui inverted header">My blog</h4>
+                <p class="m-opacity-mini">小夏的第一个Springboot入门项目</p>
+            </div>
+        </div>
+        <!--画分割线-->
+        <div class="ui inverted section divider"></div>
+        <p class="m-text-thin m-text-spaced">有道无术术可求，有术无道止于术</p>
+    </div>
+
+</footer>
+
+<!--/*/<th:block th:replace="_fragments :: script">/*/-->
+<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
+<!--/*/</th:block>/*/-->
+
+<script>
+    $('.menu.toggle').click(function () {
+        $(".m-item").toggleClass('m-mobile-hide');
+    });
+    $('.ui.dropdown').dropdown();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/admin/login.html b/src/main/resources/templates/admin/login.html
index 191af91..aeba920 100644
--- a/src/main/resources/templates/admin/login.html
+++ b/src/main/resources/templates/admin/login.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
-<html lang="en">
-<head>
+<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
+<head th:replace="admin/_fragments :: head(~{::title})">
     <meta charset="UTF-8">
     <!--    设置移动端预览-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0">