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:一言apitext: justlovesmile.top持续更新中... #type为1时有效
第四步 效果
更多文章在我的博客https://justlovesmile.top
Hexo博客 | 前端美化之添加公告板---基于Ayer主题有两种模式相关推荐
- Hexo 博客优化之实用功能添加系列(持续更新)
2022-01-25 更新:博客新地址:https://www.itbob.cn/,文章距上次编辑时间较远,部分内容可能已经过时! 本文将讲述一些 Hexo 博客实用功能的添加,本文以作者 luuma ...
- 新手如何给Hexo博客在复制时添加版权声明
文章首发于公众号[只是学习学习]欢迎关注 1. 确认需要版权声明的位置 通常情况下都是在拷贝博客详情内容时才给拷贝的内容添加版权信息,如果不管拷贝哪里的内容都给添加版权声明,影响用户体验.所以第一步确 ...
- Hexo 博客优化之博客美化系列(持续更新)
2022-01-25 更新:博客新地址:https://www.itbob.cn/,文章距上次编辑时间较远,部分内容可能已经过时! 本文将讲述一些 Hexo 博客的美化,本文以作者 luuman 的 ...
- hexo博客添加本地搜索功能
写在前面 本文主要描述了怎么添加hexo博客搜索插件,然后启动搜索功能,对两个本地搜索插件的使用进行了描述,文章可能还有很多不足,请大家谅解,欢迎大佬提意见. 本文用的东西 hexo 3.1.0 wi ...
- hexo博客中添加音乐播放器
1. 简介 本篇文章是介绍基于网易云iframe插件在hexo博客中加装音乐播放器的方法,无需安装任何额外插件. 2.安装步骤 在网易云音乐中打开你想要插入的音乐页面,点击 生成外联播放器. 在网页中 ...
- 使用statcounter统计Hexo博客访问量
title: 使用statcounter统计Hexo博客访问量 date: 2019-05-30 20:55:29 tags: 配置 --- 介绍 statcounter是一个提供网站访问统计服务的网 ...
- hexo 博客创建、部署、美化过程记录
hexo 博客创建.部署.美化过程记录 前言 作为一名信息工程专业的学生,编程语言没学多少,正规讲过的且了解比较深的是C++,也只是一些基本的编程,连数据库.数据结构还有各种算法都没学过,python ...
- hexo博客添加暗色模式_我如何向网站添加暗模式
hexo博客添加暗色模式 同一个网站,两种不同的配色方案 (Same website, two different color schemes) Last year I made it a point ...
- Hexo博客主题Next添加动态线条背景canvas_nest
欢迎光临我的博客查看最新文章: https://river106.cn Hexo 版本:5.4.0 Next版本:8.7.1 为了美化Hexo博客,可以给博客添加动态线条背景,这里使用canvas_ ...
- Hexo博客美化日记 || Amnesia’s Blog
如何引入自定义的 CSS/JS 文件 通过主题配置 inject 可以引入外部的自定义 CSS 文件和 JS 文件.例如: inject:head:- <link rel="style ...
最新文章
- php5.3.3下安装ffmpeg
- 2016-05-29 for循环几种应用
- qt弹簧教程_弹簧启动执行器教程
- windows下部署一天日报系统
- Python版本的查看
- 用vue做一个app
- [生成模型新方向]: score-based generative models
- 文件服务器索引服务,ftp服务器文件索引
- CNN(卷积神经网络)的深度
- css响应式布局及分辨率(PC端、H5端)
- rm: cannot remove `xxx’: Operation not permitted的解决方法
- 最新Spring Boot实战项目(权限后台管理系统)详解
- socket常用参数解释
- 关于HTML网页生成网站
- hdu-4745 Two Rabbits
- legoloam系列算法之点云处理与特征提取
- 关于Gson的TypeToken
- python关闭当前窗口 打开新窗口_关闭窗口,用PyQ在Python中打开一个新窗口
- centos7.4安装MySQL
- Nios II的Boot过程分析
热门文章
- python:list(列表)输出一组数中的每一个元素
- 上海市上年度硕士抽检还查重吗?
- python就业有学历要求吗_低学历学python就业的话可行吗?
- Ubuntu22.04 安装NVIDIA显卡驱动
- 申请 FDA ESG 签名数字证书
- EOS Platform版本 数据库初始化脚本位置
- 只有华为手机才能升鸿蒙系统吗,结果水落石出!华为手机升级鸿蒙系统,只需要满足一个条件...
- Java输出保留%的百分号数
- 数据挖掘应用案例:RFM模型分析与客户细分
- ssm毕设项目社区闲置物品交易平台z10mc(java+VUE+Mybatis+Maven+Mysql+sprnig)