hexo landscape主题添加公告板

目录
  1. 1. 创建broadcast.ejs文件
  2. 2. 添加broadcast_widget.ejs文件
  3. 3. 主题配置_config.landscape.yml修改

给hexo默认主题添加了一个公告板，可以显示自定义语句，随机一言或每日诗词。

把公告板作为widget显示在侧边栏上。

创建broadcast.ejs文件

位置：/layout/_partial/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<% if (theme.broadcast.type===1 && theme.broadcast.text){ %>
<div class="notice" style="margin-top:50px">
    <i class="fa <%- theme.broadcast.icon -%>"></i>
    <div class="notice-content"><%= theme.broadcast.text %></div>
</div>
<% } %>
<% if (theme.broadcast.type===2){ %>
<div class="notice" style="margin-top:50px">
    <i class="fa <%- theme.broadcast.icon -%>"></i>
    <div class="notice-content" id="broad"></div>
</div>
<script type="text/javascript">
   fetch('https://v1.hitokoto.cn')
    .then(response => response.json())
    .then(data => {
      document.getElementById("broad").innerHTML=data.hitokoto;
    })
    .catch(console.error)
</script>
<% } %>
<% if (theme.broadcast.type===3){ %>
    <div class="notice" style="margin-top:50px">
        <i class="fa <%- theme.broadcast.icon -%>"></i>
        <div class="notice-content"><span id="jinrishici-sentence">正在加载今日诗词....</span></div>
        <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8" async></script>
    </div>
    <% } %>
<style> 
.notice {
    padding: 20px;
    border: 1px dashed #e6e6e6;
    color: #f90606;  
    position: relative;
    display: inline-block;
    width: 100%;
    background: #fbfbfb50;
    border-radius: 10px;
}
.notice i{
    float: left;
    color: #999;
    font-size: 18px;
    padding-right: 10px;
    vertical-align: middle;
    margin-top:3px;
}
.notice-content{
    display: initial;
    vertical-align: middle;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">

增加了type=3显示每日诗词。

添加broadcast_widget.ejs文件

位置：/layout/_widget/

1
2
3
4
5
6
7
8
9
<% if (theme.broadcast.enable){ %>
    <div class="widget-wrap">
        <h3 class="widget-title">公告板</h3>
        <div class="widget">
            <%- partial('_partial/broadcast') %>
        </div>
      </div>
    
    <% } %>

主题配置_config.landscape.yml修改

  • 1
    1
    2
    widgets:
    - broadcast_widget
    公告板放在侧边栏最上面。
  • 2
    1
    2
    3
    4
    5
    broadcast:
      enable: true   #true开启，false关闭
      icon:   #fontawesome图标库，格式如示例 fa-bookmark
      type: 3 #1：自定义输入，2：一言api 3：今日诗词
      text: 持续更新中...  #type为1时有效

参考：
Hexo博客 | 如何在博客首页添加公告板模块 ayer主题方案

Top, Home
, ,