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

文章目录

说明步骤第一步 找到对应的首页文章页的代码文章第二步 创建`broadcast.ejs`文件第三步 打开主题的配置文件第四步 效果 在 我的博客首页添加了 告示板模块，有两种模式，一种是 自定义语句，一种是 一言API

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

Type.js打字机效果: 添加打字机效果博客中能用到的代码: 关于font awesome图标字体库，使用动态图标，添加网页运行时间，全站变黑白，鼠标点击特效，网页标题的动态效果，网页樱花特效，鼠标触动音乐特效博客中能用到的代码（二）: 添加旋转小人和每日诗句博客美化之Valine: 关于valine添加一言，每日诗句，自定义表情，自定义背景添加二级菜单: 添加二级菜单的简单方法添加博客加密: 文章添加密码功能Hexo博客美化之随机封面: 封面图片随机更换功能

说明

本文是以我现在使用的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 = "#" + " " + 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时有效

第四步 效果

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