目 录CONTENT

文章目录

hexo教程:hexo-electric-clock 电子时钟插件

XiaoWan💞
2022-08-05 / 0 评论 / 0 点赞 / 68 阅读 / 619 字 / 正在检测是否收录...

前言:

效果如下:

img

NPM 插件安装的部署方法:

npm i hexo-electric-clock --save
#或者
cnpm i hexo-electric-clock --save

注意,一定要加 --save,不然本地预览的时候可能不会显示!!!

新增网站根目录_config 配置项 (不是主题的):

electric_clock:
  priority: 5
  enable: true
  enable_page: all
  layout:
    type: class
    name: sticky_layout
    index: 0
  temple_html: '<div class="card-widget card-clock"><div class="card-glass"><div class="card-background"><div class="card-content"><div id="hexo_electric_clock"><img id="card-clock-loading" src="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-clock/clock/images/weather/loading.gif" style="height: 120px; width: 100%;" data-ll-status="loading" class="entered loading"></div></div></div></div></div>'

enable

**参数:**true/false
**含义:**是否开启插件

enable_page

**参数:**all
**含义:**路由地址,all 代表全局开启。如 / 代表主页。

priority

**参数:**1
**含义:**插件的叠放顺序,数字越大,叠放约靠前。

electric_clock:
  enable: true
  priority: 5 # 这里是参数

layout

**参数:**type; (class&id)
**参数:**name;
**参数:**index;(数字)
**含义:**如果说 electric_clock 是一幅画,那么这个 layout 就是指定了哪面墙来挂画
而在 HTML 的是世界里有两种墙分别 type 为 id 和 class。
其中在定义 class 的时候会出现多个 class 的情况,这时就需要使用 index,确定是哪一个。
最后墙的名字即是 name;

<div desc="我是墙" id="recent-posts">
  <!-- id=>type  recent-posts=>name    -->
  <div desc="我是画框">
    <div desc="我是纸">
      <!--这里通过js挂载electric_clock,也就是画画-->
    </div>
  </div>
</div>

temple_html

**参数:**html 模板字段
**含义:**包含挂载容器

<div class="card-widget card-clock">
  <!-- 挂载容器 -->
  <div class="card-glass">
    <div class="card-background">
      <div class="card-content">
        <div id="hexo_electric_clock">
          <img
            id="card-clock-loading"
            src="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-clock/clock/images/weather/loading.gif"
            style="height: 120px; width: 100%;"
            data-ll-status="loading"
            class="entered loading"
          />
        </div>
      </div>
    </div>
  </div>
</div>

hexo 三连

执行 hexo 三连

hexo clean && hexo g && hexo s

即可发现已经成功部署。

0

评论区