给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显示每日诗词。
位置:/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 icon: type: 3 text: 持续更新中...
|

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