后台可控制侧栏的左右及隐藏布局
This commit is contained in:
liuzhihang
parent
bb9618f7de
commit
9029289ef1
|
|
@ -131,6 +131,17 @@ spec:
|
|||
- group: sidebar
|
||||
label: 侧边栏
|
||||
formSchema:
|
||||
- $formkit: select
|
||||
name: location
|
||||
label: 侧边栏位置
|
||||
value: "right"
|
||||
options:
|
||||
- value: "hide"
|
||||
label: "隐藏"
|
||||
- value: "right"
|
||||
label: "右侧"
|
||||
- value: "left"
|
||||
label: "左侧"
|
||||
- $formkit: textarea
|
||||
name: widgets
|
||||
label: 小部件（无效）
|
||||
|
|
|
|||
|
|
@ -7167,6 +7167,28 @@ span.fund_name {
|
|||
width: calc(100% - 300px);
|
||||
}
|
||||
|
||||
/* 当隐藏边栏时，显示 100% */
|
||||
.layout.hide > div:first-child {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 侧边栏在左侧时，显示 100% */
|
||||
.layout.left > div:first-child {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-moz-box-ordinal-group: 2;
|
||||
-o-box-ordinal-group: 2;
|
||||
-ms-flex-order: 2;
|
||||
-webkit-order: 2;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
/* 侧栏在左侧时，关闭左边距，打开右边距 */
|
||||
.layout.left .aside-content {
|
||||
padding-right: 15px;
|
||||
padding-left: 0px !important;
|
||||
}
|
||||
|
||||
|
||||
div#categoryList {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<!-- 置顶内容 -->
|
||||
<div th:replace="modules/recent-top :: recent-top"></div>
|
||||
</div>
|
||||
<main class="layout" id="content-inner">
|
||||
<main class="layout" id="content-inner" th:classappend="${theme.config.sidebar.location}">
|
||||
<div class="recent-posts" id="recent-posts">
|
||||
|
||||
<!-- 分类导航栏 -->
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
|
||||
<div class="aside-content" id="aside-content" th:fragment="aside">
|
||||
<div class="aside-content" id="aside-content" th:fragment="aside" th:if="${theme.config.sidebar.location != 'hide'}">
|
||||
|
||||
<!-- 个人信息卡片 -->
|
||||
<div th:replace="modules/widgets/profile :: profile"></div>
|
||||
|
|
|
|||
|
|
@ -47,7 +47,6 @@
|
|||
<!-- https://raphamorim.io/waterfall.js/ 应该是这个 还有相关的 js 代码 是否可以调整-->
|
||||
<script th:src="@{/assets/libs/waterfall/waterfall.min.js}"></script>
|
||||
</div>
|
||||
<!-- 不知道干啥的 -->
|
||||
|
||||
<div>
|
||||
<script th:inline="javascript">
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
<div id="rightside" th:fragment="rightside">
|
||||
<div id="rightside-config-hide">
|
||||
<button id="translateLink" type="button" title="简繁转换">简</button>
|
||||
<button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button>
|
||||
<button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button>
|
||||
</div>
|
||||
<div id="rightside-config-show">
|
||||
<button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button>
|
||||
<button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
||||
|
|
@ -12,7 +12,9 @@
|
|||
<div class="card-content">
|
||||
<div class="author-content-item-tips">互动</div>
|
||||
<span class="author-content-item-title">最近评论</span></div>
|
||||
<div class="aside-list"><span>正在加载中...</span></div>
|
||||
<div class="aside-list">
|
||||
<span>最近评论内容 TODO</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧展示 tag -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue