Halo博客walker主题适配<豆瓣插件>

增加一个豆瓣页面可以让你的博客更加丰富多彩，提供个性化的书影音分享功能。本文仅针对使用Halo程序 walker主题的小伙伴,当然Halo其它主题有的提供的有douban页面模板不用修改即可，有的没有也可按照本教程对douban.html 自行修改!

安装豆瓣插件

在你的console后台找到应用市场搜索豆瓣并安装

根据豆瓣文档完成配置

这个时候访问你的博客地址: https://xxxx.com/douban 即可看到默认的douban页面

由于walker 主题没有提供douban模板所以这个路由页面相比于其他页面看起来比较突兀，并且没有我们的导航菜单

新建douban.html模板

这个时候我们可以自己写一个douban.html页面放到我们的walker 主题目录中去

<!DOCTYPE html>
<html
  xmlns:th="https://www.thymeleaf.org"
  th:replace="~{modules/layout :: html(title = |影读 - ${site.title}|, content = ~{::content}, head = null, opengraph = ~{::opengraph})}"
>
  <th:block th:fragment="opengraph">
    <!-- Open Graph Start -->
    <meta property="og:site_name" th:content="${site.title}" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="影读" />
    <meta property="og:url" th:content="|${site.url}/douban|" />
    <meta
      th:unless="${#strings.isEmpty(site.seo.description)}"
      property="og:description"
      th:content="${site.seo.description}"
    />
    <meta
      th:unless="${#strings.isEmpty(theme.config.opengraph.image)}"
      property="og:image"
      th:content="${theme.config.opengraph.image}"
    />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="影读" />
    <meta name="twitter:url" th:content="|${site.url}/douban|" />
    <meta
      th:unless="${#strings.isEmpty(site.seo.description)}"
      name="twitter:description"
      th:content="${site.seo.description}"
    />
    <meta
      th:unless="${#strings.isEmpty(theme.config.opengraph.image)}"
      name="twitter:image"
      th:content="${theme.config.opengraph.image}"
    />
    <!-- Open Graph End -->
  </th:block>

  
  <th:block th:fragment="content">
    <div class="main flex flex-col px-4 lg:flex-row">
      <th:block th:replace="~{modules/sidebar}" />
      <div class="content-wrapper pt-32 lg:w-3/4 lg:p-8" :class="{ 'is-second' : menuVisible }">
        <h2 class="mb-8 inline-flex items-center gap-2 text-lg text-base-content/90">
          <i class="i-ri-douban-line inline-block"></i>
          影读
        </h2>
        <div class="flex flex-col gap-5">
                    <div class="post-content">
                        <section class="db--container">
                            <nav class="db--nav">
                                <div th:each="type : ${types}" class="db--navItem JiEun"
                                    th:classappend="${type.key == 'movie' ? 'current' : ''}" th:data-type="${type.key}"
                                    th:text="${type.key}"></div>
                            </nav>
                            <div class="db--genres"></div>
                            <div class="db--type">
                                <div class="db--typeItem" data-status="mark">想看</div>
                                <div class="db--typeItem" data-status="doing">在看</div>
                                <div class="db--typeItem is-active" data-status="done">看过</div>
                            </div>
                            <div class="db--list db--list__card" data-type="movie">

                            </div>
                            <div class="block-more block-more__centered">
                                <div class="lds-ripple u-hide">
                                </div>
                            </div>
                        </section>
                    </div>
        </div>
      </div>
    </div>
	  	 <script th:src="@{/plugins/plugin-douban/assets/static/db.min.js?v={version}(version='1.1.4')}"></script>
		 <link rel="stylesheet" id="wpd-css-css" th:href="@{/plugins/plugin-douban/assets/static/db.min.css}" type="text/css"
        media="screen">
    <style>      
      /* 豆瓣夜间模式 */
      [data-theme="dark"] {
        --text-color: #717884;
      }
      /* 应用变量到元素 */
     .db--title,.db--titleDate, .db--titleDate__month,.db--titleDate__day,.db--score, .db--navItem, .db--typeItem {
        color: var(--text-color);
      }
    </style>
  </th:block>
</html>