关于页面地图优化，侧边最近评论优化
This commit is contained in:
1152958806@qq.com
parent
51b4a73d06
commit
268c89829f
|
|
@ -1309,10 +1309,13 @@ spec:
|
|||
label: 地图相关配置
|
||||
value:
|
||||
StrengthenTitle:
|
||||
background:
|
||||
backgroundDark:
|
||||
mapLocation:
|
||||
authorInfo:
|
||||
children:
|
||||
- $formkit: text
|
||||
name: StrengthenTitle
|
||||
label: 居住地
|
||||
placeholder: 请输入内容
|
||||
- $formkit: text
|
||||
name: mapLocation
|
||||
label: 居住地坐标
|
||||
|
|
|
|||
|
|
@ -52,12 +52,3 @@ ul li {
|
|||
padding: 0.3rem 0.5rem;
|
||||
}
|
||||
|
||||
[data-theme=dark] .author-content-item.map {
|
||||
background: none!important;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.author-content-item.map {
|
||||
background: none!important;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -149,6 +149,13 @@
|
|||
<link rel="stylesheet" th:href="@{/assets/libs/fancybox/jquery.fancybox.min.css}">
|
||||
|
||||
|
||||
<!-- 关于地图-->
|
||||
<script src="https://map.qq.com/api/gljs?v=1.exp&key=YZOBZ-34HLF-K3OJV-JV6IN-OALJ5-7MBAC"></script>
|
||||
|
||||
<!-- 关于统计-->
|
||||
<script th:src="@{/assets/libs/countup/countup.js}"></script>
|
||||
|
||||
|
||||
<!-- icon图标 -->
|
||||
<link rel="stylesheet" href="https://npm.elemecdn.com/anzhiyu-theme-static@1.1.0/icon/ali_iconfont_css.css">
|
||||
|
||||
|
|
|
|||
|
|
@ -3,46 +3,64 @@
|
|||
<!-- 数据统计&音乐偏好 -->
|
||||
<div class="author-content" th:fragment="statistics-map">
|
||||
<div class="about-statistic author-content-item"
|
||||
style="background: url(https://bu.dusays.com/2023/03/12/640dc8c72f623.webp);">
|
||||
style="background: url(https://bu.dusays.com/2023/03/12/640dc8c72f623.webp);">
|
||||
<div class="card-content">
|
||||
<div class="author-content-item-tips">数据</div>
|
||||
<span class="author-content-item-title">访问统计</span>
|
||||
<div id="statistic"></div>
|
||||
<div class="post-tips">统计信息来自 <a href="https://invite.51.la/1NzKqTeb?target=V6" rel="noopener nofollow"
|
||||
target="_blank">51la网站统计</a></div>
|
||||
target="_blank">51la网站统计</a></div>
|
||||
<div class="banner-button-group"><a class="banner-button" onclick="pjax.loadUrl('/archives')"
|
||||
data-pjax-state=""><i class="anzhiyufont anzhiyu-icon-arrow-circle-right"></i><span
|
||||
class="banner-button-text">文章隧道</span></a></div>
|
||||
data-pjax-state=""><i class="anzhiyufont anzhiyu-icon-arrow-circle-right"></i><span
|
||||
class="banner-button-text">文章隧道</span></a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="author-content-item-group column mapAndInfo">
|
||||
<div class="author-content-item map single" style="padding: 0;">
|
||||
<div id="mapContainer" style="height: 120%;"></div>
|
||||
<div id="mapContainer" style="height: 100%;"></div>
|
||||
<span class="map-title">我现在住在
|
||||
<b>[[${theme.config.about.map.StrengthenTitle}]]</b></span>
|
||||
</div>
|
||||
<div class="author-content-item selfInfo single"
|
||||
th:if="${not #lists.isEmpty(theme.config.about.map.authorInfo)}"
|
||||
th:with="texts = ${theme.config.about.map.authorInfo}">
|
||||
<div th:if="${theme.config.about.map.authorInfo.size()}>'0'"><span class="selfInfo-title" th:text="${texts[0].authorInfoTitle}">生于</span><span
|
||||
class="selfInfo-content" id="selfInfo-content-year"
|
||||
th:style="'color:' + ${texts[0].authorInfoColor}"
|
||||
th:text="${texts[0].authorInfoContent}">2000</span>
|
||||
th:if="${not #lists.isEmpty(theme.config.about.map.authorInfo)}"
|
||||
th:with="texts = ${theme.config.about.map.authorInfo}">
|
||||
<div th:if="${theme.config.about.map.authorInfo.size()}>'0'"><span class="selfInfo-title"
|
||||
th:text="${texts[0].authorInfoTitle}">生于</span><span class="selfInfo-content"
|
||||
id="selfInfo-content-year" th:style="'color:' + ${texts[0].authorInfoColor}"
|
||||
th:text="${texts[0].authorInfoContent}">2000</span>
|
||||
</div>
|
||||
<div th:if="${theme.config.about.map.authorInfo.size()}>'1'"><span class="selfInfo-title" th:text="${texts[1].authorInfoTitle}">太原理工大学</span><span
|
||||
class="selfInfo-content" th:style="'color:' + ${texts[1].authorInfoColor}"
|
||||
th:text="${texts[1].authorInfoContent}">计算机科学</span>
|
||||
<div th:if="${theme.config.about.map.authorInfo.size()}>'1'"><span class="selfInfo-title"
|
||||
th:text="${texts[1].authorInfoTitle}">太原理工大学</span><span class="selfInfo-content"
|
||||
th:style="'color:' + ${texts[1].authorInfoColor}"
|
||||
th:text="${texts[1].authorInfoContent}">计算机科学</span>
|
||||
</div>
|
||||
<div th:if="${theme.config.about.map.authorInfo.size()}>'2'"><span class="selfInfo-title" th:text="${texts[2].authorInfoTitle}">现在职业</span><span
|
||||
class="selfInfo-content" th:style="'color:' + ${texts[2].authorInfoColor}"
|
||||
th:text="${texts[2].authorInfoContent}">BI工程师</span>
|
||||
<div th:if="${theme.config.about.map.authorInfo.size()}>'2'"><span class="selfInfo-title"
|
||||
th:text="${texts[2].authorInfoTitle}">现在职业</span><span class="selfInfo-content"
|
||||
th:style="'color:' + ${texts[2].authorInfoColor}"
|
||||
th:text="${texts[2].authorInfoContent}">BI工程师</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script th:src="@{/assets/libs/countup/countup.js}"></script>
|
||||
<script src="https://map.qq.com/api/gljs?v=1.exp&key=YZOBZ-34HLF-K3OJV-JV6IN-OALJ5-7MBAC"></script>
|
||||
<style>
|
||||
.author-content-item.map {
|
||||
background: none !important;
|
||||
min-height: 160px;
|
||||
max-height: 400px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.5rem;
|
||||
height: 60%;
|
||||
background-size: 100%;
|
||||
transition: 1s ease-in-out;
|
||||
}
|
||||
|
||||
[data-theme=dark] .author-content-item.map {
|
||||
background: none !important;
|
||||
background-size: 100%;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// 链接替换即可，不需要后面的参数
|
||||
fetch("https://v6-widget.51.la/v6/[[${theme.config.about.LingQueMonitorID}]]/quote.js")
|
||||
|
|
@ -111,31 +129,35 @@
|
|||
});
|
||||
</script>
|
||||
<script defer>
|
||||
var t = new TMap.LatLng([[${theme.config.about.map.mapLocation}]])
|
||||
, n = new TMap.Map(document.getElementById("mapContainer"),{
|
||||
var t = new TMap.LatLng([[${ theme.config.about.map.mapLocation }]])
|
||||
, n = new TMap.Map(document.getElementById("mapContainer"), {
|
||||
center: t,
|
||||
zoom: 12,
|
||||
});
|
||||
n.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM),
|
||||
n.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION),
|
||||
n.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE),
|
||||
new TMap.MultiMarker({
|
||||
map: n,
|
||||
styles: {
|
||||
marker: new TMap.MarkerStyle({
|
||||
width: 20,
|
||||
height: 30,
|
||||
anchor: {
|
||||
x: 10,
|
||||
y: 30
|
||||
}
|
||||
})
|
||||
},
|
||||
geometries: [{
|
||||
id: "marker",
|
||||
position: t
|
||||
}]
|
||||
})
|
||||
n.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION),
|
||||
n.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE),
|
||||
new TMap.MultiMarker({
|
||||
map: n,
|
||||
styles: {
|
||||
marker: new TMap.MarkerStyle({
|
||||
width: 20,
|
||||
height: 30,
|
||||
anchor: {
|
||||
x: 10,
|
||||
y: 30
|
||||
}
|
||||
})
|
||||
},
|
||||
geometries: [{
|
||||
id: "marker",
|
||||
position: t
|
||||
}]
|
||||
})
|
||||
|
||||
// 去除logo及水印
|
||||
var a = document.querySelector('canvas+div:last-child')
|
||||
a.style.display = 'none'
|
||||
</script>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,21 +4,21 @@
|
|||
<div class="card-widget card-recent-post" th:fragment="comments">
|
||||
<div class="item-headline"><i class="iconfont icon-comment-dots"></i><span>最新评论</span></div>
|
||||
<div class="aside-list" id="newcomm">
|
||||
<script th:src="@{/assets/libs/twikoo/twikoo.all.min.js}"></script>
|
||||
<script th:if="${theme.config.comments.twikooEnable && #strings.equals(theme.config.comments.use, 'Twikoo') && not #strings.isEmpty(theme.config.comments.twikoos.envId)}">
|
||||
(()=>{
|
||||
const pagesize = [[${theme.config.sidebar.newcommentnumber}]];
|
||||
const defaultpagesize = 5;
|
||||
const finalpagesize = pagesize <= 0 ? defaultpagesize : pagesize;
|
||||
twikoo.getRecentComments({
|
||||
envId: [[${ theme.config.comments.twikoos.envId }]], // 环境 ID
|
||||
// region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
|
||||
pageSize: finalpagesize, // 获取多少条，默认：10，最大：100
|
||||
includeReply: false // 是否包括最新回复，默认：false
|
||||
}).then(function (res) {
|
||||
let commenthtml = '';
|
||||
res.forEach((items)=>{
|
||||
commenthtml += `<div class="aside-list-item">
|
||||
const runTwikoo = () => {
|
||||
const pagesize = [[${theme.config.sidebar.newcommentnumber}]];
|
||||
const defaultpagesize = 5;
|
||||
const finalpagesize = pagesize <= 0 ? defaultpagesize : pagesize;
|
||||
twikoo.getRecentComments({
|
||||
envId: [[${ theme.config.comments.twikoos.envId }]], // 环境 ID
|
||||
// region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
|
||||
pageSize: finalpagesize, // 获取多少条，默认：10，最大：100
|
||||
includeReply: false // 是否包括最新回复，默认：false
|
||||
}).then(function (res) {
|
||||
let commenthtml = '';
|
||||
res.forEach((items)=>{
|
||||
commenthtml += `<div class="aside-list-item">
|
||||
<a class="thumbnail" href="${items.url + '#' + items.id}">
|
||||
<img loading="lazy" alt="dasda" src="${items.avatar}">
|
||||
</a>
|
||||
|
|
@ -32,15 +32,21 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
});
|
||||
let necomm = document.querySelector('#newcomm')
|
||||
necomm.innerHTML = commenthtml;
|
||||
window.lazyLoadInstance && window.lazyLoadInstance.update()
|
||||
window.pjax && window.pjax.refresh(necomm)
|
||||
}).catch(function (err) {
|
||||
// 发生错误
|
||||
console.error(err);
|
||||
});
|
||||
let necomm = document.querySelector('#newcomm')
|
||||
necomm.innerHTML = commenthtml;
|
||||
window.lazyLoadInstance && window.lazyLoadInstance.update()
|
||||
window.pjax && window.pjax.refresh(necomm)
|
||||
}).catch(function (err) {
|
||||
// 发生错误
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
if (typeof twikoo === 'object') {
|
||||
runTwikoo()
|
||||
} else {
|
||||
getScript('/themes/theme-hao/assets/libs/twikoo/twikoo.all.min.js').then(runTwikoo)
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue