Hexo博客Ayer主题美化之添加公告板---有两种模式

我的博客首页添加了告示板模块,有两种模式,一种是自定义语句,一种是一言API

image

发现写了很多博客美化的文章了,罗列了一下

说明

本文是以我现在使用的Ayer主题为例

步骤

第一步 找到对应的首页文章页的代码文章

例如,ayer主题的位于hexo\themes\ayer\layout\_partial\archive.ejs

<section class="outer">
<!-- 找到这里,添加代码 -->
  <% if (theme.broadcast.enable && pagination == 2){ %>
  <%- partial('_partial/broadcast') %>
  <% } %>
<!-- 到这里结束 -->
  <article class="articles">
    <%
    var title = '';
    if (page.category) title = page.category;
    if (page.tag) title = "#" + "&nbsp" + page.tag;
    if (page.archive) {
      if (page.year) title = page.year + (page.month ? '/' + page.month : '');
      else title = __('archive_a');
    }
    %>

第二步 创建broadcast.ejs文件

在第一步里,<%- partial('_partial/broadcast') %>调用了_partial文件夹里面的broadcast.ejs文件,因此需要自己创建一个,内容为:

<% 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>
<% } %>
<style>
.notice {
    padding: 20px;
    border: 1px dashed #e6e6e6;
    color: #969696;
    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">

当然,为了优化,也可以自己把css整合到css文件中,或者把cdn文件放到after-footer里,这里不再详述

第三步 打开主题的配置文件

注意是主题的配置文件!打开后添加配置项:

# 告示板模块
broadcast:
  enable: true   #true开启,false关闭
  icon: fa-bookmark  #fontawesome图标库,格式如示例
  type: 2 #1:自定义输入,2:一言api
  text: justlovesmile.top持续更新中...  #type为1时有效

第四步 效果

image

更多文章在我的博客https://blog.justlovesmile.top