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

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

阅读量：3951 次

发布时间：2019-05-24

本文共 1317 字，大约阅读时间需要 4 分钟。

文章目录

在首页添加了

告示板模块，有两种模式，一种是

自定义语句，一种是

一言API

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

: 添加打字机效果

: 关于font awesome图标字体库，使用动态图标，添加网页运行时间，全站变黑白，鼠标点击特效，网页标题的动态效果，网页樱花特效，鼠标触动音乐特效

: 添加旋转小人和每日诗句

: 关于valine添加一言，每日诗句，自定义表情，自定义背景

: 添加二级菜单的简单方法

: 文章添加密码功能

: 封面图片随机更换功能

说明

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

步骤

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

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


   
      <% if (theme.broadcast.enable && pagination == 2){ %>  <%- partial('_partial/broadcast') %>  <% } %>
      
    
         <%    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){ %>
       
        
    
     <%= theme.broadcast.text %>
    
   
<% } %><% if (theme.broadcast.type===2){ %>
       
        
    
   
<% } %>

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

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

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

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