添加随机图片 API

settings.yaml

@@ -89,45 +89,12 @@ spec:
             - label: 四列
               value: col4
           help: "选择单列时，文章卡片的图片将位于左侧"
-        - $formkit: select
-          name: header_widget
-          label: 首页顶部模块
-          value: none
-          options:
-            - label: 无
-              value: none
-            - label: 最新一篇文章
-              value: latest_post
-            - label: 文章网格（最新五篇文章）
-              value: latest_post_grid
-            - label: 轮播图
-              value: carousel
-            - label: 站点标题
-              value: site_title
-        - $formkit: select
-          name: header_background_type
-          label: 首页顶部背景
-          value: manual
-          options:
-            - label: 手动设置
-              value: manual
-            - label: 图片
-              value: image
-        - $formkit: text
-          name: header_background
-          label: 首页顶部背景
-        - $formkit: text
-          name: header_background_image
-          label: 首页顶部背景图片
-        - $formkit: radio
-          name: content_header
-          label: 文章页顶部
-          value: true
-          options:
-            - label: 显示
-              value: true
-            - label: 隐藏
-              value: false
+        - $formkit: url
+          name: post_random_img
+          label: 博客封面随机 API
+          validation: "url"
+          value: "https://source.unsplash.com/random/600x400/?blog,scenery,night,desert,sea"
+          help: 默认随机封面图 url 不能保证一直可用
     - group: sidebar
       label: 侧边栏
       formSchema:

templates/modules/post-list.html

@@ -7,12 +7,12 @@
 
     <!-- card，需要添加在没有图片时使用随机图片 -->
     <div class="recent-post-item" th:each="post : ${postItems}" th:classappend="${theme.config.layout.cols}">
+
         <div class="post_cover left_radius">
             <a th:attr="title=${post.spec.title}" th:href="${post.status.permalink}">
-                <img class="post_bg entered loaded"
+                <img class="post_bg entered loaded" loading="lazy"
                      th:alt="${post.status.excerpt}"
-                     th:attr="data-lazy-src=${post.spec.cover}"
-                     th:src="${post.spec.cover}">
+                     th:src="${#strings.isEmpty(post.spec.cover) ? theme.config.layout.post_random_img : post.spec.cover}">
             </a>
         </div>
         <!-- 类别非空时 -->
@@ -64,6 +64,7 @@
         </div>
     </div>
 
+
     <nav id="pagination" th:if="${posts.hasPrevious() || posts.hasNext()}">
 
         <!-- 页面小于 7 -->

templates/post.html

@@ -6,7 +6,8 @@
         <header class="post-bg" id="page-header" th:style="'background-image:url(' + ${post.spec.cover} + ')'">
             <nav th:replace="modules/nav :: nav"></nav>
             <div class="coverdiv" id="coverdiv">
-                <img loading="lazy" alt="cover" id="post-cover" th:src="${post.spec.cover}">
+                <img alt="cover" id="post-cover" loading="lazy"
+                     th:src="${#strings.isEmpty(post.spec.cover) ? theme.config.layout.post_random_img : post.spec.cover}">
             </div>
 
             <div id="post-info">
@@ -202,7 +203,7 @@
                         <!-- 建议阅读，这里可以自定义文章数量，然后遍历展示 -->
                         <div>
                             <a href="#" title="相关推荐文章">
-                                <img loading="lazy" alt="cover" class="cover"
+                                <img alt="cover" class="cover" loading="lazy"
                                      src="https://t7.baidu.com/it/u=91673060,7145840&fm=193&f=GIF">
                                 <div class="content is-center">
                                     <div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-05-28</div>