在 我的博客首页添加了
告示板模块
,有两种模式,一种是
自定义语句
,一种是
一言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