Skip to content

Commit

Permalink
add admin/_fragments.html,admin/index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@Xiaxinyuuu
Xiaxinyuuu committed Dec 13, 2021
1 parent 8ded61d commit 9b0283e
Show file tree
Hide file tree
Showing 5 changed files with 241 additions and 11 deletions.
14 changes: 7 additions & 7 deletions .idea/workspace.xml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

103 changes: 103 additions & 0 deletions src/main/resources/templates/admin/_fragments.html
View file
Original file line number Diff line number Diff line change
@@ -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/[email protected]/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: [email protected]</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/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.scrollTo.min.js"></script>
<!--scrollTo依赖jquery，所以必须先引入jaquery-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
4 changes: 2 additions & 2 deletions src/main/resources/templates/admin/blogs-input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/[email protected]/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>

Expand Down
127 changes: 127 additions & 0 deletions src/main/resources/templates/admin/index.html
View file
Original file line number Diff line number Diff line change
@@ -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/[email protected]/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: [email protected]</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/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
<!--/*/</th:block>/*/-->

<script>
$('.menu.toggle').click(function () {
$(".m-item").toggleClass('m-mobile-hide');
});
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
4 changes: 2 additions & 2 deletions src/main/resources/templates/admin/login.html
View file
Original file line number Diff line number Diff line change
@@ -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">
Expand Down

0 comments on commit 9b0283e

Please sign in to comment.