Halo博客walker主题适配<豆瓣插件>
编辑
201
2024-07-26
增加一个豆瓣页面可以让你的博客更加丰富多彩,提供个性化的书影音分享功能。本文仅针对使用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>
把模板上传到服务器
在服务器上找到对应的目录把douban.html丢进去即可
xxxx/themes/theme-walker/templates/ ,xxxx为你搭建halo时映射的具体路径
可以看到还有其它.html文件,douban.html就是复制的links.html进行修改来实现最终效果的。如果你是walker主题直接复制我改好的就行了
测试效果
再去访问https://xxxx.com/douban 就能看到效果 如本站: https://www.wxy97.com/douban
夜间模式
如果没效果,可以去主题菜单 选择清理缓存后再刷新页面查看效果
- 7
- 2
-
分享