ulthon/ulthon_information
1
0
Fork 0
mirror of https://gitee.com/ulthon/ulthon_information.git synced 2026-03-03 16:24:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

增加文章左侧标题导航

Browse Source
This commit is contained in:
augushong
2023-06-29 17:52:06 +08:00
parent 766b807f24
commit f567fffbfa
3 changed files with 188 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
public/static/css/index.articles.css
View File

@@ -7,20 +7,20 @@
}
.nav-left-list {
text-align: center;
text-align: left;
}
.nav-left-list a {
display : block;
padding : 10px 15px;
display: block;
padding: 10px 15px;
border-radius: 5px;
margin : 5px 20px;
margin: 5px 0;
}
.nav-left-list a:hover,
.nav-left-list a.current {
background-color: #6699CC;
color : #fff;
color: #fff;
}
.logo {
@@ -32,9 +32,9 @@
}
.session {
margin-top : 15px;
margin-top: 15px;
background-color: #99CCFF;
padding : 15px;
padding: 15px;
}
.session.border {
@@ -42,9 +42,9 @@
}
.session .header {
font-size : 18px;
font-size: 18px;
font-weight: 600;
color : #036;
color: #036;
}
.search-container {
@@ -56,11 +56,11 @@
}
.nav-more-list a {
display : inline-block;
white-space : nowrap;
color : #036;
display: inline-block;
white-space: nowrap;
color: #036;
margin-right: 15px;
margin-top : 15px;
margin-top: 15px;
}
.session .info p {
@@ -73,15 +73,15 @@
.tab-list {
border-bottom: 1px solid #ddd;
margin-top : 15px;
font-size : 16px;
margin-top: 15px;
font-size: 16px;
}
.tab-list a {
margin-right : 15px;
border-bottom : 2px solid transparent;
margin-right: 15px;
border-bottom: 2px solid transparent;
padding-bottom: 10px;
display : inline-block;
display: inline-block;
}
.tab-list a.current {
@@ -90,12 +90,12 @@
.post-item,
.plus-post-item {
display : flex;
display: flex;
justify-content: flex-start;
align-items : center;
margin-top : 15px;
padding-bottom : 15px;
border-bottom : 1px solid #ddd;
align-items: center;
margin-top: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #ddd;
}
.post-item>div:nth-child(2) {
@@ -104,16 +104,16 @@
.post-item .poster,
.plus-post-item .poster {
width : 160px;
height : 100px;
background-size : cover;
width: 160px;
height: 100px;
background-size: cover;
background-position: center;
background-repeat : no-repeat;
margin-right : 15px;
background-repeat: no-repeat;
margin-right: 15px;
}
.plus-post-item .poster {
width : 60px;
width: 60px;
height: 60px;
}
@@ -122,21 +122,21 @@
}
.post-item .info .title {
font-size : 21px;
line-height : 1.3;
margin-bottom : 4px;
font-size: 21px;
line-height: 1.3;
margin-bottom: 4px;
/* max-height : 52px; */
display : -webkit-box;
-webkit-line-clamp : 2;
overflow : hidden;
text-overflow : ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
.post-item .info .desc {
margin : 0 0 8px;
font-size : 13px;
margin: 0 0 8px;
font-size: 13px;
line-height: 24px;
color : #999;
color: #999;
}
.post-item .info .plus-info {
@@ -144,22 +144,22 @@
}
.nodata {
margin : 60px auto;
margin: 60px auto;
display: block;
width : 40%;
width: 40%;
}
.content-container .title {
font-size : 34px;
font-size: 34px;
font-weight: 700;
line-height: 44px;
color : #222;
color: #222;
}
.content-container .info {
margin-top: 12px;
font-size : 13px;
color : #777;
font-size: 13px;
color: #777;
}
.content-container .info span {
@@ -168,11 +168,11 @@
}
.content-container .desc {
margin : 0 0 8px;
font-size : 13px;
margin: 0 0 8px;
font-size: 13px;
line-height: 24px;
color : #999;
margin-top : 15px;
color: #999;
margin-top: 15px;
}
.content-container .jump-container {
@@ -188,12 +188,12 @@
.nav-left-list a {
display: inline-block;
margin : 5px;
margin: 5px;
}
.post-item .poster,
.plus-post-item .poster {
width : 80px;
width: 80px;
height: 60px;
}
@@ -203,11 +203,11 @@
.post-item .info .title {
font-weight: 500;
font-size : 14px;
font-size: 14px;
}
.content-container .title {
font-size : 18px;
font-size: 18px;
line-height: 28px;
}
}
@@ -300,13 +300,13 @@ a.post-item:visited {
.ul-content code {
background-color: #f5f2f0;
border-radius : 3px;
font-family : monospace;
padding : 3px;
border-radius: 3px;
font-family: monospace;
padding: 3px;
}
.copyright {
margin-top : 15px;
margin-top: 15px;
padding-top: 20px;
}
@@ -316,27 +316,27 @@ a.post-item:visited {
}
#banner .panel {
display : flex;
align-items : center;
display: flex;
align-items: center;
justify-content: center;
text-align : center;
text-shadow : 0 0 2px #333;
color : #fff;
z-index : 99;
height : 100%;
position : absolute;
top : 0;
left : 0;
width : 100%;
text-align: center;
text-shadow: 0 0 2px #333;
color: #fff;
z-index: 99;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#banner .index-poster {
height : 100%;
width : 100%;
background-size : cover;
height: 100%;
width: 100%;
background-size: cover;
background-position: center;
position : absolute;
z-index : 0;
position: absolute;
z-index: 0;
}
#banner .title {
@@ -353,29 +353,29 @@ a.post-item:visited {
}
.post-event {
padding : 10px 0;
padding: 10px 0;
border-bottom: 1px solid #ddd;
}
.post-event-header {
display : flex;
align-items : center;
display: flex;
align-items: center;
justify-content: flex-start;
}
.post-event-nickname {
font-size : 14px;
font-size: 14px;
font-weight: 600;
margin-left: 15px;
}
.post-event-avatar {
width : 40px;
height : 40px;
background-size : cover;
width: 40px;
height: 40px;
background-size: cover;
background-position: left;
border-radius : 50%;
border : 1px solid #bbb;
border-radius: 50%;
border: 1px solid #bbb;
}
.post-event-body {
@@ -388,12 +388,16 @@ a.post-item:visited {
}
.post-content-inner-copyright {
height : 0;
line-height : 0;
margin : 0;
padding : 0;
overflow : hidden;
height: 0;
line-height: 0;
margin: 0;
padding: 0;
overflow: hidden;
margin-block-start: 0;
margin-block-end : 0;
position : absolute;
margin-block-end: 0;
position: absolute;
}
#post-titles{
}

38
view/index/common/_left.html
View File

@@ -1,18 +1,26 @@
<div class="layui-col-md2">
<div class="logo">
<a href="/">
<img src="{:get_source_link(get_system_config('site_logo'))}" alt="">
</a>
</div>
<div class="nav-left-container">
<div class="nav-left-list">
<a href="/" {eq name='$Request.param.category_id|default=0' value='0'} class="current" {/eq}>全部</a>
{volist name='list_header_nav' id='nav'}
<a href="{$nav.value}" target="{$nav.target}">{$nav.title}</a>
{/volist}
{volist name='list_category_first_level' id='category'}
<a href="{:url('Index/index',['category_id'=>$category.id])}" {eq name='$Request.param.category_id|default=0' value='$category.id'} class="current"{/eq} >{$category.title}</a>
{/volist}
<div class="logo">
<a href="/">
<img src="{:get_source_link(get_system_config('site_logo'))}" alt="">
</a>
</div>
<div class="nav-left-container">
<div class="nav-left-list">
<a href="/" {eq name='$Request.param.category_id|default=0' value='0' } class="current" {/eq}>全部</a>
{volist name='list_header_nav' id='nav'}
<a href="{$nav.value}" target="{$nav.target}">{$nav.title}</a>
{/volist}
{volist name='list_category_first_level' id='category'}
<a href="{:url('Index/index',['category_id'=>$category.id])}" {eq name='$Request.param.category_id|default=0' value='$category.id' } class="current" {/eq}>{$category.title}</a>
{/volist}
</div>
<div id="post-titles">
<a style="display: block;" class="ul-group-title">
</a>
<div class="ul-nav-tree-2">
</div>
</div>
</div>
</div>
</div>

73
view/index/post/read.html
View File

@@ -71,7 +71,7 @@
<div class="layui-col-md7">
<div class="main-container">
<div class="content-container">
<h1 class="title">
<h1 class="title" id="title">
{$post.title}
</h1>
<div class="info">
@@ -217,6 +217,19 @@
const heti = new Heti('.heti');
heti.autoSpacing(); // 自动进行中西文混排美化和标点挤压
</script>
<script type="html" id="title-group">
<div class="ul-nav-tree-2-group">
<a class="ul-nav-tree-2-group-title"></a>
<div class="ul-nav-tree-2-group-main">
</div>
</div>
</script>
<script type="html" id="title-item">
<a href="" class="ul-nav-tree-2-item">
<div class="ul-nav-tree-2-item-title"></div>
</a>
</script>
<script>
layui.use(['form'], function () {
@@ -287,6 +300,64 @@
layer.msg('复制成功')
});
</script>
<!-- 处理左侧子导航 -->
<script>
$('.ul-group-title').text('{$post.title}').attr('href', '#title')
var listPostSubTitle = [];
$('.ul-content').find('h1,h2,h3').each(function (index, elem) {
var id = 'sub-title-' + index
var text = $(elem).text();
var type = 'title';
$(elem).attr('id', id)
if (elem.nodeName == 'H3') {
type = 'item'
}
listPostSubTitle.push({
id: id,
text: text,
type: type
});
})
listPostSubTitle.forEach(item => {
if (item.type == 'title') {
var titleGroupElem = $($('#title-group').html())
titleGroupElem.appendTo('#post-titles .ul-nav-tree-2')
titleGroupElem.find('.ul-nav-tree-2-group-title').text(item.text).attr('href', '#' + item.id)
} else if (item.type == 'item') {
var titleItemElem = $($('#title-item').html())
titleItemElem.appendTo($('#post-titles').find('.ul-nav-tree-2-group').last().find('.ul-nav-tree-2-group-main'))
titleItemElem.find('.ul-nav-tree-2-item-title').text(item.text)
titleItemElem.attr('href', '#' + item.id)
}
});
</script>
{if !$Request.isMobile }
<script>
var titleTopRange = $('.nav-left-list').outerHeight() + $('.logo').outerHeight() + 30
$(window).scroll(function () {
var st = $(window).scrollTop();
if (st > titleTopRange) {
$('#post-titles').css('position', 'fixed');
$('#post-titles').css('top', '10px');
$('#post-titles').css('width', $('.nav-left-list').outerWidth() + 'px');
} else {
$('#post-titles').css('position', 'unset');
}
});
</script>
{/if}
</body>
</html>