You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在Blogger中创建全局<b:includable>并在<b:widget>与<b:section>外添加?

嘿,我来帮你搞定Blogger里全局<b:includable>的创建和调用问题,这玩意儿能帮你大幅提升模板代码的复用性,不用重复写相同的片段~

一、创建全局<b:includable>标签

全局的<b:includable>必须放在模板的<b:template>根标签下,所有<b:section><b:widget>的外面——这样它才能被模板的任何位置访问到,不会局限在某个区域内。

举个实际例子,比如我们创建一个可复用的全局版权声明片段:

<b:template>
  <!-- 全局includable就放在这里,作为<b:template>的直接子元素 -->
  <b:includable id="global-copyright" var="currentYear">
    <div class="copyright-text">
      © <data:currentYear> 我的个人博客 | 保留所有权利
    </div>
  </b:includable>

  <!-- 下面是你模板原本的sections、widgets代码,不用动它们 -->
  <b:section id="header-section" class="header" maxwidgets="1">
    <b:widget id="Header1" type="Header" locked="true">
      <!-- 头部部件内容 -->
    </b:widget>
  </b:section>

  <b:section id="main-content" class="main" maxwidgets="2">
    <!-- 内容区域部件 -->
  </b:section>
</b:template>

这里的关键细节:

  • id是这个includable的唯一标识,必须独一无二,不能和模板里其他includable重名
  • var是可选的参数,用来给这个片段传递动态数据(比如上面的年份),如果不需要参数可以省略
二、在<b:widget>/<b:section>外部调用全局includable

创建好之后,你可以在模板的任何位置(包括section和widget外面)用<b:include>标签调用它,语法很简单:

带参数的调用

如果你的includable定义了参数,调用时用data属性传递数据:

<!-- 比如在模板最底部的版权区域(section/widget外面)调用 -->
<footer class="site-footer">
  <b:include name="global-copyright" data='{"currentYear": "2024"}'/>
</footer>

不带参数的调用

如果没有参数,直接写name即可:

<b:include name="global-copyright"/>
几个需要注意的坑
  • 全局includable不能嵌套在任何<b:section><b:widget>或者其他<b:includable>里面,否则会变成局部的,只能在嵌套范围内调用
  • 调用时的name必须和includable的id完全匹配,大小写敏感哦(比如global-copyrightGlobal-Copyright是两个不同的标识)
  • 如果需要传递多个参数,data里可以放多个键值对,比如data='{"year": "2024", "author": "小明"}',然后在includable里用<data:author>获取对应值

内容的提问来源于stack exchange,提问作者user9493137

火山引擎 最新活动