主题美化文档
菜单
本页目录

文章blockquote颜色修改

<!-- Hao文章blockquote颜色修改开始 -->
<style>
[data-theme=dark] {
  --heo-secondbg: #30343f;
  #footer-banner{background: #30343f;}
  blockquote{background-color: #30343f;}
}
</style>
<!-- Hao文章blockquote颜色修改结束 -->

Hao主题添加微信公众号界面

打开/opt/1panel/apps/halo/Halo/data/themes/theme-hao，在theme.yaml中添加页面模版

      - name: 微信公众号模版
        description: 微信公众号
        screenshot:
        file: wechat.html

在/opt/1panel/apps/halo/Halo/data/themes/theme-hao/templates目录下新建wechat.html，源码如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'page',title = ${singlePage.spec.title + ' | ' + site.title}, head = ~{::head})}">
<th:block th:fragment="head">
    <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = ${singlePage.spec.title},
                _permalink = ${singlePage.status.permalink},
                _cover = ${singlePage.spec.cover},
                _excerpt = ${singlePage.status.excerpt},
                _type = 'website')}"></th:block>
</th:block>
<th:block th:fragment="content">

    <div class="page" id="body-wrap">

        <!-- 头部导航栏 -->
        <header class="not-top-img" id="page-header">
            <nav th:replace="~{modules/nav :: nav(title = ${singlePage.spec.title})}"></nav>
        </header>
        <main class="layout hide-aside" id="content-inner">
            <div id="page">
                <!-- <h1 class="page-title">博客运营模式及公众号说明</h1> -->
                <div class="rss-plan-list"><a class="rss-plan-item rss-plan-wechat"  
                    th:href="${theme.config.wechat.wechat_link}" title="公众号"
                        target="_blank">
                        <div class="rss-plan-description">推送精选文章<br>推送全文</div>
                        <div class="rss-plan-info-group">
                            <div class="rss-plan-title">公众号订阅</div>
                            <div class="rss-plan-info">推荐的订阅方式</div><img class="rss-plan-icon entered loaded"
                            th:src="@{/assets/images/wechat/6401bd0b742d8.png}"
                                data-lazy-src="https://bu.dusays.com/2023/03/03/6401bd0b742d8.png" alt="wechat"
                                data-ll-status="loaded">
                        </div>
                    </a>
                    <a class="rss-plan-item rss-plan-mail" th:href="${theme.config.wechat.mail_link}" rel="external nofollow"
                        title="邮件" target="_blank">
                        <div class="rss-plan-description">推送全部文章<br>推送封面与简介</div>
                        <div class="rss-plan-info-group">
                            <div class="rss-plan-title">邮件订阅</div>
                            <div class="rss-plan-info">推荐的订阅方式</div><img class="rss-plan-icon entered loaded"
                            th:src="@{/assets/images/wechat/6401bd1d3751d.png}"
                                data-lazy-src="https://bu.dusays.com/2023/03/03/6401bd1d3751d.png" alt="wechat"
                                data-ll-status="loaded">
                        </div>
                    </a>
                    <a class="rss-plan-item rss-plan-rss" th:href="${theme.config.wechat.rss_link}" href="/rss.xml" title="rss"
                        target="_blank">
                        <div class="rss-plan-description">推送全部文章<br>推送简介</div>
                        <div class="rss-plan-info-group">
                            <div class="rss-plan-title">RSS</div>
                            <div class="rss-plan-info">备用订阅方式</div><img class="rss-plan-icon entered loaded"
                            th:src="@{/assets/images/wechat/6401bd322fc4a.png}"    
                                data-lazy-src="https://bu.dusays.com/2023/03/03/6401bd322fc4a.png" alt="wechat"
                                data-ll-status="loaded">
                        </div>
                    </a>
                </div> 
                <!-- 获取微信公众号页面自定义的内容 -->
                <div class="flink" id="article-container">
                    <th:block  th:utext="${singlePage.content.content}"></th:block>
                </div>

                <th:block th:replace="~{modules/comment :: comment(group = 'content.halo.run',
                  kind = 'SinglePage',
                  name = ${singlePage.metadata.name},
                  allowComment = ${singlePage.spec.allowComment})}" />
            </div>
        </main>
        <!-- 底部 -->
        <footer th:replace="~{modules/footer}" />
        <!-- 卡片顶部气泡效果 -->
        <script th:if="${theme.config.other.bubbleEnable}" async data-pjax
            th:src="${assets_link + '/libs/canvas/bubble.js'}"></script>
    </div>

</th:block>

</html>

在/opt/1panel/apps/halo/Halo/data/themes/theme-hao/templates/assets/images/wechat目录下，上传三张图片

  • 6401bd0b742d8.png

  • 6401bd1d3751d.png

  • 6401bd322fc4a.png

打开/opt/1panel/apps/halo/Halo/data/themes/theme-hao/settings.yaml，添加配置


    - group: wechat
      label: 微信公众号
      formSchema:
        - $formkit: text
          name: wechat_link
          label: 公众号订阅
        - $formkit: text
          name: mail_link
          label: 邮件订阅
        - $formkit: text
          name: rss_link
          label: RSS订阅

在线工具页

<div class="author-content author-content-item essayPage single" style="background:url(/upload/v178.png) left 28% / cover no-repeat !important;">
    <div class="card-content">
        <div class="author-content-item-tips">效率</div>
        <span class="author-content-item-title">在线工具推荐</span> 
        <div class="content-bottom">
            <div class="tips">跟 米尔嘉 一起高效的数字生活</div>
        </div>   
    </div><canvas id="header_canvas" width="920" height="1014" style="position: absolute; bottom: 0px;"></canvas></div>

<hao-flink name="AI工具" desc="让人工智能帮助你完成枯燥的工作" style="default"> 
    <div class="_tpl"> 
     {chatGPT,https://chat.openai.com/,https://bu.yyds.pink/blog/img/64f0ab6c1e0c0.png,文字AI巅峰}{Midjourney,https://www.midjourney.com/home/,https://bu.yyds.pink/blog/img/64f0ab6c54f06.jpg,超级方便的AI绘画工具}
    </div></hao-flink>

书籍电影分享界面

<link rel="stylesheet" href="https://cdn.minterjia.com/css/hao.css"><script async="" data-pjax="" src="https://npm.onmicrosoft.cn/hao-theme-static@1.3.9/templates/assets/libs/canvas/bubble.js"></script><div class="author-content author-content-item toolPage single" style="background:url(/upload/v626.png) left 28% / cover no-repeat !important;">
     <div class="card-content">
       <div class="author-content-item-tips">收藏</div>
          <span class="author-content-item-title">电影分享</span>
             <div class="content-bottom">
                  <div class="tips">跟随米尔嘉一起探索电影</div>
              </div>
        </div><canvas id="header_canvas" width="1138" height="2124" style="position: absolute; bottom: 0px;"></canvas></div><h2 style="margin-bottom:12px">电影分享 (7)</h2><div class="hao-douban-show" id="hexo-douban-item3">
				<div class="hao-douban-item">
					<div class="hao-douban-picture" title="人生大事">
						<a target="_blank" href="https://movie.douban.com/subject/35460157/" rel="external nofollow"><img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2874262709.webp" data-lazy-src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2874262709.webp" data-src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2874262709.webp" referrerpolicy="no-referrer" data-ll-status="loaded" class="entered loaded"></a>
					</div>
					<div class="hao-douban-info">
						<div class="hao-douban-title" title="人生大事">
							<a target="_blank" href="https://movie.douban.com/subject/35460157/" rel="external nofollow">人生大事</a>
						</div>
						<div class="hao-douban-meta">2022-07-05 / ★★★★★ 力荐</div>
						<div class="hao-douban-comments">非常的感人，是一部非常值得看的电影</div>
					</div>
				</div>
			</div>
上一篇 pix主题美化
下一篇 butterfly主题美化