上一篇,下一篇样式修改

This commit is contained in:
1152958806@qq.com 2023-09-07 12:30:46 +08:00
parent 2f7d7faccc
commit 2eb8596e0a
8 changed files with 164 additions and 130 deletions

View File

@ -5,7 +5,8 @@ let heo_cookiesTime = null
,heo_musicPlaying = false
,heo_keyboard = false
,heo_intype = false
,lastSayHello = "";
,lastSayHello = ""
,refreshNum = 1;
// 私有函数
var heo = {
// 检测显示模式
@ -67,6 +68,12 @@ var heo = {
// 页脚友链
addFriendLinksInFooter: function () {
var footerRandomFriendsBtn = document.getElementById("footer-random-friends-btn");
if(!footerRandomFriendsBtn) return;
footerRandomFriendsBtn.style.opacity = "0.2";
footerRandomFriendsBtn.style.transitionDuration = "0.3s";
footerRandomFriendsBtn.style.transform = "rotate(" + 360 * refreshNum++ + "deg)";
const fetchUrl = "/apis/api.plugin.halo.run/v1alpha1/plugins/PluginLinks/links?keyword=&sort=priority,asc"
const linksUrl = GLOBAL_CONFIG.source.links.linksUrl
const num = GLOBAL_CONFIG.source.links.linksNum
@ -84,6 +91,9 @@ var heo = {
document.getElementById("friend-links-in-footer").innerHTML = htmlText;
}
})
setTimeout(()=>{
footerRandomFriendsBtn.style.opacity = "1";
}, 300)
},
//禁止图片右键单击

View File

@ -1,7 +1,7 @@
.comment-barrage {
position: fixed;
bottom: 0;
right: 20px;
right: 60px;
padding: 0 0 20px 10px;
z-index: 100;
display: flex;

View File

@ -137,29 +137,6 @@ if(GLOBAL_CONFIG.htmlType!='comments') {
}, 1000)
}
// 自动隐藏
document.addEventListener('scroll', btf.throttle(function () {
//滚动条高度+视窗高度 = 可见区域底部高度
var visibleBottom = window.scrollY + document.documentElement.clientHeight;
//可见区域顶部高度
var visibleTop = window.scrollY;
// 获取翻页按钮容器
var pagination = document.querySelector('.comment-barrage');
// 获取位置监测容器,此处采用评论区
var eventlistner = document.getElementById('post-comment');
if (eventlistner && pagination) {
var centerY = eventlistner.offsetTop + 200;
if (document.body.clientWidth > 768) {
if (centerY > visibleBottom) {
pagination.style.bottom = '0';
} else {
pagination.style.bottom = '-200px';
}
}
}
}, 200))
initCommentBarrage();
if (localStorage.getItem('commentBarrageSwitch') !== 'false') {

View File

@ -1,12 +1,5 @@
// var full_page = document.getElementsByClassName("full_page");
// if (full_page.length != 0) {
// full_page[0].style.background = "transparent";
// }
function checkOpen() {
}
function checkOpen() {}
checkOpen.toString = function () {
this.opened = true;
};
@ -191,24 +184,6 @@ function showcopy() {
}
}
//导航栏上显示标题
// var OriginTitile = document.title;
// var titleTime;
// document.addEventListener('visibilitychange', function () {
// if (document.hidden) {
// // $('[rel="shortcut icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_3/img/siteicon/favicon.png");
// document.title = '张洪Heo';
// clearTimeout(titleTime);
// }
// else {
// // $('[rel="shortcut icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_3/img/siteicon/favicon.png");
// document.title = OriginTitile;
// // titleTime = setTimeout(function () {
// // document.title = OriginTitile;
// // }, 2000);
// }
// });
// 早上好问好
// 获取时间
var getTimeState = () => {
@ -390,7 +365,6 @@ document.addEventListener('scroll', btf.throttle(function () {
heo.initThemeColor()
}, 200))
//友链随机传送
//友链随机传送
function travelling() {
const links = "/apis/api.plugin.halo.run/v1alpha1/plugins/PluginLinks/links?keyword=&sort=priority,asc"
@ -577,29 +551,19 @@ $(".topGroup").hover(function () {
});
//文章页面上一篇下一篇
// document.addEventListener('scroll', btf.throttle(function () {
// //滚动条高度+视窗高度 = 可见区域底部高度
// var visibleBottom = window.scrollY + document.documentElement.clientHeight;
// //可见区域顶部高度
// var visibleTop = window.scrollY;
// // 获取翻页按钮容器
// var pagination = document.getElementById('pagination');
// // 获取位置监测容器,此处采用评论区
// var eventlistner = document.getElementById('post-tools');
// if (eventlistner && pagination) {
// var centerY = eventlistner.offsetTop + (eventlistner.offsetHeight / 2);
// if (document.body.clientWidth > 1300) {
// if (centerY < visibleTop) {
// pagination.classList.add("show-window");
// } else {
// pagination.classList.remove("show-window");
// }
// }
// }
// }, 200));
function initObserver() {
var e = document.getElementById("post-comment")
, t = document.getElementById("pagination");
e && new IntersectionObserver((function(e) {
e.forEach((function(e) {
e.isIntersecting ? (t && t.classList.add("show-window"),
document.querySelector(".comment-barrage").style.bottom = "-200px") : (t && t.classList.remove("show-window"),
document.querySelector(".comment-barrage").style.bottom = "0px")
}
))
}
)).observe(e)
}
// 页面百分比
function percent() {
@ -670,6 +634,7 @@ function initBlog() {
heo.initThemeColor(),
//隐藏加载动画
GLOBAL_CONFIG.loadingBox && heo.hideLoading(),
initObserver(),
checkUrlAndAddHideBanner()
}

View File

@ -3187,14 +3187,6 @@ ul {
height: 150px;
}
#pagination .next-post2 a,
#pagination .prev-post2 a {
position: relative;
display: block;
overflow: hidden;
height: 150px;
}
#pagination .next-post:hover img.next-cover,
#pagination .next-post:hover img.prev-cover,
#pagination .prev-post:hover img.next-cover,
@ -11553,13 +11545,6 @@ a.reward-main-btn:hover {
background: #363636;
}
.next-post2.pull-right,
.prev-post2.pull-left,
#pagination .prev-post2,
#pagination .next-post2 {
background: #363636;
}
#preimg{
position: absolute;
width: 100%;
@ -11573,10 +11558,7 @@ a.reward-main-btn:hover {
object-fit: cover;
border-radius: 0;
}
.prev-post2.pull-left:hover #preimg {
opacity: 1;
transform: scale(1.1);
}
.prev-post.pull-left:hover #preimg {
opacity: 1;
transform: scale(1.1);
@ -11587,15 +11569,10 @@ a.reward-main-btn:hover {
transform: scale(1.1);
}
.next-post2.pull-right:hover #preimg {
opacity: 1;
transform: scale(1.1);
}
@media screen and (min-width: 768px) {
#pagination .next-post a {
border-left: var(--heo-card-bg);
border-left-width: 3px;
border-left:var(--heo-main-op);
border-left-width: .5px;
border-left-style: solid;
display: flex;
align-items: flex-start;
@ -11607,9 +11584,9 @@ a.reward-main-btn:hover {
}
#pagination .prev-post a {
border-right: var(--heo-card-bg);
border-right-width: 3px;
border-right-style: solid;
border-right: var(--heo-main-op);
border-right-width: .5px;
border-right-style: solid
}
#pagination .pagination-info {
@ -11623,17 +11600,16 @@ a.reward-main-btn:hover {
margin: auto;
height: 100%;
}
#pagination .prev-post a:hover div,
#pagination .next-post a:hover div {
color: var(--heo-white) !important;
#pagination .next-post a:hover div,#pagination .prev-post a:hover div {
color: var(--heo-white)!important
}
}
@media screen and (max-width: 768px) {
#pagination .prev-post a:hover,
#pagination .next-post a:hover {
background: var(--heo-none);
#pagination .next-post a:hover,#pagination .prev-post a:hover {
background:var(--heo-none)
}
}
@ -11658,37 +11634,137 @@ a.reward-main-btn:hover {
filter: blur(5px);
}
#post #pagination .prev-post .label,
#pagination .next-post .label {
color: white;
}
#post #pagination .prev-post2 .label,
#pagination .next-post2 .label {
color: white;
}
#post #pagination .prev_info,
#pagination .next_info {
color: white;
font-weight: bold;
#pagination .next_info,#post #pagination .prev_info {
font-weight: 700;
-webkit-line-clamp: 2;
white-space: normal;
line-height: 1.3;
font-size: 0.9rem;
font-size: .9rem;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 10px
}
#post #pagination {
overflow: hidden;
position: inherit;
border: var(--style-border-always)
}
#pagination.pagination-post {
background: var(--heo-card-bg);
}
@media screen and (min-width: 1300px) {
#post #pagination {
position:fixed;
width: 300px;
bottom: -100px;
right: 60px;
z-index: 1000;
height: fit-content;
transition: cubic-bezier(.42,0,.3,1.11) .3s;
border: var(--style-border);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
opacity: 0;
z-index: 1002
}
#post #pagination.show-window {
bottom: 20px;
opacity: 1
}
#post #pagination:hover {
border: var(--style-border-hover)
}
#pagination .next-post a,#pagination .prev-post a {
border: none;
height: fit-content;
padding: .5rem 0
}
#pagination.pagination-post {
border-radius: 0
}
#pagination .next_info,#post #pagination .prev_info {
font-size: 14px;
font-weight: 400;
margin-bottom: 0
}
#pagination .pagination-info {
padding: .5rem 1rem;
transform: none
}
#post #pagination {
background: 0 0
}
#pagination .next_info,#post #pagination .prev_info {
color: var(--heo-fontcolor);
}
#pagination .next-post,#pagination .prev-post,.next-post.pull-right,.prev-post.pull-left {
background: var(--heo-maskbgdeep);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
transform: translateZ(0)
}
#pagination .next-post a:hover,#pagination .prev-post a:hover {
background: var(--heo-main);
}
#pagination .next-post .label,#post #pagination .prev-post .label {
color: var(--heo-fontcolor)
}
#pagination.pagination-post .next-post.pull-full img,#pagination.pagination-post .next-post.pull-right img,#pagination.pagination-post .prev-post.pull-full img,#pagination.pagination-post .prev-post.pull-left img {
display: none;
top: 0
}
#post #pagination .prev-post .label,
#pagination .next-post .label {
color: var(--heo-fontcolor)
}
.prev-post.pull-left {
display: none
}
.next-post.pull-right {
width: 100%!important
}
#pagination .next-post .pagination-info {
text-align: left;
position: relative
}
#pagination .next-post .label,#post #pagination .prev-post .label {
color: var(--heo-fontcolor);
font-weight: 700;
font-size: 12px;
margin-bottom: .5rem;
border-bottom: var(--style-border);
line-height: 1;
padding-bottom: .5rem
}
}
@media screen and (max-width: 768px) {
.prev-post.pull-left {
border-bottom: var(--style-border-always);

View File

@ -19,6 +19,12 @@
#rightside {
display: none;
}
.comment-barrage {
right: 20px;
}
#post #pagination {
right: 20px;
}
</style>
<link th:if="${theme.config.tool.rightside.readmode && theme.config.tool.rightside.rightsideEnable}"

View File

@ -45,9 +45,9 @@
<div th:if="${theme.config.footer.footer_group.enable_footer_group}" class="footer-group">
<div class="footer-title-group">
<h3 class="footer-title">友链</h3>
<a class="random-friends-btn"
<a class="random-friends-btn" id="footer-random-friends-btn"
href="javascript:heo.addFriendLinksInFooter();" rel="external nofollow" title="换一批友情链接"
data-pjax-state="external"><i class="haofont hao-icon-arrow-rotate-right"></i></a>
data-pjax-state="external"><i class="haofont hao-icon-arrow-rotate-right" style="font-size: 16px;"></i></a>
</div>
<div class="footer-links" id="friend-links-in-footer"></div>
</div>

View File

@ -128,10 +128,10 @@
<!-- 版权声明 -->
<th:block th:replace="~{modules/post/copyright :: copyright}"></th:block>
<nav class="pagination-post" id="pagination"
<nav class="pagination-post needEndHide" id="pagination"
th:with="postCursor = ${postFinder.cursor(post.metadata.name)},
postRandomImg=${#strings.contains(theme.config.layout.postRandomImg,'?') ? theme.config.layout.postRandomImg+'&' : theme.config.layout.postRandomImg+'?'}">
<div th:class="${postCursor.hasPrevious()==true && postCursor.hasNext()==false} ? 'prev-post2 pull-left postcarnepre' : 'prev-post pull-left'">
<div th:if="${postCursor.hasPrevious()}" th:class="${postCursor.hasNext()==false} ? 'prev-post pull-full ' : 'prev-post pull-left'">
<a th:if="${postCursor.hasPrevious()}" th:href="@{${postCursor.previous.status.permalink}}">
<img alt="cover" id="preimg" class="nolazyload"
th:with="img = ${#strings.isEmpty(postCursor.previous.spec.cover) ? postRandomImg+postCursor.previous.spec.title : postCursor.previous.spec.cover}"
@ -144,7 +144,7 @@
</div>
</a>
</div>
<div th:class="${postCursor.hasPrevious()==false && postCursor.hasNext()==true} ? 'next-post2 pull-right postcarnepre':'next-post pull-right'">
<div th:if="${postCursor.hasNext()}" th:class="${postCursor.hasPrevious()==false} ? 'next-post pull-full ':'next-post pull-right'">
<a th:if="${postCursor.hasNext()}" th:href="@{${postCursor.next.status.permalink}}">
<img alt="cover" id="preimg" class="nolazyload"
th:with="img = ${#strings.isEmpty(postCursor.next.spec.cover) ? postRandomImg+postCursor.next.spec.title : postCursor.next.spec.cover}"