github
/
halo-theme-hao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

懒加载图片

This commit is contained in:
1152958806@qq.com 2023-08-19 03:38:00 +08:00
parent 31c260e6ce
commit cfe0fe791d
16 changed files with 282 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
settings.yaml
View File

@ -2661,6 +2661,25 @@ spec:
validation: required
value: 'https://npm.onmicrosoft.cn/hao-theme-static@1.3.0/templates/assets'
help: '默认为npmJs的onmicrosoft加速地址，如果你有自己的cdn地址（请确保链接下assets文件夹下主题静态资源文件），可以填写，否则请勿修改！ '
- $formkit: group
name: vanillaLazyload
label: 懒加载
value:
enable: true
errorImg: "/themes/theme-hao/assets/images/404.gif"
children:
- $formkit: radio
name: enable
options:
- label: 启用
value: true
- label: 禁用
value: false
- $formkit: attachment
name: errorImg
label: 图片加载失败图
validation: required
placeholder: 请输入图片 url
- $formkit: group
name: diytitle
label: 动态标题

11
templates/album.html
View File

@ -24,9 +24,10 @@
<th:block th:each="group : ${photoFinder.groupBy()}">
<div class="card" th:onclick="go([[${group.metadata.name}]])">
<img class="card_cover"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:data-lazy-src="${#annotations.get(group, 'cover')}">
th:src="${isLazyload ? dataImage : #annotations.get(group, 'cover')}"
th:data-lazy-src="${ isLazyload ? #annotations.get(group, 'cover') : ''}"
>
<div class="card__content">
<p class="card__category" th:text="${group.spec.displayName}"></p>
<h3 class="card__heading" th:text="${#annotations.get(group, 'description')}"></h3>
@ -44,9 +45,11 @@
<th:block th:each="group : ${photoFinder.groupBy()}">
<figure class="gallery-group">
<img class="gallery-group-img no-lightbox"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:data-lazy-src="${#annotations.get(group, 'cover')}" alt="Group Image Gallery">
th:src="${isLazyload ? dataImage : #annotations.get(group, 'cover')}"
th:data-lazy-src="${ isLazyload ? #annotations.get(group, 'cover') : ''}"
alt="Group Image Gallery">
<figcaption>
<div class="gallery-group-name">[[${group.spec.displayName}]]</div>
<p>[[${#annotations.get(group, 'description')}]]</p><a target="_blank"

35
templates/macro/content-links.html
View File

@ -24,11 +24,19 @@
<a class="tags-group-icon" target="_blank" th:href="${linkOdd.spec.url}"
th:title="${linkOdd.spec.displayName}"
th:with="linkOdd = ${group.links.get(iterStat.index - 1)}">
<img th:src="@{${linkOdd.spec.logo}}" th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''" th:title="${linkOdd.spec.displayName}">
<img th:with=" img = @{${linkOdd.spec.logo}}"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:title="${linkOdd.spec.displayName}">
</a>
<a class="tags-group-icon" target="_blank" th:href="${linkEven.spec.url}"
th:title="${linkEven.spec.displayName}" th:with="linkEven = ${link}">
<img th:src="@{${linkEven.spec.logo}}" th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''" th:title="${linkEven.spec.displayName}">
<img th:with="img = @{${linkEven.spec.logo}}"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:title="${linkEven.spec.displayName}">
</a>
</div>
</th:block>
@ -87,18 +95,19 @@
<a class="img" target="_blank" th:href="${link.spec.url}" th:title="${link.spec.displayName}">
<img class="flink-avatar" style="pointer-events: none;" th:alt="${link.spec.displayName}"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
th:with="img = @{${#strings.isEmpty(#annotations.get(link, 'siteshot')) ? link.spec.logo : #annotations.get(link,'siteshot') }}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:data-lazy-src="@{${#strings.isEmpty(#annotations.get(link, 'siteshot')) ? link.spec.logo : #annotations.get(link,'siteshot') }}">
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}">
</a>
<a class="info cf-friends-link" target="_blank" th:href="${link.spec.url}"
th:title="${link.spec.displayName}">
<div class="site-card-avatar">
<img class="flink-avatar cf-friends-avatar" th:alt="${link.spec.displayName}"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:data-lazy-src="${link.spec.logo}">
th:src="${isLazyload ? dataImage : link.spec.logo}"
th:data-lazy-src="${ isLazyload ? link.spec.logo : ''}">
</div>
<div class="site-card-text">
<span class="title cf-friends-name" th:text="${link.spec.displayName}"></span>
@ -120,16 +129,16 @@
<a class="cf-friends-link" rel="external nofollow" target="_blank" th:href="${link.spec.url}"
th:title="${link.spec.displayName}">
<img class="flink-avatar cf-friends-avatar" th:alt="${link.spec.displayName}"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:data-lazy-src="${link.spec.logo}">
th:src="${isLazyload ? dataImage : link.spec.logo}"
th:data-lazy-src="${ isLazyload ? link.spec.logo : ''}">
<div class="flink-item-info">
<span class="flink-item-name cf-friends-name" th:text="${link.spec.displayName}"></span>
<span class="flink-item-desc" th:text="${link.spec.description}"
th:title="${link.spec.description}"></span>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:data-lazy-src="${link.spec.logo}">
<img th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : link.spec.logo}"
th:data-lazy-src="${ isLazyload ? link.spec.logo : ''}">
</div>
</a>
</div>
@ -141,9 +150,9 @@
<a class="cf-friends-link" rel="external nofollow" target="_blank" th:href="${link.spec.url}"
th:title="${link.spec.displayName}">
<img class="flink-avatar cf-friends-avatar"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:data-lazy-src="${link.spec.logo}"
th:src="${isLazyload ? dataImage : link.spec.logo}"
th:data-lazy-src="${ isLazyload ? link.spec.logo : ''}"
th:alt="${link.spec.displayName}">
<div class="img-alt is-center">[[${link.spec.displayName}]]</div>
<div class="flink-item-info">

2
templates/modules/head.html
View File

@ -197,7 +197,7 @@
postUpdate: '2022-11-04 20:08:15',
copyright: undefined,
lightbox: 'fancybox',
lazyload: {enable: true, error: "/themes/theme-hao/assets/images/404.gif"},
lazyload: {enable: [[${theme.config.other.vanillaLazyload.enable}]], error: "/themes/theme-hao/assets/images/404.gif"},
isFriendLinksInFooter: [[${theme.config.footer.footer_group.enable_footer_group}]],
loadingBox: [[${theme.config.other.loadingBoxs.loadingBoxEnable}]],
loadProgressBar: [[${theme.config.other.loadingBoxs.loadProgressBar}]],

4
templates/modules/layouts/layout.html
View File

@ -4,7 +4,9 @@
theme.config.other.staticResource.use == 'cbd' ? 'https://cdn.cbd.int/hao-theme-static@' + theme.spec.version +'/templates/assets' :
theme.config.other.staticResource.use == 'custom' ? theme.config.other.staticResource.cdn_link : #theme.assets('/')},
theme_version = ${ theme.config.other.staticResource.use == 'local' ? '?v='+ theme.spec.version : ''},
errorImg = '/themes/theme-hao/assets/images/404.gif'">
errorImg = @{${theme.config.other.vanillaLazyload.errorImg}},
isLazyload = ${theme.config.other.vanillaLazyload.enable},
dataImage = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'">
<!-- head 中自定义的 -->

5
templates/modules/post-list.html
View File

@ -16,10 +16,11 @@
<div class="post_cover left_radius">
<a th:attr="title=${post.spec.title}" th:href="@{${post.status.permalink}}">
<img class="post_bg"
th:with='img = ${#strings.isEmpty(post.spec.cover) ? postRandomImg+","+post.spec.title : post.spec.cover}'
th:alt="${post.spec.title}"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
th:attr="onerror='this.onerror=null;this.src=\''+@{${errorImg}}+'\''"
th:data-lazy-src='${#strings.isEmpty(post.spec.cover) ? postRandomImg+","+post.spec.title : post.spec.cover}'>
th:data-lazy-src="${ isLazyload ? img : ''}"
th:src="${isLazyload ? dataImage : img}">
</a>
</div>
<!-- 类别非空时 -->

10
templates/modules/post/relatedPosts.html
View File

@ -17,9 +17,10 @@ containsTitle = ${#strings.contains(recommandPosts,post.spec.title)}">
<div th:if="${!containsTitle ? iterStat.index <6 : true}">
<a th:href="@{${recommandPost.status.permalink}}" th:title="${recommandPost.spec.title}">
<img alt="cover" class="cover" id="preimg"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
th:with="img = ${#strings.isEmpty(recommandPost.spec.cover) ? theme.config.layout.postRandomImg : recommandPost.spec.cover}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:data-lazy-src="${#strings.isEmpty(recommandPost.spec.cover) ? theme.config.layout.postRandomImg : recommandPost.spec.cover}">
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}">
<div class="content is-center">
<div class="date" style="color: white"><i class="far fa-calendar-alt fa-fw"></i>
[[${#dates.format(recommandPost.spec.publishTime,'yyyy-MM-dd')}]]
@ -37,9 +38,10 @@ containsTitle = ${#strings.contains(recommandPosts,post.spec.title)}">
<div th:if="${!containsTitle ? iterStat.index <2 : true}">
<a th:href="@{${recommandPost.status.permalink}}" th:title="${recommandPost.spec.title}">
<img class="cover" alt="cover"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
th:with="img = ${#strings.isEmpty(recommandPost.spec.cover) ? theme.config.layout.postRandomImg : recommandPost.spec.cover}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:data-lazy-src="${#strings.isEmpty(recommandPost.spec.cover) ? theme.config.layout.postRandomImg : recommandPost.spec.cover}">
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}">
<div class="content is-center">
<div class="date"><i class="far fa-calendar-alt fa-fw"></i>
[[${#dates.format(recommandPost.spec.publishTime,'yyyy-MM-dd')}]]</div>

5
templates/modules/widgets/about-widgets/game.html
View File

@ -39,9 +39,10 @@
th:href="${comic.url}"
rel="external nofollow noreferrer" target="_blank" th:title="${comic.title}" draggable="false">
<div class="comic-item-cover"><img
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
th:with="img = @{${comic.bg}}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:data-lazy-src="@{${comic.bg}}"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
th:alt="${comic.title}"
draggable="false" >
</div>

8
templates/modules/widgets/aside/friend-link.html
View File

@ -17,9 +17,9 @@
<a th:each="link : ${group.links}"
class="card-friend-item online-friend-link" th:href="${link.spec.url}" th:title="${link.spec.displayName}"
target="_blank"><img class="no-lightbox card-friend-avatar"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:data-lazy-src="${link.spec.logo}"
th:src="${isLazyload ? dataImage : link.spec.logo}"
th:data-lazy-src="${ isLazyload ? link.spec.logo : ''}"
th:alt="${link.spec.displayName}">
<div class="card-friend-details">
<div class="card-friend-name">[[${link.spec.displayName}]]</div>
@ -36,9 +36,9 @@
<a th:each="link : ${group.links}"
class="card-friend-item offline-friend-link" th:href="${link.spec.url}" th:title="${link.spec.displayName}"
target="_blank"><img class="no-lightbox card-friend-avatar"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:data-lazy-src="${link.spec.logo}"
th:src="${isLazyload ? dataImage : link.spec.logo}"
th:data-lazy-src="${ isLazyload ? link.spec.logo : ''}"
th:alt="${link.spec.displayName}">
<div class="card-friend-details">
<div class="card-friend-name">[[${link.spec.displayName}]]</div>

15
templates/modules/widgets/aside/profile.html
View File

@ -13,9 +13,10 @@
<div class="author-info__sayhi" id="author-info__sayhi" onclick="heo.changeSayHelloText()">你好啊！我是
</div>
<img class="avatar-img"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
th:with=" img = @{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:data-lazy-src="@{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}">
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}">
</div>
<div class="author-info__name" th:if="${#strings.isEmpty(theme.config.sidebar.profile.profileName)}"
th:text="${site.title}"></div>
@ -144,14 +145,16 @@
</div>
<div class="avatar-img-group">
<img class="avatar-img" alt="avatar"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
th:with="img = @{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:data-lazy-src="@{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}">
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}">
<div class="avatar-sticker">
<img class="avatar-sticker-img" alt="avatar"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
th:with="img = @{${theme.config.sidebar.profile.stickerImg}}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:data-lazy-src="@{${theme.config.sidebar.profile.stickerImg}}">
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}">
</div>
</div>
<div class="author-info__description_group" th:utext="${theme.config.sidebar.profile.profileDesc}">

5
templates/modules/widgets/aside/recent-posts.html
View File

@ -8,9 +8,10 @@
<div class="aside-list-item" th:each="post : ${posts}">
<a class="thumbnail" th:href="@{${post.status.permalink}}" th:title="${post.spec.title}">
<img th:alt="${post.spec.title}"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
th:with="img = ${#strings.isEmpty(post.spec.cover) ? postRandomImg+post.spec.title : post.spec.cover}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:data-lazy-src="${#strings.isEmpty(post.spec.cover) ? postRandomImg+post.spec.title : post.spec.cover}">
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}">
</a>
<div class="content">
<a class="title" th:href="@{${post.status.permalink}}" th:text="${post.spec.title}" th:title="${post.spec.title}"></a>

210
templates/modules/widgets/banner-group.html
View File

@ -19,114 +19,254 @@
<div class="tags-group-wrapper" th:if="${#strings.equals(theme.config.top.BannerLeft.bannersBackground, 'default')}">
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#989bf8">
<img th:src="${assets_link + '/images/icons/AfterEffect.png'}" title="AfterEffect">
<img
th:with=" img = ${assets_link + '/images/icons/AfterEffect.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="AfterEffect">
</div>
<div class="tags-group-icon" style="background:#fff">
<img th:src="${assets_link + '/images/icons/Sketch.png'}" title="Sketch">
<img
th:with=" img = ${assets_link + '/images/icons/Sketch.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="Sketch">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#57b6e6">
<img th:src="${assets_link + '/images/icons/Docker.png'}" title="Docker">
<img
th:with=" img = ${assets_link + '/images/icons/Docker.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="Docker">
</div>
<div class="tags-group-icon" style="background:#4082c3">
<img th:src="${assets_link + '/images/icons/Photoshop.png'}" title="Photoshop">
<img
th:with=" img = ${assets_link + '/images/icons/Photoshop.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="Photoshop">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#fff">
<img th:src="${assets_link + '/images/icons/FinalCutPro.png'}" title="FinalCutPro">
<img
th:with=" img = ${assets_link + '/images/icons/FinalCutPro.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="FinalCutPro">
</div>
<div class="tags-group-icon" style="background:#fff">
<img th:src="${assets_link + '/images/icons/Python.png'}" title="Python">
<img
th:with=" img = ${assets_link + '/images/icons/Python.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="Python">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#eb6840">
<img th:src="${assets_link + '/images/icons/Swift.png'}" title="Swift">
<img
th:with=" img = ${assets_link + '/images/icons/Swift.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="Swift">
</div>
<div class="tags-group-icon" style="background:#8f55ba">
<img th:src="${assets_link + '/images/icons/Principle.png'}" title="Principle">
<img
th:with=" img = ${assets_link + '/images/icons/Principle.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="Principle">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#f29e39">
<img th:src="${assets_link + '/images/icons/illustrator.png'}" title="illustrator">
<img
th:with=" img = ${assets_link + '/images/icons/illustrator.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="illustrator">
</div>
<div class="tags-group-icon" style="background:#2c51db">
<img th:src="${assets_link + '/images/icons/CSS3.png'}" title="CSS3">
<img
th:with=" img = ${assets_link + '/images/icons/CSS3.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="CSS3">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#f7cb4f">
<img th:src="${assets_link + '/images/icons/JS.png'}" title="JS">
<img
th:with=" img = ${assets_link + '/images/icons/JS.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="JS">
</div>
<div class="tags-group-icon" style="background:#e9572b">
<img th:src="${assets_link + '/images/icons/HTML.png'}" title="HTML">
<img
th:with=" img = ${assets_link + '/images/icons/HTML.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="HTML">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#df5b40">
<img th:src="${assets_link + '/images/icons/Git.webp'}" title="Git">
<img
th:with=" img = ${assets_link + '/images/icons/Git.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="Git">
</div>
<div class="tags-group-icon" style="background:#e65164">
<img th:src="${assets_link + '/images/icons/Apifox.webp'}" title="Apifox">
<img
th:with=" img = ${assets_link + '/images/icons/Apifox.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="Apifox">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#989bf8">
<img th:src="${assets_link + '/images/icons/AfterEffect.png'}" title="AfterEffect">
<img
th:with=" img = ${assets_link + '/images/icons/AfterEffect.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="AfterEffect">
</div>
<div class="tags-group-icon" style="background:#fff">
<img th:src="${assets_link + '/images/icons/Sketch.png'}" title="Sketch">
<img
th:with=" img = ${assets_link + '/images/icons/Sketch.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="Sketch">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#57b6e6">
<img th:src="${assets_link + '/images/icons/Docker.png'}" title="Docker">
<img
th:with=" img = ${assets_link + '/images/icons/Docker.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="Docker">
</div>
<div class="tags-group-icon" style="background:#4082c3">
<img th:src="${assets_link + '/images/icons/Photoshop.png'}" title="Photoshop">
<img
th:with=" img = ${assets_link + '/images/icons/Photoshop.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="Photoshop">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#fff">
<img th:src="${assets_link + '/images/icons/FinalCutPro.png'}" title="FinalCutPro">
<img
th:with=" img = ${assets_link + '/images/icons/FinalCutPro.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="FinalCutPro">
</div>
<div class="tags-group-icon" style="background:#fff">
<img th:src="${assets_link + '/images/icons/Python.png'}" title="Python">
<img
th:with=" img = ${assets_link + '/images/icons/Python.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="Python">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#eb6840">
<img th:src="${assets_link + '/images/icons/Swift.png'}" title="Swift">
<img
th:with=" img = ${assets_link + '/images/icons/Swift.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="Swift">
</div>
<div class="tags-group-icon" style="background:#8f55ba">
<img th:src="${assets_link + '/images/icons/Principle.png'}" title="Principle">
<img
th:with=" img = ${assets_link + '/images/icons/Principle.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="Principle">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#f29e39">
<img th:src="${assets_link + '/images/icons/illustrator.png'}" title="illustrator">
<img
th:with=" img = ${assets_link + '/images/icons/illustrator.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="illustrator">
</div>
<div class="tags-group-icon" style="background:#2c51db">
<img th:src="${assets_link + '/images/icons/CSS3.png'}" title="CSS3">
<img
th:with=" img = ${assets_link + '/images/icons/CSS3.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="CSS3">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#f7cb4f">
<img th:src="${assets_link + '/images/icons/JS.png'}" title="JS">
<img
th:with=" img = ${assets_link + '/images/icons/JS.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="JS">
</div>
<div class="tags-group-icon" style="background:#e9572b">
<img th:src="${assets_link + '/images/icons/HTML.png'}" title="HTML">
<img
th:with=" img = ${assets_link + '/images/icons/HTML.png'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="HTML">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#df5b40">
<img th:src="${assets_link + '/images/icons/Git.webp'}" title="Git">
<img
th:with=" img = ${assets_link + '/images/icons/Git.webp'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="Git">
</div>
<div class="tags-group-icon" style="background:#e65164">
<img th:src="${assets_link + '/images/icons/Apifox.webp'}" title="Apifox">
<img
th:with=" img = ${assets_link + '/images/icons/Apifox.webp'}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
title="Apifox">
</div>
</div>
</div>
@ -140,13 +280,23 @@
<div class="tags-group-icon"
th:style="'background:' + ${techOdd.background}"
th:with="techOdd = ${techs.get(iterStat.index - 1)}">
<img th:src="@{${techOdd.url}}" th:title="${techOdd.name}">
<img
th:with=" img = @{${techOdd.url}}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
th:title="${techOdd.name}">
</div>
<div class="tags-group-icon"
th:style="'background:' + ${techEven.background}"
th:with="techEven = ${tech}">
<img th:src="@{${techEven.url}}" th:title="${techEven.name}">
<img
th:with=" img = @{${techEven.url}}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
th:title="${techEven.name}">
</div>
</div>
</th:block>

12
templates/modules/widgets/top-group.html
View File

@ -14,10 +14,12 @@
<span class="recent-post-top-text"
th:attr="onclick='pjax.loadUrl(\''+ @{${post.status.permalink}} +'\')'">荐</span>
<img class="post_bg"
th:with=' img = ${#strings.isEmpty(post.spec.cover) ? postRandomImg+","+post.spec.title : post.spec.cover}'
th:alt="${post.spec.title}"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:data-lazy-src='${#strings.isEmpty(post.spec.cover) ? postRandomImg+","+post.spec.title : post.spec.cover}'
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
/>
</a>
</div>
@ -39,10 +41,12 @@
<span class="recent-post-top-text"
th:attr="onclick='pjax.loadUrl(\''+ @{${post.status.permalink}} +'\')'">荐</span>
<img class="post_bg"
th:with='img = ${#strings.isEmpty(post.spec.cover) ? postRandomImg+","+post.spec.title : post.spec.cover}'
th:alt="${post.spec.title}"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:data-lazy-src='${#strings.isEmpty(post.spec.cover) ? postRandomImg+","+post.spec.title : post.spec.cover}'
th:src="${isLazyload ? dataImage : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
/>
</a>
</div>

5
templates/moments.html
View File

@ -32,9 +32,10 @@
<div class="bber-container-img" th:if="${#strings.contains(content.medium,'PHOTO')}">
<img th:each="momentItem : ${content.medium}"
th:if="${momentItem.type.name == 'PHOTO'}"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
th:src="${isLazyload ? dataImage : momentItem.url}"
th:data-lazy-src="${ isLazyload ? momentItem.url : ''}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:data-lazy-src="${momentItem.url}" title="瞬间配图">
title="瞬间配图">
<div class="bber-content-noimg"></div>
<div class="bber-content-noimg"></div>
<div class="bber-content-noimg"></div>

10
templates/photos.html
View File

@ -30,10 +30,10 @@
<div class="fj-gallery-item"
th:each="photo : ${photoFinder.listBy(param.photo_group_name)}">
<div th:if="${theme.config.photos.tagEnable}" class="tag-address">[[${photo.spec.displayName}]]</div>
<img th:title="${photo.spec.description}"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
<img th:src="${isLazyload ? dataImage : photo.spec.url}"
th:title="${photo.spec.description}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:data-lazy-src="${photo.spec.url}"
th:data-lazy-src="${ isLazyload ? photo.spec.url : ''}"
th:alt="${photo.spec.description}">
</div>
@ -56,8 +56,8 @@
<div class="fj-gallery-item"
th:each="photo : ${photoFinder.listBy(param.photo_group_name)}">
<div th:if="${theme.config.photos.tagEnable}" class="tag-address">[[${photo.spec.displayName}]]</div>
<img th:data-lazy-src="${photo.spec.url}"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
<img th:src="${isLazyload ? dataImage : photo.spec.url}"
th:data-lazy-src="${ isLazyload ? photo.spec.url : ''}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:alt="${photo.spec.description}"
th:title="${photo.spec.description}">

10
templates/post.html
View File

@ -124,9 +124,10 @@
<div th:class="${postCursor.hasPrevious()==true && postCursor.hasNext()==false} ? 'prev-post2 pull-left postcarnepre' : 'prev-post pull-left'">
<a th:if="${postCursor.hasPrevious()}" th:href="@{${postCursor.previous.status.permalink}}">
<img alt="cover" id="preimg" class="nolazyload"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
th:with="img = ${#strings.isEmpty(postCursor.previous.spec.cover) ? theme.config.layout.postRandomImg : postCursor.previous.spec.cover}"
th:src="${isLazyload ? dataImage : img}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:data-lazy-src="${#strings.isEmpty(postCursor.previous.spec.cover) ? theme.config.layout.postRandomImg : postCursor.previous.spec.cover}">
th:data-lazy-src="${ isLazyload ? img : ''}">
<div class="pagination-info">
<div class="label">上一篇</div>
<div class="prev_info" th:text="${postCursor.previous.spec.title}"></div>
@ -136,9 +137,10 @@
<div th:class="${postCursor.hasPrevious()==false && postCursor.hasNext()==true} ? 'next-post2 pull-right postcarnepre':'next-post pull-right'">
<a th:if="${postCursor.hasNext()}" th:href="@{${postCursor.next.status.permalink}}">
<img alt="cover" id="preimg" class="nolazyload"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
th:with="img = ${#strings.isEmpty(postCursor.next.spec.cover) ? theme.config.layout.postRandomImg : postCursor.next.spec.cover}"
th:src="${isLazyload ? dataImage : img}"
th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
th:data-lazy-src="${#strings.isEmpty(postCursor.next.spec.cover) ? theme.config.layout.postRandomImg : postCursor.next.spec.cover}">
th:data-lazy-src="${ isLazyload ? img : ''}">
<div class="pagination-info">
<div class="label">下一篇</div>
<div class="next_info" th:text="${postCursor.next.spec.title}"></div>