统一调整侧栏,添加图片 404

This commit is contained in:
liuzhihang 2022-10-23 12:32:28 +08:00
parent add83b4078
commit e90253054f
13 changed files with 69 additions and 106 deletions

View File

@ -478,3 +478,8 @@ spec:
value: true value: true
- label: 关闭 - label: 关闭
value: false value: false
- $formkit: url
name: img_error
label: 图片加载失败图
help: 图片加载失败时显示的图片
placeholder: 请输入图片 url

View File

@ -282,3 +282,12 @@ window.onscroll = function () {
percent(); percent();
}; };
<!-- 图片 404 -->
function imgError(url) {
$("img").on("error", function () {
$(this).attr("src", url);
});
}

View File

@ -17,9 +17,9 @@
<a href="/">首页</a> <a href="/">首页</a>
</div> </div>
<div class="category-bar-item" <div class="category-bar-item"
th:classappend="${category.metadata.name == categoryItem.metadata.name} ? 'select'"
th:each="categoryItem : ${categoryFinder.listAll()}" th:each="categoryItem : ${categoryFinder.listAll()}"
th:id="${categoryItem.spec.displayName}" th:id="${categoryItem.spec.displayName}">
th:classappend="${category.metadata.name == categoryItem.metadata.name} ? 'select'">
<a th:href="${categoryItem.status.permalink}" <a th:href="${categoryItem.status.permalink}"
th:text="${categoryItem.spec.displayName}"></a> th:text="${categoryItem.spec.displayName}"></a>
</div> </div>
@ -36,7 +36,8 @@
<div class="article-sort-item" th:each="post : ${posts.items}"> <div class="article-sort-item" th:each="post : ${posts.items}">
<a class="article-sort-item-img" th:href="${post.status.permalink}" <a class="article-sort-item-img" th:href="${post.status.permalink}"
th:title="${post.spec.title}"> th:title="${post.spec.title}">
<img th:alt="${post.spec.title}" th:src="${post.spec.cover}"> <img th:alt="${post.spec.title}"
th:src="${#strings.isEmpty(post.spec.cover) ? theme.config.layout.post_random_img : post.spec.cover}">
</a> </a>
<div class="article-sort-item-info"> <div class="article-sort-item-info">
<div class="article-sort-item-time"><i class="far fa-calendar-alt"></i> <div class="article-sort-item-time"><i class="far fa-calendar-alt"></i>
@ -50,7 +51,7 @@
th:href="${post.status.permalink}" th:text="${post.spec.title}" th:href="${post.status.permalink}" th:text="${post.spec.title}"
th:title="${post.spec.title}"></a> th:title="${post.spec.title}"></a>
<div class="article-sort-item-tags"> <div class="article-sort-item-tags">
<a class="article-meta__tags" event.cancelbubble onclick="window.event.cancelBubble=!0" <a class="article-meta__tags"
th:each="tag : ${post.tags}" th:href="${tag.status.permalink}"> th:each="tag : ${post.tags}" th:href="${tag.status.permalink}">
<span class="tags-punctuation">#</span> <span class="tags-punctuation">#</span>
[[${tag.spec.displayName}]] [[${tag.spec.displayName}]]
@ -65,28 +66,7 @@
<div class="pagination"><span class="page-number current">1</span></div> <div class="pagination"><span class="page-number current">1</span></div>
</nav> </nav>
</div> </div>
<div class="aside-content" id="aside-content"> <div th:replace="modules/aside :: aside('profile,recent-posts,tags-stat')"></div>
<div th:replace="modules/widgets/aside/profile :: profile"></div>
<div class="card-widget heo-right-widget" id="card-wechat" onclick='window.open("/wechat/")'>
<div id="flip-wrapper">
<div id="flip-content">
<div class="face"></div>
<div class="back face"></div>
</div>
</div>
</div>
<div class="sticky_layout">
<div class="card-widget card-tags card-archives card-webinfo card-allinfo">
<th:block th:replace="modules/widgets/aside/tags :: tags"></th:block>
<hr>
<th:block th:replace="modules/widgets/aside/stat :: stat"></th:block>
</div>
</div>
</div>
</main> </main>
<!-- 底部 --> <!-- 底部 -->

View File

@ -24,7 +24,7 @@
<th:block th:replace="modules/post-list :: post-list"></th:block> <th:block th:replace="modules/post-list :: post-list"></th:block>
</div> </div>
<div th:replace="modules/aside :: aside"></div> <div th:replace="modules/aside :: aside('profile,recent-posts,tags-stat')"></div>
</main> </main>
<!-- 底部 --> <!-- 底部 -->
<footer th:replace="modules/footer :: footer"></footer> <footer th:replace="modules/footer :: footer"></footer>

View File

@ -1,31 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"> <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(widgets)"
th:if="${theme.config.sidebar.location != 'hide-aside'}" th:if="${theme.config.sidebar.location != 'hide-aside' && not #strings.isEmpty(widgets)}">
th:with="widgets = ${#strings.listSplit(theme.config.sidebar.widgets,',')} ">
<!-- 侧栏部件不确定都有什么 --> <!-- 侧栏部件不确定都有什么 -->
<!--<th:block th:each="widget : ${widgets}">--> <th:block th:each="widget : ${#strings.listSplit(widgets, ',')}">
<!-- <th:block th:replace="'modules/widgets/aside/'+ ${widget} + '::' + ${widget}" />--> <th:block th:replace="'modules/widgets/aside/'+ ${widget}"/>
<!--</th:block>--> </th:block>
<!-- 个人信息卡片 -->
<div th:replace="modules/widgets/aside/profile :: profile"></div>
<!-- 近期文章 -->
<div th:replace="modules/widgets/aside/recent-posts :: recent-posts"></div>
<div class="sticky_layout">
<div class="card-widget card-tags card-archives card-webinfo card-allinfo">
<th:block th:replace="modules/widgets/aside/tags :: tags"></th:block>
<hr>
<th:block th:replace="modules/widgets/aside/stat :: stat"></th:block>
</div>
</div>
</div> </div>
</html> </html>

View File

@ -39,11 +39,11 @@
<br> <br>
<div> <div>
&nbsp; &nbsp;
Powered by <a href="https://halo.run" class="hover:underline" target="_blank">Halo</a>. Powered by <a class="hover:underline" href="https://halo.run" target="_blank">Halo</a>.
</div> </div>
</div> </div>
<div class="footer-banner-right"> <div class="footer-banner-right">
<a class="footer-banner-link" href="/rss/">订阅</a> <a class="footer-banner-link" href="/rss">订阅</a>
<a class="footer-banner-link" href="https://github.com/liuzhihang/halo-theme-hao">主题</a> <a class="footer-banner-link" href="https://github.com/liuzhihang/halo-theme-hao">主题</a>
<a class="footer-banner-link" href="/about">关于</a> <a class="footer-banner-link" href="/about">关于</a>
<a class="footer-banner-link" href="https://beian.miit.gov.cn/#/Integrated/index" <a class="footer-banner-link" href="https://beian.miit.gov.cn/#/Integrated/index"

View File

@ -56,7 +56,6 @@
// 移除加载动画 // 移除加载动画
removeLoading(); removeLoading();
} }
addRightMenuClickEvent(); addRightMenuClickEvent();
navTitle(); navTitle();
heo.topPostScroll(); heo.topPostScroll();
@ -72,6 +71,13 @@
heo.darkModeStatus(); heo.darkModeStatus();
heo.categoriesBarActive(); heo.categoriesBarActive();
heo.initThemeColor(); heo.initThemeColor();
if ([[not ${#strings.isEmpty(theme.config.other.img_error)}]]) {
imgError([[${theme.config.other.img_error}]]);
} else {
imgError(/*[[@{/assets/images/404.gif}]]*/)
}
</script> </script>
</div> </div>
</body> </body>

View File

@ -6,7 +6,7 @@
<!-- 最新文章,用户可以自定义展示数量 --> <!-- 最新文章,用户可以自定义展示数量 -->
<div class="aside-list-item" th:each="post : ${posts}"> <div class="aside-list-item" th:each="post : ${posts}">
<a class="thumbnail" th:href="${post.status.permalink}" th:title="${post.spec.title}"> <a class="thumbnail" th:href="${post.status.permalink}" th:title="${post.spec.title}">
<img loading="lazy" th:alt="${post.spec.title}" th:src="${post.spec.cover}"> <img loading="lazy" th:alt="${post.spec.title}" th:src="${#strings.isEmpty(post.spec.cover) ? theme.config.layout.post_random_img : post.spec.cover}">
</a> </a>
<div class="content"> <div class="content">
<a class="title" th:href="${post.status.permalink}" th:text="${post.spec.title}" <a class="title" th:href="${post.status.permalink}" th:text="${post.spec.title}"

View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- tag & stat 粘性布局 -->
<th:block th:fragment="tags-stat">
<div class="sticky_layout">
<div class="card-widget card-tags card-archives card-webinfo card-allinfo">
<th:block th:replace="modules/widgets/aside/tags :: tags"></th:block>
<hr>
<th:block th:replace="modules/widgets/aside/stat :: stat"></th:block>
</div>
</div>
</th:block>
</html>

View File

@ -1,6 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"> <html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 侧边栏推广 --> <!-- 标签 -->
<th:block th:fragment="tags" th:with="tags = ${tagFinder.listAll()}"> <th:block th:fragment="tags" th:with="tags = ${tagFinder.listAll()}">

View File

@ -7,7 +7,9 @@
<div class="post_cover"> <div class="post_cover">
<a th:href="${post.status.permalink}" th:title="${post.spec.title}"> <a th:href="${post.status.permalink}" th:title="${post.spec.title}">
<span class="recent-post-top-text"></span> <span class="recent-post-top-text"></span>
<img loading="lazy" class="post_bg" th:alt="${post.spec.title}" th:src="${post.spec.cover}"> <img class="post_bg" loading="lazy"
th:alt="${post.spec.title}"
th:src="${#strings.isEmpty(post.spec.cover) ? theme.config.layout.post_random_img : post.spec.cover}">
</a> </a>
</div> </div>
<div class="recent-post-info"> <div class="recent-post-info">

View File

@ -3,7 +3,8 @@
<th:block th:fragment="content"> <th:block th:fragment="content">
<div class="post" id="body-wrap"> <div class="post" id="body-wrap">
<header class="post-bg" id="page-header" th:style="'background-image:url(' + ${post.spec.cover} + ')'">
<header class="post-bg" id="page-header" th:style="'background-image:url(' + (${#strings.isEmpty(post.spec.cover) ? theme.config.layout.post_random_img : post.spec.cover}) + ')'">
<nav th:replace="modules/nav :: nav"></nav> <nav th:replace="modules/nav :: nav"></nav>
<div class="coverdiv" id="coverdiv"> <div class="coverdiv" id="coverdiv">
<img alt="cover" id="post-cover" loading="lazy" <img alt="cover" id="post-cover" loading="lazy"
@ -229,29 +230,7 @@
</div> </div>
<!-- 侧栏 --> <!-- 侧栏 -->
<div th:replace="modules/aside :: aside('profile,toc,recent-posts,tags-stat')"></div>
<div class="aside-content" id="aside-content" th:if="${theme.config.sidebar.location != 'hide-aside'}">
<!-- 个人信息卡片 -->
<div th:replace="modules/widgets/aside/profile :: profile"></div>
<div class="sticky_layout">
<!-- 目录 -->
<div th:replace="modules/widgets/aside/toc :: toc"></div>
<!-- 微信卡片 -->
<!--<div class="card-widget heo-right-widget" id="card-wechat" onclick='window.open("/wechat/")'>-->
<!-- <div id="flip-wrapper">-->
<!-- <div id="flip-content">-->
<!-- <div class="face"></div>-->
<!-- <div class="back face"></div>-->
<!-- </div>-->
<!-- </div>-->
<!--</div>-->
<!-- 近期文章 -->
<div th:replace="modules/widgets/aside/recent-posts :: recent-posts"></div>
</div>
</div>
</main> </main>
<!-- 底部 --> <!-- 底部 -->

View File

@ -24,7 +24,7 @@
<div class="article-sort-item" th:each="post : ${postItems}"> <div class="article-sort-item" th:each="post : ${postItems}">
<a class="article-sort-item-img" th:href="${post.status.permalink}" <a class="article-sort-item-img" th:href="${post.status.permalink}"
th:title="${post.spec.title}"> th:title="${post.spec.title}">
<img loading="lazy" th:alt="${post.status.excerpt}" th:src="@{${post.spec.cover}}"> <img loading="lazy" th:alt="${post.status.excerpt}" th:src="${#strings.isEmpty(post.spec.cover) ? theme.config.layout.post_random_img : post.spec.cover}">
</a> </a>
<div class="article-sort-item-info"> <div class="article-sort-item-info">
<div class="article-sort-item-time"><i class="far fa-calendar-alt"></i> <div class="article-sort-item-time"><i class="far fa-calendar-alt"></i>
@ -34,13 +34,12 @@
</div> </div>
<a class="article-sort-item-title" onclick="window.event.cancelBubble=!0" <a class="article-sort-item-title" onclick="window.event.cancelBubble=!0"
th:href="${post.status.permalink}" th:href="${post.status.permalink}"
th:text="${post.status.excerpt}" th:title="${post.status.excerpt}"> th:text="${post.spec.title}" th:title="${post.spec.title}">
</a> </a>
<div class="article-sort-item-tags"> <div class="article-sort-item-tags">
<a class="article-meta__tags" event.cancelbubble onclick="window.event.cancelBubble=!0" <a class="article-meta__tags" event.cancelbubble onclick="window.event.cancelBubble=!0"
th:each="tag : ${post.tags}" th:href="${tag.status.permalink}"> th:each="tag : ${post.tags}" th:href="${tag.status.permalink}">
<span class="tags-punctuation">#</span> <span class="tags-punctuation">#[[${tag.spec.displayName}]]</span>
<th:block th:title="${tag.spec.displayName}"></th:block>
</a> </a>
<span class="article-meta__link"></span> <span class="article-meta__link"></span>
</div> </div>
@ -51,29 +50,7 @@
<div class="pagination"><span class="page-number current">1</span></div> <div class="pagination"><span class="page-number current">1</span></div>
</nav> </nav>
</div> </div>
<div class="aside-content" id="aside-content"> <div th:replace="modules/aside :: aside('profile,recent-posts,tags-stat')"></div>
<div th:replace="modules/widgets/aside/profile :: profile"></div>
<div class="card-widget heo-right-widget" id="card-wechat" onclick='window.open("/wechat/")'>
<div id="flip-wrapper">
<div id="flip-content">
<div class="face"></div>
<div class="back face"></div>
</div>
</div>
</div>
<div class="sticky_layout">
<div class="card-widget card-tags card-archives card-webinfo card-allinfo">
<th:block th:replace="modules/widgets/aside/tags :: tags"></th:block>
<hr>
<th:block th:replace="modules/widgets/aside/stat :: stat"></th:block>
</div>
</div>
</div>
</main> </main>
<!-- 底部 --> <!-- 底部 -->