Halo博客walker主题适配<豆瓣插件>
504
2024-07-26
增加一个豆瓣页面可以让你的博客更加丰富多彩，提供个性化的书影音分享功能。本文仅针对使用Halo程序 walker主题的小伙伴,当然Halo其它主题有的提供的有douban页面模板不用修改即可，有的没有也可按照本教程对douban.html 自行修改!
安装豆瓣插件
在你的console后台找到应用市场搜索豆瓣并安装
根据豆瓣文档完成配置
这个时候访问你的博客地址: https://xxxx.com/douban 即可看到默认的douban页面
由于walker 主题没有提供douban模板 所以这个路由页面相比于其他页面看起来比较突兀，并且没有我们的导航菜单
新建douban.html模板
这个时候我们可以自己写一个douban.html页面放到我们的walker 主题目录中去
walker版本<1.17.0
<!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>walker版本>=1.17.0
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark" data-overlayscrollbars-initialize>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title th:text="|影读 - ${site.title}|"></title>
<th:block th:if="${theme.config.opengraph.enabled}">
<!-- 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>
<script th:inline="javascript">
var walker = {
colorSchemeSettings: /*[(${theme.config.styles.color_scheme})]*/ {},
activeColorScheme: "system",
};
</script>
<style th:inline="css">
.main {
max-width: /*[(${theme.config.styles.content_width})]*/ "1200px";
margin: 0 auto;
}
</style>
<noscript>
<style>
body {
display: block !important;
}
</style>
</noscript>
<script type="module" crossorigin src="/themes/theme-walker/assets/archives-CLBAB3v5.js" integrity="sha384-tNGnmkKz3lrsFakqnHrkVNRqb27uRRaRbS0+dq+B1jVUDw5/zSJB7Ej8wKUvN7hY"></script>
<link rel="modulepreload" crossorigin href="/themes/theme-walker/assets/vendor~archives~author~categories~category~index~links~moment~moments~page-links~page~photo~cqdj3oqp-R5jBzZ3P.js" integrity="sha384-yI+uKBdPTtVgi53h1cF7beXWHpNV5j5psAG3oQTYxOcJ55LU4afJR7Pa+NbTNqtb">
<link rel="modulepreload" crossorigin href="/themes/theme-walker/assets/main-z9Ux024Z.js" integrity="sha384-M56Ihg+u+8mdPOA5WvgtZk8fEy+iPDDu1IUUHW2w0rsJh5+RSYbbh2cP9o+vZ8y9">
<link rel="stylesheet" crossorigin href="/themes/theme-walker/assets/vendor~archives~author~categories~category~index~links~moment~moments~page-links~page~photo~cqdj3oqp-Cqyayk8v.css" integrity="sha384-SEoCM3KNlsXXGWZHWeucw7zKigdItJRQ0DqrRj8KrMYXLcKqSkFnAlOkCrvswBtM">
<link rel="stylesheet" crossorigin href="/themes/theme-walker/assets/main-DME07mls.css" integrity="sha384-SIYyrqJL/OnQzH19lPjpHPfRgCbyfhHx8tbYLKJ9oO/XnD5ubrryRMiNN0/S9HK/">
</head>
<body x-data="app" class="hidden" data-overlayscrollbars-initialize>
<div class="fixed left-0 right-0 top-0 z-50 flex items-center bg-base-100 p-4 shadow-sm lg:hidden">
<i class="animated fadeIn i-ri-menu-2-line inline-block cursor-pointer text-2xl" @click="openMenu()"> </i>
<a th:href="${site.url}">
<img
class="animated fadeIn avatar mx-4 mt-0 size-9"
th:src="${site.logo}"
th:classappend="${theme.config.sidebar.avatar_shape == 'square' ? 'rounded-lg' : 'rounded-full' }"
th:alt="${site.title}"
width="36"
height="36"
/>
</a>
<h1
th:text="${theme.config.sidebar.title ?: site.title}"
class="animated fadeIn mt-0 text-xl font-extrabold"
style="animation-delay: 0.1s"
></h1>
<!-- https://github.com/halo-sigs/plugin-search-widget -->
<div class="flex flex-1 items-center justify-end gap-4">
<a
th:if="${pluginFinder.available('PluginSearchWidget')} and ${#execInfo.processedTemplateName != 'search'}"
class="animated fadeIn i-ri-search-line inline-block cursor-pointer text-xl text-base-content/60 hover:text-base-content"
th:href="${theme.config.sidebar.search_mode == 'modal' ? 'javascript:SearchWidget.open()' : '/search'}"
></a>
<color-scheme-switcher
th:if="${theme.config.styles.color_scheme.enable_change}"
class="inline-flex [&>*>i]:text-xl"
th:type="${theme.config.styles.color_scheme.switcher_type}"
></color-scheme-switcher>
</div>
</div>
<th:block th:fragment="content">
<div id="app" 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>
<footer class="mt-10 space-y-2 bg-base-100 py-8">
<hr class="my-6 border-base-content/5 sm:mx-auto lg:my-8" />
<span class="container mx-auto block text-center text-sm text-base-content/70">
©
<th:block th:text="${#dates.format(new java.util.Date().getTime(), 'yyyy')}" />
<a href="/" th:text="${site.title}"></a>
<th:block th:utext="${theme.config.footer.copyright}" />
</span>
<span class="container mx-auto block text-center text-sm text-base-content/70">
<halo:footer />
</span>
</footer>
<button
type="button"
id="btn-scroll-to-top"
class="fixed bottom-5 right-5 flex items-center justify-center rounded-full bg-neutral p-3 opacity-0 shadow transition-all duration-300 hover:opacity-70 hover:shadow-lg lg:bottom-10 lg:right-10"
>
<span class="i-tabler-chevron-up text-2xl text-neutral-content"></span>
</button>
</body>
</html>把模板上传到服务器
在服务器上找到对应的目录把douban.html丢进去即可
xxxx/themes/theme-walker/templates/ ，xxxx为你搭建halo时映射的具体路径
可以看到还有其它.html文件，douban.html就是复制的links.html进行修改来实现最终效果的。如果你是walker主题直接复制我改好的就行了
测试效果
再去访问https://xxxx.com/douban 就能看到效果 如本站: https://www.wxy97.com/douban
夜间模式
如果没效果，可以去主题菜单 选择清理缓存后再刷新页面查看效果
