Hexo-Matery主题细致美化
文章目录
- Hexo-Matery主题美化
-
-
- 下载安装Matery主题
-
- 切换主题
- 新建页面
-
- 1、标签页
- 2、分类页
- 3、关于页面
- 4、留言板
- 5、友情链接
- 6、添加 404 页面
- 7、添加自定义页面
- 配置菜单导航
-
- 二级菜单配置方法
- 添加 emoji 表情支持
- 代码高亮
- 主题的搜索功能
- 文章字数统计插件
- 添加 RSS 订阅支持
- 修改页脚
- 修改社交链接
- 修改打赏的二维码图片
- 配置音乐播放器
- 文章 Front-matter 介绍
-
- 最简示例
- 最全示例
- 自定制修改
-
- 修改主题颜色
- **修改 banner 图和文章特色图
- 修改网站相关信息
- 其他一些个性DIY
-
- 动态标题
- 关于我页面添加个人简历
- 修改网站背景图
- valine评论模块配置
- 新建文章模板修改
-
- Front-matter 选项详解
- 最全示例
- 看板娘模块的安装和使用
- 添加博客天气插件
- 添加页面樱花飘落动效
- 关闭首页颜色变换
- 给卡片区添加背景
- Matery 添加加载动画
-
-
- 1、在主题 /layout/_partial/`目录新建一个`loading-pages.ejs 内容如下：
- 2、在主题的 `layout` 目录找到 `layout.ejs` 文件
- 3、在主题配置文件`_config.yml`添加开关配置
-
- 主页新增关注我的Bilibili
- **Hexo添加博客导航页
- **优化网站加载速度
-
- 1.修改轮播图图片格式为Webp
- 2.修改文章封面图片格式为Webp
- 3.Gulp实现代码压缩
- Hexo 博客订阅文章通知功能
- 修改博客标题在手机端的字体大小
- 阅读文章的密码验证功能 私密文章设置
- 添加ICP/公网安备案号
- 自定义字体
-
- 全局字体自定义
- 局部字体自定义
- 例子：
-
Hexo-Matery主题美化
在一番瞎改js代码后，终于无法忍受next主题，于是愤然投入Matery大家庭，结果证明，香！
下面是我记录的配置Matery主题的流程，仅供后来的师傅们参考。
大家可以来我Hexo博客主页看看具体效果 我的小站
下载安装Matery主题
首先在hexo官网主题里面搜索Matery主题点击进入作者大大的github，然后下载 master 分支的最新稳定版的代码，解压缩后将 hexo-theme-matery 的文件夹重命名为matery，复制到Hexo 的 themes 文件夹中
可以在themes 文件夹下使用Git clone命令来下载：
git clone https://github.com/blinkfox/hexo-theme-matery.git
切换主题
下载完后，将站点配置文件中的 theme 值修改为你下载主题的文件名
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: matery
一些其他在站点目录配置：
language: zh-CN网站的语言设置
url: https://www.guixinchn.cn 网站的网站（域名）
per_page: 12建议修改为 6 的倍数，主题排版比较好
新建页面
1、标签页
hexo new page "tags"
编辑新建的/source/tags/index.md文件
---
title: tags
date: 2020-02-23 19:37:07
type: "tags"
layout: "tags"
---
2、分类页
hexo new page "categories"
编辑新建的/source/categories/index.md文件
---
title: categories
date: 2020-02-23 19:37:07
type: "categories"
layout: "categories"
---
3、关于页面
hexo new page "about"
编辑新建的/source/about/index.md文件
---
title: about
date: 2020-02-23 19:37:07
type: "about"
layout: "about"
---
4、留言板
hexo new page "contact"
编辑新建的/source/contact/index.md文件
---
title: contact
date: 2020-02-23 19:37:07
type: "contact"
layout: "contact"
---
5、友情链接
hexo new page "friends"
编辑新建的/source/friends/index.md文件
---
title: friends
date: 2020-02-23 19:37:07
type: "friends"
layout: "friends"
---
然后在博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示：
[
{
"avatar": "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/csdn.png",
"name": "Blog",
"introduction": "CSDN社区",
"url": "https://blog.csdn.net/guixinchn",
"title": "CSDN"
},
{
"avatar": "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/bokeyuan.png",
"name": "Blog",
"introduction": "博客园",
"url": "https://www.cnblogs.com/guixinchn/",
"title": "博客园"
},
{
"avatar": "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/github.png",
"name": "github",
"introduction": "github",
"url": "https://github.com/guixinchn",
"title": "github"
},
{
"avatar": "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/touxiang.jpg",
"name": "Blog",
"introduction": "咕咕星",
"url": "https://ythan.top",
"title": "咕咕星"
}
]
6、添加 404 页面
首先再站点根目录下的 source 文件夹下新建 404.md 文件，里面内容如下：
---
title: 404
date: 2020-02-23 19:37:07
type: "404"
layout: "404"
description: "Oops～，我崩溃了！找不到你想要的页面了"
---
紧接着再新建主题文件夹的 layout 目录下新建 404.ejs 文件，添加内容如下：
404
<%= page.description %>
7、添加自定义页面
首先在站点目录下的 source 文件夹下新建 aboutme 文件，文件名可自定义，然后编写一个 index.html 放入 aboutme 文件夹下，然后在主题配置文件下的导航配置信息添加下面的配置：
About:
url: /
icon: fas fa-address-card
children:
- name: 关于我
url: /about
icon: fas fa-user-circle
- name: Another #这是新添加的，在原有配置基础上添加
url: /aboutme
icon: fa fa-user-secret
然后在站点配置文件下，找到 skip_render，在后面添加属性，如下：
# 其意思为在对文件进行渲染时跳过aboutme文件下的所有文件
skip_render:
- aboutme/**
- aaa/**
- bbb/**
配置菜单导航
配置基本菜单导航的名称、路径 url 和图标 icon.
图标 icon 可以在 Font Awesome 中查找
# main menu navigation url and icon
# 配置菜单导航的名称、路径和图标icon.
menu:
Index:
url: /
icon: fas fa-home
Tags:
url: /tags
icon: fas fa-tags
Categories:
url: /categories
icon: fas fa-bookmark
Archives:
url: /archives
icon: fas fa-archive
About:
url: /about
icon: fas fa-user-circle
Contact:
url: /contact
icon: fas fa-comments
Friends:
url: /friends
icon: fas fa-address-book
二级菜单配置方法
如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作
1.在需要添加二级菜单的一级菜单下添加children关键字(如:About菜单下添加children)
2.在children下创建二级菜单的 名称name,路径url和图标icon.
3.注意每个二级菜单模块前要加 -.
4.注意缩进格式
menu:
Index:
url: /
icon: fas fa-home
Tags:
url: /tags
icon: fas fa-tags
Categories:
url: /categories
icon: fas fa-bookmark
Archives:
url: /archives
icon: fas fa-archive
About:
url: /about
icon: fas fa-user-circle-o
Friends:
url: /friends
icon: fas fa-address-book
Medias:
icon: fas fa-list
children:
- name: Musics
url: /musics
icon: fas fa-music
- name: Movies
url: /movies
icon: fas fa-film
- name: Books
url: /books
icon: fas fa-book
- name: Galleries
url: /galleries
icon: fas fa-image
添加 emoji 表情支持
需要安装插件 hexo-filter-github-emojis
npm install hexo-filter-github-emojis --save
没成功
在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：
githubEmojis:
enable: true
className: github-emoji
inject: true
styles:
customEmojis:
✨
☀ ♎ ©。来一波表情支持
在网站https://www.webfx.com/tools/emoji-cheat-sheet/可以搜索常用表情对应代码
在 emoji-cheat-sheet 中找到你想要的表情，然后点击即可复制。使用方法和 GitHub 一样，比如你想发一个笑脸 直接输入笑脸对应的 emoji 编码 :smile： 就可以。
代码高亮
原本的代码显示行号和内容分开了，不美观
代码美化需要安装hexo-prism-plugin 插件
npm i -S hexo-prism-plugin
修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：
highlight: #代码块的设置
enable: false #开启代码块高亮
line_number: true #如果未指定语言，则启用自动检测
auto_detect: false #显示行数
tab_replace: '' #用n个空格替换tabs；如果值为空，则不会替换tabs
wrap: true
hljs: false
# 关闭原有的代码高亮，使用自己的
prism_plugin:
mode: 'preprocess' # realtime/preprocess
theme: 'tomorrow'
line_number: false # default false
custom_css:
| 参数KEY | 可选值 |
|---|---|
| mode | realtime (Parse code on browser in real time) preprocess (Preprocess code in node) |
| theme | default coy dark funky okaidia solarizedlight tomorrow twilight 如果要更多的选择访问： hexo-prism-plugin |
| line_number | true (Show line numbers) false (Default, Hide line numbers) |
| no_assets | true (Stop loading asset files) false (Default, load script and stylesheets files) |
注意：
hexo花括号显示失败的话，需要将hexo版本降级，改成hexo4.2.0版本就好了
卸载hexo5.0
npm uninstall hexo --save
安装4.2.0版本
npm install [email protected] --save
主题的搜索功能
需要安装hexo-generator-search插件
npm install hexo-generator-search --save
在Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：
search:
path: search.xml
field: post
文章字数统计插件
需要安装 hexo-wordcount 插件
npm i --save hexo-wordcount
主题下的 _config.yml 文件中，激活以下配置项即可：
wordCount:
enable: false # 将这个值设置为 true 即可.
postWordCount: true
min2read: true
totalCount: true
保存后报错
npm ls --depth 0
命令查看 npm 安装各 hexo 插件的情况
无问题，改为以下不报错
一天后问题自动恢复
添加 RSS 订阅支持
需要安装hexo-generator-feed插件
npm install hexo-generator-feed --save
Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
order_by: -date
在 public 文件夹中即可看到 atom.xml 文件，则已经安装成功
修改页脚
页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中，包括站点、使用的主题、访问量等。
修改社交链接
在主题的 config.yml 文件中，默认支持 QQ、GitHub 和邮箱等的配置，你可以在主题文件的 /layout/_partial/social-link.ejs 文件中，新增、修改你需要的社交链接地址，增加链接可参考如下代码：
<% if (theme.socialLink.github) { %>
<% } %>
修改打赏的二维码图片
在主题文件的 source/medias/reward 文件中修改
配置音乐播放器
支持接入第三方音乐，如 QQ 音乐，网易云音乐，酷狗音乐等等
主题的 _config.yml 配置文件中激活 music 配置即可：
# Whether to display the musics.
# 是否在首页显示音乐.
music:
enable: true
title: #非吸底模式有效
enable: true
show: 咕咕星的歌单
autoHide: true # hide automaticaly
server: netease #require music platform: netease, tencent, kugou, xiami, baidu
type: playlist #require song, playlist, album, search, artist
id: 2888085740 #require song id / playlist id / album id / search keyword
fixed: false # 开启吸底模式
autoplay: false # 是否自动播放
theme: '#42b983'
loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none'
order: 'random' # 音频循环顺序, 可选值: 'list', 'random'
preload: 'auto' # 预加载，可选值: 'none', 'metadata', 'auto'
volume: 0.7 # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
listFolded: true # 列表默认折叠
hideLrc: true # 隐藏歌词
server 可选 netease（网易云音乐），tencent（QQ 音乐），kugou（酷狗音乐），xiami（虾米音乐），
baidu（百度音乐）。
type 可选 song（歌曲），playlist（歌单），album（专辑），search（搜索关键字），artist（歌手）
id 获取示例：浏览器打开网易云音乐，点击我喜欢的音乐歌单，地址栏有一串数字，playlist 的 id 即为这串数字。
文章 Front-matter 介绍
| 配置选项 | 默认值 | 描述 |
|---|---|---|
| title | Markdown 的文件标题 | 文章标题，强烈建议填写此选项 |
| date | 文件创建时的日期时间 | 发布时间，强烈建议填写此选项，且最好保证全局唯一 |
| author | 根 _config.yml 中的 author | 文章作者 |
| img | featureImages 中的某个值 | 文章特征图，推荐使用图床 |
| top | true | 推荐文章（文章是否置顶），如果 top 值为 true，则会作为首页推荐文章 |
| cover | false | v1.0.2 版本新增，表示该文章是否需要加入到首页轮播封面中 |
| coverImg | 无 | v1.0.2 版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片 |
| password | 无 | 文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 password 的值，该值必须是用 SHA256 加密后的密码，防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项 |
| toc | true | 是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项 |
| mathjax | false | 是否开启数学公式支持 ，本文章是否开启 mathjax，且需要在主题的 _config.yml 文件中也需要开启才行 |
| summary | 无 | 文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要 |
| categories | 无 | 文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类 |
| tags | 无 | 文章标签，一篇文章可以多个标签 |
| reprintPolicy | cc_by | 文章转载规则， 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个 |
注意:
- 如果 img 属性不填写的话，文章特色图会根据文章标题的 hashcode 的值取余，然后选取主题中对应的特色图片，从而达到让所有文章都的特色图各有特色。
- date 的值尽量保证每篇文章是唯一的，因为本主题中 Gitalk 和 Gitment 识别 id 是通过 date 的值来作为唯一标识的。
- 如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：开源中国在线工具、chahuo、站长工具。
- 您可以在文章 md 文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则
最简示例
---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
---
最全示例
---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
author: 赵奇
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories: Markdown
tags:
- Typora
- Markdown
---
自定制修改
修改主题颜色
在主题文件的 /source/css/matery.css 文件中修改
/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
background-image: linear-gradient(to right, #2558FF 0%, #0f9d58 100%);
}
/*如果想去掉banner图的颜色渐变效果，请将以下的css属性注释掉或者删除掉即可*/
@-webkit-keyframes rainbow {
/* 动态切换背景颜色. */
}
@keyframes rainbow {
/* 动态切换背景颜色. */
}
**修改 banner 图和文章特色图
在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。如果你会 JavaScript 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 代码中：
$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
在 /source/medias/featureimages 文件夹中默认有 24 张特色图片，你可以再增加或者减少，并需要在 _config.yml 做同步修改。
如果想改为每小时或者每分钟切换 banner 图的话，需要将 getDay() 改为 getHours() 或者 getMinutes() 即可。
修改文章特色图见front_matter
修改网站相关信息
#这是根目录下的配置文件信息
# Site
title: 咕咕星Blog #网站标题
subtitle: 世界很暗，但是你来了 #网站副标题
description: 本网站是个人兴趣爱好，总结分享经验，记录生活点滴的平台，希望在以后的学习旅途中，走出自己的风景。 #网站描述description 主要用于5E0，告诉搜索引擎一个关于您站点的简单描述
keywords: [HTML, CSS, JavaScript, JQuery, java, linux等] #网站的关键词。使用半角逗号“，”分隔多个关键词
author: 咕咕星 #您的名字
language: zh-CN #网站使用的语言。建议修改为zh-CN
timezone: #网站时区。Hexo默认使用您电脑的时区。
# 这是主题配置文件的相关信息
# 配置网站favicon和网站LOGO
# 此处我用的CDN，也可以使用本地文件
favicon: https://cdn.jsdelivr.net/gh/guixinchn/image/blog/favicon.png
logo: https://cdn.jsdelivr.net/gh/guixinchn/image/blog/logo.png
# 网站副标题，打字效果
# 如果有符号 ‘ ，请在 ’ 前面加上 \
subtitle:
enable: true
loop: true # 是否循环
showCursor: true # 是否显示光标
startDelay: 300 # 开始延迟
typeSpeed: 100 # 打字速度
backSpeed: 50 # 删除速度
sub1: 如果放弃太早，你永远都不知道自己会错过什么。
sub2: 没有伞的孩子必须努力奔跑！
sub3: 花开不是为了花落，而是为了开的更加灿烂。
sub4: 没有礁石，就没有美丽的浪花；没有挫折，就没有壮丽的人生。
注意：
网站打字效果副标题默认有两个，即 sub1 和 sub2，如果想写多个，则需要修改两处地方，首先修改配置文件，如上面所示，在 sub1 和 sub2 后面继续添加即可，然后在去主题目录下的 layout 文件夹下的_partial 文件夹，修改 bg-cover-content.ejs 文件，大约在 12 行左右，如下面所示：
<% if (theme.subtitle.enable) { %>
<% } else { %>
<%= config.description %>
<% } %>
社交链接的修改
在主题的配置文件中修改：
# 首页 banner 中的第二行个人信息配置，留空即不启用
socialLink:
qq: 1563972718
weixin: https://gitee.com/marmalade0/images/blob/master/www.marmalade.vip/wechat.jpg
github: #https://github.com/marmalade0
email: [email protected]
facebook: # https://www.facebook.com/xxx
twitter: # https://twitter.com/xxx
weibo: # https://weibo.com/xxx
zhihu: # https://www.zhihu.com/xxx
csdn: https://blog.csdn.net/kuashijidexibao
cnblogs: https://www.cnblogs.com/kuashijidexibao
rss: true # true、false
期中的 weixin 我是用的图片链接，会跳转到一个新的标签页，之后还需要修改 ejs 文件，文件在主题目录下的 layout 文件夹下的_partial 文件夹，修改 social-link.ejs，添加相关的配置，比如：
<% if (theme.socialLink.github) { %>
<% } %>
<% if (theme.socialLink.email) { %>
<% } %>
<% if (theme.socialLink.facebook) { %>
<% } %>
<% if (theme.socialLink.twitter) { %>
<% } %>
<% if (theme.socialLink.qq) { %>
<% } %>
<% if (theme.socialLink.weibo) { %>
<% } %>
<% if (theme.socialLink.zhihu) { %>
知
<% } %>
<% if (theme.socialLink.rss) { %>
<% } %>
<% if (theme.socialLink.jianshu) { %>
简
<% } %>
<% if (theme.socialLink.csdn) { %>
C
<% } %>
<% if (theme.socialLink.juejin) { %>
掘
<% } %>
<% if (theme.socialLink.cnblogs) { %>
博
<% } %>
<% if (theme.socialLink.weixin) { %>
<% } %>
其他一些个性DIY
动态标题
实现方法，引入 js 文件，在主题文件下的 /source/js/ 下新建 FunnyTitle.js，增加以下代码：
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/favicon.png");
document.title = '我相信你还会回来的！';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/favicon.png");
document.title = '哈哈，我就知道！' + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
然后在添加到 themes/matery/layout/layout.ejs 引入
关于我页面添加个人简历
打开 theme/matery/layout/about.ejs 文件，大约在 13 行。有一个 `` 标签，找出其对应结尾的标签，大约在 61 行左右，然后在新增如下代码：
<%- __('个人简历') %>
<%- page.content %>
可以在about页面自定义内容
修改网站背景图
主题配置文件
background:
enable: true
url: "https://gitee.com/marmalade0/images/blob/master/www.marmalade.vip/24.jpg"
valine评论模块配置
主题配置文件找到valine部分，按以下要求配置
valine:
enable: true
appId: xxxxxxxx # Your leancloud application appid# 将应用key的App ID设置在这里
appKey: xxxxxxx # Your leancloud application appkey# 将应用key的App Key设置在这里
notify: true # Mail notifier邮箱通知 , https://github.com/xCss/Valine/wiki，默认为false
verify: true # Verification code验证码 默认为false
avatar: 'mm' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
placeholder: 想说点啥？Just go go ^_^ # Comment box placeholder# 初始化评论显示，根据自己修改，这里默认
background: /medias/comment_bg.png
guest_info: nick,mail,link # Custom comment header# 自定义评论标题
pageSize: 10 # Pagination size# 分页大小，10页就自动分页
language: zh-cn # Language, available values: en, zh-cn
visitor: true # Article reading statistic# 是否允许游客评论 ，进入官网查看设置：https://valine.js.org/visitor.html
comment_count: true # If false, comment count will only be displayed in post page, not in home page
recordIP: false # Whether to record the commenter IP
serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
#post_meta_order: 0
新建文章模板修改
首先为了新建文章方便，我们可以修改一下文章模板，可以将/scaffolds/post.md修改为如下代码：
---
title: {
{ title }}
date: {
{ date }}
author:
img:
coverImg:
top: false
cover: false
toc: true
mathjax: false
password:
summary:
keywords:
tags:
categories:
---
这样新建文章后 一些Front-matter参数不用你自己补充了，修改对应信息就可以了。
Front-matter 选项详解
Front-matter 选项中的所有内容均为非必填的。但原作者建议至少填写 title 和 date 的值。
| 配置选项 | 默认值 | 描述 |
|---|---|---|
| title | Markdown 的文件标题 |
文章标题，强烈建议填写此选项 |
| date | 文件创建时的日期时间 | 发布时间，强烈建议填写此选项，且最好保证全局唯一 |
| author | 根 _config.yml 中的 author |
文章作者 |
| img | featureImages 中的某个值 |
文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg |
| top | true |
推荐文章（文章是否置顶），如果 top 值为 true，则会作为首页推荐文章 |
| cover | false |
v1.0.2版本新增，表示该文章是否需要加入到首页轮播封面中 |
| coverImg | 无 | v1.0.2版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片 |
| password | 无 | 文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 password 的值，该值必须是用 SHA256 加密后的密码，防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项 |
| toc | true |
是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项 |
| mathjax | false |
是否开启数学公式支持 ，本文章是否开启 mathjax，且需要在主题的 _config.yml 文件中也需要开启才行 |
| summary | 无 | 文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要 |
| categories | 无 | 文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类 |
| tags | 无 | 文章标签，一篇文章可以多个标签 |
| keywords | 文章标题 | 文章关键字，SEO 时需要 |
| reprintPolicy | cc_by | 文章转载规则， 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个 |
最全示例
---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
author: 赵奇
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories: Markdown
tags:
- Typora
- Markdown
---
看板娘模块的安装和使用
模块安装：
cnpm install --save hexo-helper-live2d
下载完成后，可以在node_modules文件夹中找到自己安装的插件。
然后下载你想要的看板娘模块（可以自己到网上找哪个合心意的），执行命令：
cnpm install {packagename}
# 例如cnpm install live2d-widget-model-haru
下载完成后，回到blog根目录下配置_config.yml，添加以下代码（model要根据自己情况设置）：
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
debug: false
model:
use: live2d-widget-model-z16
display:
position: right
width: 200
height: 400
mobile:
show: false
这样在右下角有看板娘啦！
添加博客天气插件
中国天气网：https://cj.weather.com.cn/
选择自定义插件—>自定义样式——>生成代码，然后会生成这样一段代码
<script type="text/javascript"> WIDGET = {
FID: 'your FID'}script>
<script type="text/javascript" src="https://apip.weatherdt.com/float/static/js/r.js?v=1111">script>
在 /themes/matery/source/layout/_widget 新建文件 weather.ejs，把上面生成的代码添加进入,可以设置只有桌面端显示,如下修改:
<script type="text/javascript">
WIDGET = {
FID: '1tFpFZ5Mtj'}
script>
<script type="text/javascript">
//只在桌面版网页启用特效
var windowWidth = $(window).width();
if (windowWidth > 768) {
document.write('');
}
</script>
<% } %>
在matery主题配置文件_config .yml中配置:
# 页面樱花飘落动效
sakura:
enable: true
关闭首页颜色变换
进入主题文件的 /source/css/matery.css文件中，搜索 rainbow来关闭颜色变换：
@-webkit-keyframes rainbow {
/* 动态切换背景颜色.即滤镜颜色，不想要可以全部注释，或者换成你喜欢的颜色 */
}
@keyframes rainbow {
/* 动态切换背景颜色.，不想要可以全部注释，或者换成你喜欢的颜色 */
}
给卡片区添加背景
进入主题文件的 /source/css/matery.css文件中，有个 body 选择器，加了中间两行之后长这样：
body {
background-color: #eaeaea;
background: linear-gradient(60deg, rgba(224,255,125, 0.5) 5%, rgba(0, 228, 255, 0.35)) 0% 0% / cover；background-attachment: fixed;
margin: 0;
color: #34495e;
}
也可以加 url 用图片做背景：
body {
background-color: #eaeaea;
background: url('你的图片地址')；
background-attachment: fixed;
margin: 0;
color: #34495e;
}
Matery 添加加载动画
1、在主题 /layout/_partial/目录新建一个loading-pages.ejs 内容如下：
<style type="text/css" lang="css">
#loading-container{
position: fixed;
top: 0;
left: 0;
min-height: 100vh;
width: 100vw;
z-index: 9999;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #FFF;
text-align: center;
/* loader页面消失采用渐隐的方式*/
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
transition: opacity 1s ease;
}
.loading-image{
width: 120px;
height: 50px;
transform: translate(-50%);
}
.loading-image div:nth-child(2) {
-webkit-animation: pacman-balls 1s linear 0s infinite;
animation: pacman-balls 1s linear 0s infinite
}
.loading-image div:nth-child(3) {
-webkit-animation: pacman-balls 1s linear .33s infinite;
animation: pacman-balls 1s linear .33s infinite
}
.loading-image div:nth-child(4) {
-webkit-animation: pacman-balls 1s linear .66s infinite;
animation: pacman-balls 1s linear .66s infinite
}
.loading-image div:nth-child(5) {
-webkit-animation: pacman-balls 1s linear .99s infinite;
animation: pacman-balls 1s linear .99s infinite
}
.loading-image div:first-of-type {
width: 0;
height: 0;
border: 25px solid #49b1f5;
border-right-color: transparent;
border-radius: 25px;
-webkit-animation: rotate_pacman_half_up .5s 0s infinite;
animation: rotate_pacman_half_up .5s 0s infinite;
}
.loading-image div:nth-child(2) {
width: 0;
height: 0;
border: 25px solid #49b1f5;
border-right-color: transparent;
border-radius: 25px;
-webkit-animation: rotate_pacman_half_down .5s 0s infinite;
animation: rotate_pacman_half_down .5s 0s infinite;
margin-top: -50px;
}
@-webkit-keyframes rotate_pacman_half_up {
0% {
transform: rotate(270deg)}50% {
transform: rotate(1turn)}to {
transform: rotate(270deg)}}
@keyframes rotate_pacman_half_up {
0% {
transform: rotate(270deg)}50% {
transform: rotate(1turn)}to {
transform: rotate(270deg)}}
@-webkit-keyframes rotate_pacman_half_down {
0% {
transform: rotate(90deg)}50% {
transform: rotate(0deg)}to {
transform: rotate(90deg)}}
@keyframes rotate_pacman_half_down {
0% {
transform: rotate(90deg)}50% {
transform: rotate(0deg)}to {
transform: rotate(90deg)}}
@-webkit-keyframes pacman-balls {
75% {
opacity: .7}to {
transform: translate(-100px, -6.25px)}}
@keyframes pacman-balls {
75% {
opacity: .7}to {
transform: translate(-100px, -6.25px)}}
.loading-image div:nth-child(3),
.loading-image div:nth-child(4),
.loading-image div:nth-child(5),
.loading-image div:nth-child(6){
background-color: #49b1f5;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
width: 10px;
height: 10px;
position: absolute;
transform: translateY(-6.25px);
top: 25px;
left: 100px;
}
.loading-text{
margin-bottom: 20vh;
text-align: center;
color: #2c3e50;
font-size: 2rem;
box-sizing: border-box;
padding: 0 10px;
text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
@media only screen and (max-width: 500px) {
.loading-text{
font-size: 1.5rem;
}
}
.fadeout {
opacity: 0;
filter: alpha(opacity=0);
}
/* logo出现动画 */
@-webkit-keyframes fadeInDown{
0%{
opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{
opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeInDown{
0%{
opacity:0;-webkit-transform:translate3d(0,-100%,0);}}
style>
<script>
(function () {
const loaded = function(){
setTimeout(function(){
const loader = document.getElementById("loading-container");
loader.className="fadeout" ;//使用渐隐的方法淡出loading page
// document.getElementById("body-wrap").style.display="flex";
setTimeout(function(){
loader.style.display="none";
},2500);
},1000);//强制显示loading page 1s
};
loaded();
})()
script>
2、在主题的 layout 目录找到 layout.ejs 文件
在 附近添加内容后如下：
<html lang="<%= config.language %>">
<%- partial('_partial/head') %>
<% if (theme.loadingPages.enable) { %>
<%- partial('_partial/loading-pages') %>
<% } %>
<body>
<% if (theme.loadingPages.enable) { %>
<div id="loading-container">
<p class="loading-text">嘘~ 正在从服务器偷取页面 . . . p>
<div class="loading-image">
<div>div>
<div>div>
<div>div>
<div>div>
<div>div>
div>
div>
<% } %>
<%- partial('_partial/header') %>
...
3、在主题配置文件_config.yml添加开关配置
loadingPages:
enable: true
enable 设置为 true 表示开启加载动画， false 表示关闭加载动画。
主页新增关注我的Bilibili
进入主题路径\layout\_partial\social-link.ejs
新增以下代码
<% if (theme.socialLink.bilibili) {
%>
<a href="<%= theme.socialLink.bilibili %>" class="tooltipped" target="_blank" data-tooltip="在B站上关注我" <%= theme.socialLink.bilbili %>" data-position="top" data-delay="50">
<i class="fas fa-play-circle"></i>
</a>
<% } %
进入主题配置文件_config.yml
bilibili: #https://space.bilibili.com/xxx
**Hexo添加博客导航页
新建页面，执行下面的命令
hexo new page navigate
修改 navigate 目录下的 index.md 的格式
---
title: 导航
date: 2020-05-09 11:19:14
type: "navigate"
layout: "navigate"
---
在主题配置文件_config.yml中添加导航
导航:
url: /navigate
icon: fas fa-location-arrow
在 matery/layout 下新建 navigate.ejs
<div class="navi-height bg-cover pd-header ">
<div class=" link-box container">
<div class="baidu baidu-2 large-screen">
<form name="f" action="https://www.baidu.com/" target="_blank">
<div id="Select-2">
<div class="Select-box-2" id="baidu">
<ul style="height: 46px;">
<li class="this_s">百 · 度li>
<li class="bing_s">必 · 应li>
<li class="google_s">谷 · 歌li>
<li class="baidu_s">百 · 度li>
ul>
div> <input name="wd" id="kw-2" maxlength="100" autocomplete="off" type="text">
div>
<div class="qingkong" id="qingkong" title="清 · 空" style="display: none;">xdiv> <input value="搜 · 索"
id="su-2" type="submit">
<ul class="keylist">ul>
form>
div>
<div class="row tags-posts ">
<div class="col s12 m6 l4 friend-div" data-aos="zoom-in-up">
<div class="card">
<div class="jj-list-tit">娱乐 · 影视div>
<ul class="jj-list-con">
<li><a href="https://www.jd.com/" class="link-3" target="_blank">京东a>
<li><a href="https://www.taobao.com/" class="link-3" target="_blank">淘宝a>li>
<li><a href="https://www.tmall.com/" class="link-3" target="_blank">天猫a>li>
li>
<li><a href="https:pixiv.net" class="link-3" target="_blank">Pixiva>li>
<li><a href="https://zh.moegirl.org/Mainpage/" class="link-3" target="_blank">萌娘百科a>li>
<li><a href="https://www.bilibili.com/" class="link-3" target="_blank">哔哩哔哩a>li>
<li><a href="https://www.netflix.com/" class="link-3" target="_blank">NETFLIXa>li>
<li><a href="https://www.spotify.com/" class="link-3" target="_blank">Spotifya>li>
ul>
div>
div>
<div class="col s12 m6 l4 friend-div" data-aos="zoom-in-up">
<div class="card">
<div class="jj-list-tit">社区 · Codediv>
<ul class="jj-list-con">
<li><a href="https://blog.nmslwsnd.com/contact/" class="link-3" target="_blank">留言a>li>
<li><a href="https://github.com/" class="link-3" target="_blank">GitHuba>li>
<li><a href="https://coding.net/" class="link-3" target="_blank">Codinga>li>
<li><a href="https://juejin.im/" class="link-3" target="_blank">掘金a>li>
<li><a href="https://gitee.com/" class="link-3" target="_blank">码云a>li>
<li><a href="https://www.v2ex.com/" class="link-3" target="_blank">V2EXa>li>
<li><a href="https://www.jianshu.com/" class="link-3" target="_blank">简书a>li>
<li><a href="https://www.52pojie.cn/" class="link-3" target="_blank">吾爱破解a>li>
<li><a href="https://segmentfault.com/" class="link-3" target="_blank">思否a>li>
<li><a href="https://cloud.tencent.com/developer/" class="link-3" target="_blank">云+社区a>li>
<li><a href="https://36kr.com/newsflashes" class="link-3" target="_blank">36氪a>li>
ul>
div>
div>
<div class="col s12 m6 l4 friend-div" data-aos="zoom-in-up">
<div class="card">
<div class="jj-list-tit">图片处理div>
<ul class="jj-list-con">
<li><a href="https://tinypng.com/" class="link-3" target="_blank">TingPNGa>li>
<li><a href="https://www.upyun.com/webp" class="link-3" target="_blank">又拍云Webpa>li>
<li><a href="https://www.iconfont.cn/" class="link-3" target="_blank">IconFonta>li>
<li><a href="https://fontawesome.com/" class="link-3" target="_blank">AweSomea>li>
<li><a href="https://wallhaven.cc/" class="link-3" target="_blank">超清壁纸a>li>
<li><a href="https://www.uupoop.com/" class="link-3" target="_blank">在线PSa>li>
ul>
div>
div>
<div class="col s12 m6 l4 friend-div" data-aos="zoom-in-up">
<div class="card">
<div class="jj-list-tit">实用 · 工具div>
<ul class="jj-list-con">
<li><a href="https://mdnice.com/" class="link-3" target="_blank">Nice编辑器a>li>
<li><a href="https://www.processon.com/" class="link-3" target="_blank">思维导图a>li>
<li><a href="https://cli.im/" class="link-3" target="_blank">二维码a>li>
<li><a href="http://www.yinfans.me/" class="link-3" target="_blank">音范思a>li>
<li><a href="https://my.openwrite.cn/" class="link-3" target="_blank">OW分发a>li>
<li><a href="https://tool.liumingye.cn/avbv/" class="link-3" target="_blank">BV转AVa>li>
<li><a href="https://www.guidgen.com/" class="link-3" target="_blank">GUID在线生成a>li>
<li><a href="https://console.upyun.com/purge/purge_url/" class="link-3" target="_blank">又拍云刷新网站a>li>
ul>
div>
div>
<div class="col s12 m6 l4 friend-div" data-aos="zoom-in-up">
<div class="card">
<div class="jj-list-tit">编程 · 学习div>
<ul class="jj-list-con">
<li><a href="https://www.oschina.net/" class="link-3" target="_blank">开源中国a>li>
<li><a href="https://htmldog.com/" class="link-3" target="_blank">HTML狗a>li>
<li><a href="https://www.icourse163.org/" class="link-3" target="_blank">中国大学慕课a>li>
<li><a href="https://www.imooc.com/" class="link-3" target="_blank">慕课网a>li>
<li><a href="http://www.wxapp-union.com/" class="link-3" target="_blank">小程序a>li>
<li><a href="https://blog.51cto.com/" class="link-3" target="_blank">51CTOa>li>
<li><a href="https://www.shiyanlou.com/library/" class="link-3" target="_blank">实验楼a>li>
<li><a href="https://spring.io/" class="link-3" target="_blank">Springa>li>
ul>
div>
div>
<div class="col s12 m6 l4 friend-div" data-aos="zoom-in-up">
<div class="card">
<div class="jj-list-tit">资讯 · 趋势div>
<ul class="jj-list-con">
<li><a href="https://www.huxiu.com/" class="link-3" target="_blank">虎嗅a>li>
<li><a href="https://insights.stackoverflow.com/" class="link-3" target="_blank">技术调查a>li>
<li><a href="http://www.asciiworld.com/" class="link-3" target="_blank">摸鱼a>li>
<li><a href="https://sspai.com/" class="link-3" target="_blank">少数派a>li>
<li><a href="https://zh.wikihow.com/" class="link-3" target="_blank">WikeHoma>li>
<li><a href="https://www.awesomes.cn/rank?sort=hot" class="link-3" target="_blank">前端趋势a>li>
<li><a href="https://github-trending.com/" class="link-3" target="_blank">GitHub趋势a>li>
<li><a href="https://www.tiobe.com/" class="link-3" target="_blank">编程趋势a>li>
<li><a href="https://trends.google.com/" class="link-3" target="_blank">Google趋势a>li>
ul>
div>
div>
<div class="col s12 m6 l4 friend-div" data-aos="zoom-in-up">
<div class="card">
<div class="jj-list-tit">搜索 · 其他div>
<ul class="jj-list-con">
<li><a href="http://www.pansoso.com/" class="link-3" target="_blank">网盘搜索a>li>
<li><a href="http://tool.mkblog.cn/music/" class="link-3" target="_blank">音乐搜索a>li>
<li><a href="https://www.dytt8.net/" class="link-3" target="_blank">电影天堂a>li>
<li><a href="https://carbon.now.sh/" class="link-3" target="_blank">代码图片a>li>
<li><a href="https://www.zhipin.com/" class="link-3" target="_blank">Boosa>li>
<li><a href="https://fontawesome.com/" class="link-3" target="_blank">图标库a>li>
<li><a href="https://www.qvdv.com/tools/qvdv-guid.html" class="link-3" target="_blank">在线工具a>
<li><a href="http://zhongguose.com/" class="link-3" target="_blank">中国色a>li>
<li><a href="https://opensource.builders/" class="link-3" target="_blank">OpenSourcea>li>
ul>
div>
div>
div>
<script> /*选择搜索引擎*/ $('.Select-box ul').hover(function () {
$(this).css('height', 'auto') }, function () {
$(this).css('height', '40px') }); $('.Select-box-2 ul').hover(function () {
$(this).css('height', 'auto') }, function () {
$(this).css('height', '46px') }); $('.Select-box li').click(function () {
var _tihs = $(this).attr('class'); var _html = $(this).html(); if (_tihs == 'baidu_s') {
_tihs = 'https://www.baidu.com/s'; _name = 'wd'; } if (_tihs == 'google_s') {
_tihs = 'https://www.google.com/search'; _name = 'q'; } if (_tihs == 'bing_s') {
_tihs = 'https://www.bing.com/search'; _name = 'q'; } $('.baidu form').attr('action', _tihs); $('.this_s').html(_html); $('#kw').attr('name', _name); $('.Select-box ul').css('height', '40px') }); $('.Select-box-2 li').click(function () {
var _tihs = $(this).attr('class'); var _html = $(this).html(); if (_tihs == 'baidu_s') {
_tihs = 'https://www.baidu.com/s'; _name = 'wd'; } if (_tihs == 'google_s') {
_tihs = 'https://www.google.com/search'; _name = 'q'; } if (_tihs == 'bing_s') {
_tihs = 'https://www.bing.com/search'; _name = 'q'; } $('.baidu form').attr('action', _tihs); $('.this_s').html(_html); $('#kw-2').attr('name', _name); $('.Select-box-2 ul').css('height', '48px') }); //清空输入框内容 $('.qingkong').click(function () { cls(); $(this).css('display', 'none') }); function cls() { var sum = 0; var t = document.getElementsByTagName("INPUT"); for (var i = 0; i < t.length; i++) { if (t[i].type == 'text') { ++sum; t[i].value = "";//清空 } } } //清空输入框按钮的显示和隐藏 function if_btn() { var btn_obj = document.getElementById("kw") || document.getElementById("kw-2"); var cls_btn = document.getElementById("qingkong"); var btn_obj_val; var times; //当元素获得焦点时 if (btn_obj == '' || btn_obj == null) { return false; //如果没有找到这个元素，则将函数返回，不继续执行 } btn_obj.onfocus = function () { times = setInterval(function () { btn_obj_val = btn_obj.value; if (btn_obj_val != 0) { cls_btn.style.display = "block"; } else { cls_btn.style.display = "none"; } }, 200); } //元素失去焦点时 btn_obj.onblur = function () { clearInterval(times); } } script>
div>
div>
<style>
* {
margin: 0;
padding: 0;
font-family: "微软雅黑"
}
ul,li,h1,h2,h3,h4,h5,h6,p,form,dl,dt,dd {
margin: 0px;
padding: 0px;
font-size: 14px;
font-weight: normal;
}
img {
border-style: none;
}
li {
list-style: none;
float: left
}
a {
text-decoration: none
}
.card {
background-color: rgba(25, 240, 229, 0);
width: 96%;
margin-left: 2%
}
.baidu {
float: left;
margin-left: 100px;
}
.baidu form {
position: relative
}
.Select-box ul {
height: 40px;
position: absolute;
left: -1px;
top: 0px;
z-index: 9999;
background: #FFF;
border: 1px solid #ccc;
border-top: none;
overflow: hidden
}
.Select-box li {
width: 60px;
line-height: 40px;
font-size: 14px;
color: #484848;
border: 0;
cursor: pointer;
}
.Select-box li:hover {
background: #3385ff;
color: #FFF;
}
.Select-box .this_s {
color: #317ef3;
}
.Select-box .this_s:hover {
background: #FFF;
color: #317ef3;
}
.qingkong {
position: absolute;
right: 120px;
top: 12px;
width: 18px;
height: 18px;
background: rgba(0, 0, 0, 0.1);
border-radius: 18px;
line-height: 16px;
color: #666666;
cursor: pointer;
text-align: center;
font-size: 14px;
display: none;
}
.qingkong:hover {
background: rgba(0, 0, 0, 0.2);
}
.qingkong:active {
background: rgba(0, 0, 0, 0.3);
}
.baidu-2 {
width: 100%;
height: 110px;
margin: 0 auto;
background: none;
padding-top: 50px;
}
.baidu-2 form {
width: 520px;
margin: 0 auto;
}
.baidu-2 input {
padding: 13px 8px;
opacity: 0.9;
font-size: 15px;
}
#Select-2 {
float: left;
}
.Select-box-2 {
text-align: center;
float: left;
position: relative;
}
.Select-box-2 ul {
height: 46px;
position: absolute;
left: 0px;
top: 1px;
z-index: 9999;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #ccc;
border-top: none;
overflow: hidden
}
.Select-box-2 li {
width: 60px;
line-height: 46px;
font-size: 15px;
color: #484848;
border: 0;
cursor: pointer;
}
.Select-box-2 li:hover {
background: #3385ff;
color: #FFF;
}
.Select-box-2 .this_s {
color: #317ef3;
}
.Select-box-2 .this_s:hover {
background: none;
color: #317ef3;
}
#kw-2 {
width: 335px;
outline: 0;
border: 1px solid #ccc;
background: rgba(255, 255, 255, 0.2);
color: #000000;
padding-left: 70px;
font-weight: bold;
}
/*修改搜索框样式*/
#su-2 {
width: 90px;
background: blue;
border: none;
border-top: #3385ff 1px solid;
border-bottom: 1px solid #2d78f4;
color: #FFF;
cursor: pointer;
/*去轮廓阴影*/
outline: none;
}
/*光标移动到搜索框颜色*/
#su-2:hover {
background: blue;
border-bottom: 1px solid blue;
}
#su-2:active {
background: blue;
box-shadow: inset 1px 1px 3px blue;
-webkit-box-shadow: inset 1px 1px 3px blue;
}
.jj-list-tit {
font-size: 16px;
line-height: 25px;
color: #ffffff;
width: 100%;
padding-left: 38.5%;
}
.jj-list-con {
overflow: hidden;
margin: 0 auto
}
/*控制网站列表间距*/
.jj-list-con li {
width: 31.333%;
margin: 1%;
}
.link-3 {
display: block;
background: rgba(0, 0, 0, .35);
color: #FFF;
font-size: 13px;
text-align: center;
line-height: 35px;
padding: 4px 0;
border-radius: 2px;
transition: all 0.2s
}
.link-3:hover {
background: rgba(0, 0, 0, .45);
font-size: 15px;
font-weight: bold
}
/*1栏 小于584*/
@media only screen and (max-width: 584px) {
.navi-height {
height: 1300px;
}
.link-box {
margin-top: 5%;
}
.large-screen {
display: none;
}
}
/* 2栏 大于584 小于993px */
@media only screen and (min-width: 584px) and (max-width: 993px) {
.navi-height {
height: 800px;
}
.link-box {
margin-top: 5%;
}
.large-screen {
display: none;
}
}
/*3栏 大于993px*/
@media only screen and (min-width: 993px) {
.navi-height {
position: absolute;
width: 100%;
height: 100%;
}
}
/* 隐藏footer */
.page-footer {
display: none;
}
style>
<% if (theme.banner.enable) { %>
<script>
// 每天切换 banner 图. Switch banner image every day.
var bannerUrl = "<%- theme.jsDelivr.url %><%- url_for('/medias/banner/') %>" + new Date().getDay() + '.webp';
$('.bg-cover').css('background-image', 'url(' + bannerUrl + ')');
script>
<% } else { %>
<script>
$('.bg-cover').css('background-image', 'url(<%- theme.jsDelivr.url %><%- url_for('/medias/banner/0.webp') %>)');
script>
<% } %>
**优化网站加载速度
1.修改轮播图图片格式为Webp
你可以直接在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。默认的图片格式为Jpg，为了加快网站加载速度，可以将jpg格式修改为webp从而加快网站加载。
在/layout/_partial/bg-cover-content.ejs 文件的 代码中进行以下修改：
//修改前
var bannerUrl = "<%- theme.jsDelivr.url %><%- url_for('/medias/banner/') %>" + new Date().getDay() + '.jpg';
$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
//修改后
var bannerUrl = "<%- theme.jsDelivr.url %><%- url_for('/medias/banner/') %>" + new Date().getDay() + '.webp';
$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.webp)');
在 /source/medias/featureimages 文件夹中默认有 24 张特色图片，你可以再增加或者减少，并需要在 _config.yml 做同步修改。
2.修改文章封面图片格式为Webp
打开主题配置文件themes\hexo-theme-matery\_config.yml中的_config.yml文件，之后在文本编辑器内搜索featureimages，将图片后缀的jpg文件替换成Webp即可!
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jT6g5icw-1611233026799)(data:image/png;base64,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)]
在VSC中修改封面图片格式
3.Gulp实现代码压缩
Gulp实现代码压缩，以提升网页加载速度。
1 首先我们需要安装Gulp插件和5个功能模块，依次运行下面的两条命令。
npm install gulp -g #安装gulp
# 安装功能模块
npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save
# 额外的功能模块
npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del --save
2 接下来在博客的根目录下新建gulpfile.js文件，并复制下面的内容到文件中。
var gulp = require("gulp");
var debug = require("gulp-debug");
var cleancss = require("gulp-clean-css"); //css压缩组件
var uglify = require("gulp-uglify"); //js压缩组件
var htmlmin = require("gulp-htmlmin"); //html压缩组件
var htmlclean = require("gulp-htmlclean"); //html清理组件
var imagemin = require("gulp-imagemin"); //图片压缩组件
var changed = require("gulp-changed"); //文件更改校验组件
var gulpif = require("gulp-if"); //任务 帮助调用组件
var plumber = require("gulp-plumber"); //容错组件（发生错误不跳出任务，并报出错误内容）
var isScriptAll = true; //是否处理所有文件，(true|处理所有文件)(false|只处理有更改的文件)
var isDebug = true; //是否调试显示 编译通过的文件
var gulpBabel = require("gulp-babel");
var es2015Preset = require("babel-preset-es2015");
var del = require("del");
var Hexo = require("hexo");
var hexo = new Hexo(process.cwd(), {
}); // 初始化一个hexo对象
// 清除public文件夹
gulp.task("clean", function() {
return del(["public/**/*"]);
});
// 下面几个跟hexo有关的操作，主要通过hexo.call()去执行，注意return
// 创建静态页面 （等同 hexo generate）
gulp.task("generate", function() {
return hexo.init().then(function() {
return hexo
.call("generate", {
watch: false
})
.then(function() {
return hexo.exit();
})
.catch(function(err) {
return hexo.exit(err);
});
});
});
// 启动Hexo服务器
gulp.task("server", function() {
return hexo
.init()
.then(function() {
return hexo.call("server", {
});
})
.catch(function(err) {
console.log(err);
});
});
// 部署到服务器
gulp.task("deploy", function() {
return hexo.init().then(function() {
return hexo
.call("deploy", {
watch: false
})
.then(function() {
return hexo.exit();
})
.catch(function(err) {
return hexo.exit(err);
});
});
});
// 压缩public目录下的js文件
gulp.task("compressJs", function() {
return gulp
.src(["./public/**/*.js", "!./public/libs/**"]) //排除的js
.pipe(gulpif(!isScriptAll, changed("./public")))
.pipe(gulpif(isDebug, debug({
title: "Compress JS:" })))
.pipe(plumber())
.pipe(
gulpBabel({
presets: [es2015Preset] // es5检查机制
})
)
.pipe(uglify()) //调用压缩组件方法uglify(),对合并的文件进行压缩
.pipe(gulp.dest("./public")); //输出到目标目录
});
// 压缩public目录下的css文件
gulp.task("compressCss", function() {
var option = {
rebase: false,
//advanced: true, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
compatibility: "ie7" //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
//keepBreaks: true, //类型：Boolean 默认：false [是否保留换行]
//keepSpecialComments: '*' //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
};
return gulp
.src(["./public/**/*.css", "!./public/**/*.min.css"]) //排除的css
.pipe(gulpif(!isScriptAll, changed("./public")))
.pipe(gulpif(isDebug, debug({
title: "Compress CSS:" })))
.pipe(plumber())
.pipe(cleancss(option))
.pipe(gulp.dest("./public"));
});
// 压缩public目录下的html文件
gulp.task("compressHtml", function() {
var cleanOptions = {
protect: /<\!--%fooTemplate\b.*?%-->/g, //忽略处理
unprotect: /<script [^>]*\btype="text\/x-handlebars-template"[\s\S]+?<\/script>/gi //特殊处理
};
var minOption = {
collapseWhitespace: true, //压缩HTML
collapseBooleanAttributes: true, //省略布尔属性的值 ==>
removeEmptyAttributes: true, //删除所有空格作属性值 ==>
removeScriptTypeAttributes: true, //删除