Hexo系列

HexoRSS分类订阅

[三万字教程]基于Hexo的matery主题搭建博客并深度优化完全一站式教程

  • markdown 各种其它语法插件,latex公式支持,mermaid图表,plant uml图表,URL卡片,bilibili卡片,github卡片,豆瓣卡片,插入音乐和视频,插入脑图,插入PDF,嵌入iframe

如果本主题中的诸多功能和主题色彩你不满意,可以在主题中自定义修改,很多更自由的功能和细节点的修改难以在主题的 _config.yml 中完成,需要修改源代码才来完成。以下列出了可能有用的地方:

修改主题颜色

配色包括导航栏,底部栏,a标签等,主题配色是绿色。

修改themes\Matery\source\css\matery.css样式
快捷键ctrl+F查找到#4cbf30(浅绿色)和#0f9d58(深绿色)还有首页字体颜色,修改为你喜欢的颜色

/* 整体背景颜色,包括导航、移动端的导航、页尾、标签页等的背景颜色. */ 
.bg-color { 
	background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%); 
} 
/*如果想去掉banner图的颜色渐变效果,请将以下的css属性注释掉或者删除掉即可*/ 
@-webkit-keyframes rainbow { 
	/* 动态切换背景颜色. */ 
} 
@keyframes rainbow { 
	/* 动态切换背景颜色. */ 
}

背景樱花飘落效果

themes/matery/source/js目录下新建sakura.js文件,打开这个网址传送门,将内容复制粘贴到sakura.js即可。

然后在themes/matery/layout/layout.ejs文件内添加下面的内容:

<script type="text/javascript">
//只在桌面版网页启用特效
var windowWidth = $(window).width();
if (windowWidth > 768) {
    document.write('<script type="text/javascript" src="/js/sakura.js"><\/script>');
}
</script>

修改花瓣的数量

因为普遍在使用的樱花背景效果花瓣数太多了,一些人不太喜欢。

于是按不同花瓣数量做了几个新的 js ,并提供如下 cdn 形式的引用:

https://cdn.jsdelivr.net/gh/fz6m/Private-web@1.2/js/sakura/sakura-small.js

以上为少量樱花效果,另提供几个不同数量的文件引用名:

文件名说明
sakura-small.js少量樱花
sakura-half.js樱花相对原效果数量减半
sakura-reduce.js樱花相对原效果减少1/4
sakura-original.js樱花数量不变(原效果)

自定义鼠标样式

首先将鼠标样式下载到本地,推荐大家一个网站:https://zhutix.com/ico/ori-cursors/

以我的为例,我将鼠标指针样式放在了主题文件夹下的medias目录下,然后打开themes\matery\source\css下的my.css文件,添加内容如下:

*{
    cursor: url("/medias/imgs/zhengchang.ico"),auto!important;
}
:active{
    cursor: url("/medias/imgs/dianji.ico"),auto!important;
}

取消首页渐变颜色动画

在themes\Matery\source\css\matery.css,ctrl+F快捷键查找.bg-cover:after,注释掉即可。

/* .bg-cover:after {
    -webkit-animation: rainbow 60s infinite;
    animation: rainbow 60s infinite;
} */

首页随机图片轮播

themes\matery\layout\_partial\bg-cover-content.ejs

修改随机获取一张图片:

$('.bg-cover').css('background-image', 'url(<%- theme.featureImages[Math.floor(Math.random() * theme.featureImages.length + 1)-1] %>)');

优化目录栏,透明化

目录样式竟然在:themes\Matery\layout\_partial\post-detail-toc.ejs

.toc-widget {
    width: 345px;
    padding-left: 20px;
    background-color: rgb(255, 255, 255,0.7);
    border-radius: 10px;
    box-shadow: 0 10px 35px 2px rgba(0, 0, 0, .15), 0 5px 15px rgba(0, 0, 0, .07), 0 2px 5px -5px rgba(0, 0, 0, .1) !important;
}

增加点击跳转评论按钮

新建文件themes\Matery\layout\_partial\back-comment.ejs,粘贴如下代码

我这里评论是valine,直接填写的valine的id——href="#vcomments",如果是其他评论,对应修改即可。

<!-- 直达评论 -->
<div id="to_comment" class="comment-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#vcomments" title="直达评论">
        <i class="fas fa-comments"></i>
    </a>
</div>

themes\Matery\layout\_partial\valine.ejs文末添加一条,引用第一步的内容;

<%- partial('_partial/back-comment.ejs') %>

则只在valine存在的页面才显示直达评论,防止首页其他地方也出现按钮。其实还可以优化为浮动出现,有一点麻烦,我这里没有设置。

增加样式在themes\Matery\source\css\matery.css添加内容如下:

/*直达评论按钮样式*/
.comment-scroll {
    position: fixed;
    right: 15px;
    bottom: 135px;
    padding-top: 15px;
    margin-bottom: 0;
    z-index: 998;
}

.comment-scroll .btn-floating {
    background: linear-gradient(to bottom right, #FF9999 0%, #ff6666 100%);
    width: 48px;
    height: 48px;
}

.comment-scroll .btn-floating i {
    line-height: 48px;
    font-size: 1.8rem;
}

bottom: 135px;是距离底部的高度,看看你是否需要修改。

修改滑动条

/* 滚动条 */
::-webkit-scrollbar-thumb {
    background-color: #FF2A68;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    border-radius: 3em;
}
::-webkit-scrollbar-track {
    background-color: #ffcacaff;
    border-radius: 3em;
}
::-webkit-scrollbar {
    width: 8px;
    height: 15px;
}

文章标题添加打字机效果

定位到文章标题代码 layout/_partial/post-cover.ejs

<h1 class="description center-align post-title"><%= page.title %></h1>

文章标题代码替换成下面的代码

<script src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.typed) %>"></script>
<% if (theme.post.enable) { %>
    <script>
        var typedObj = new Typed("#post-title", {
            strings: [ '<%= page.title %>' ],
            startDelay: <%= theme.post.startDelay %>,
            typeSpeed: <%= theme.post.typeSpeed %>,
            loop: <%= theme.post.loop %>,
            backSpeed: <%= theme.post.backSpeed %>,
            showCursor: <%= theme.post.showCursor %>
        });
    </script>
<% } %>

最后在主题配置文件中进行配置 _config.yml

# 文章标题
post:
  enable: true
  loop: false # 是否循环
  showCursor: true # 是否显示光标
  startDelay: 500 # 开始延迟
  typeSpeed: 100 # 打字速度
  backSpeed: 50 # 删除速度

现在就完成了为一言和文章标题添加打字机效果

更换字体

一般网站的web字体都可以直接从Google-Font获取资源,这样不用担心字体商业带来的法律问题。

常见的开源字体有:

思源黑体 、 文泉驿 、 文鼎开放字体 、 柳体 、 cwTeX中文字体 、 濑户字体、江西拙楷体等。

1)创建web字体引用

@font-face{
    font-family: '引用的字体名称';
    src: url('谷歌字体路径(或者其他什么字体引用)');   
}

2)在网页合适的位置进行字体引用

①利用浏览器检查元素,获取需要定义字体的部分

②在主体的配置文件中(hexo-theme-matery/layout/…)找到对应的渲染(.ejs)文件,查找需要修改的部分

①演示一下利用浏览器获取定义字体的部分

对获取到的id选择器:#artDetail进行css渲染

#artDetail {
    font-family: '引用的web字体';
}

②利用主体的ejs渲染文件找出需要修饰的部分(加入自定义类)

/*使用我在文章内容详情定义的diyFnot类**/
.diyfont {
   font-family: '引用的web字体'; 
}

/*也可以使用自带的id*/
#artDetail {
    font-family: '引用的web字体'; 
}

网站全局化字体定义

@font-face{
    font-family: '引用的字体名称';
    src: url('谷歌字体路径(或者其他什么字体引用)');   
}

body {
    font-family: '引用的web字体名称'; 
}

引用本地的字体文件

当然有时候那个谷歌字体的网站可能登录不上去,需要科学上网,很烦人!我们也可以直接下载下字体文件,将他放在本地,进行直接引用!看下面操作👇

①在本地的hexo根目录的source文件下创立diy-font文件夹:/source/diy-font

在该文件下存放你的字体文件,比如:/source/diy-font/IBMPlexMono-Italic.ttf

②引用本地字体(仍然是在my.css文件中书写代码)

@font-face{
    font-family: 'hl';
    src: url('../diy-font/IBMPlexMono-Italic.ttf');
}

/** 表示全局使用,如果不想全局使用不要添加该段 */
body{
    font-family: 'hl';
}


/* 可以局部使用,建议添加 */
.diyFont{
    font-family: 'hl';
}

这样我们就可以实现引用本地的字体了,并且在web有效!

在你想要使用的元素的 class 里面加上 diyFont 即可。

  • 直接使用

    F12,找到对应的代码片段即可:

<span class="logo-span diyFont">测试字体</span>
  • 模板使用

    找到对应的模板 header.ejs中的代码片段使用即可:

<span class="logo-span diyFont"><%= config.title %></span>

修改主题颜色

在主题文件的 /source/css/matery.css 文件中,搜索 .bg-color 来修改背景颜色:

/* 整体背景颜色,包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
  background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}

@-webkit-keyframes rainbow {
  /* 动态切换背景颜色. */
}

@keyframes rainbow {
  /* 动态切换背景颜色. */
}

修改 banner 图和文章特色图

可以直接在 /source/medias/banner 文件夹中更换喜欢的 banner 图片,主题代码中是每天动态切换一张,只需 7 张即可。如果会 JavaScript 代码,可以修改成自己喜欢切换逻辑,如:随机切换等,banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 <script></script> 代码中:

$(".bg-cover").css("background-image", "url(/medias/banner/" + new Date().getDay() + ".jpg)");

/source/medias/featureimages 文件夹中默认有 24 张特色图片,你可以再增加或者减少,并需要在 _config.yml 做同步修改。

Hexo 跳过渲染

在Hexo部署时会默认渲染source下的所有html页面,但有时候想在Hexo博客上单独自定义html页面或README.md时,却不希望被Hexo渲染。因此对某个文件或者目录进行排除渲染是非常必要的。

方法一:font matter

Hexo新建网站页面,然后将你的代码直接写入 index.md

Front matter 中添加 layout: false,此方法适用于单一的纯HTML
CSS 页面。

---
title: tools
date: 2020-04-28 00:00:00
type: "tools"
layout: false
---

方法二:skip rende

在博客根目录下的 _config.yml,找到 skip_render,大概在32行左右,写入你想要的跳过渲染的路径,注意缩进和空格。

# 指定目录跳过hexo渲染
skip_render:
  - 'tools/*'
  - 'tools/**'

注释:tools/* 表示在目录 source/fireworks 下的文件全部跳过渲染,tools/** 表示在博客根目录 source/tools/ 文件夹下的文件全部跳过渲染(例如页面的 js、css 在另一个文件夹中)。

博客中插入音乐

hexo-tag-aplayer

hexo-tag-aplayerAPlayer 播放器的 Hexo 标签插件(现已支持 MetingJS)。

安装

npm install --save hexo-tag-aplayer

使用方法——aplayer

{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}
  • title : 曲目标题
  • author: 曲目作者
  • url: 音乐文件 URL 地址
  • picture_url: (可选) 音乐对应的图片地址
  • narrow: (可选)播放器袖珍风格
  • autoplay: (可选) 自动播放,移动端浏览器暂时不支持此功能
  • width:xxx: (可选) 播放器宽度 (默认: 100%)
  • lrc:xxx: (可选)歌词文件 URL 地址
    例如:
{% aplayer "她的睫毛" "周杰伦" "http://home.ustc.edu.cn/~mmmwhy/%d6%dc%bd%dc%c2%d7%20-%20%cb%fd%b5%c4%bd%de%c3%ab.mp3"  "http://home.ustc.edu.cn/~mmmwhy/jay.jpg" %}

如果你觉得前面的方法不太好用,可以用下面的方法,使用MetingJS。

使用方法——MetingJS

MetingJS 是基于Meting API 的 APlayer 衍生播放器,支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。
第一步:修改_config.yml配置
在hexo的配置文件_config.yml中添加:

aplayer:
	meting: true

第二步:使用MetingJS 播放器

<!-- 简单示例 (id, server, type)  -->
{% meting "571184509" "xiami" "playlist" %}

有关的选项列表如下:

选项默认值描述
id必须值歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server必须值音乐平台: netease, tencent, kugou, xiami, baidu
type必须值song, playlist, album, search, artist
fixedfalse开启固定模式
minifalse开启迷你模式
loopall列表循环模式:all, one,none
orderlist列表播放模式: list, random
volume0.7播放器音量
lrctype0歌词格式类型
listfoldedfalse指定音乐播放列表是否折叠
storagenamemetingjsLocalStorage 中存储播放器设定的键名
autoplaytrue自动播放,移动端浏览器暂时不支持此功能
mutextrue该选项开启时,如果同页面有其他 aplayer 播放,该播放器会暂停
listmaxheight340px播放列表的最大长度
preloadauto音乐文件预载入模式,可选项: none, metadata, auto
theme#ad7a86播放器风格色彩设置

博客中插入视频

hexo-tag-dplayer

hexo-tag-dplayerDPlayer 播放器的 Hexo 标签插件

安装

npm install --save hexo-tag-dplayer

使用

{% dplayer key=value ... %}
例:
{% dplayer "url=http://www.nenu.edu.cn/_upload/article/videos/03/5f/7c999eed42e3aadc413d7f851f0e/0f50b3eb-9285-41d2-ac4d-6cc363651aad_B.mp4"  "autoplay=true" "preload=metadata" "hotkey=true" %} 

有关的选项列表如下:

选项默认值描述
url必须值视频地址
loopfalse视频循环播放
volume0.7播放器音量
hotkeytrue开启热键
autoplaytrue自动播放,移动端浏览器暂时不支持此功能
logo-在左上角展示一个 logo,你可以通过 CSS 调整它的大小和位置
mutextrue该选项开启时,如果同页面有其他播放,该播放器会暂停
highlight[]自定义进度条提示点
preloadauto视频文件预载入模式,可选项: none, metadata, auto
theme#ad7a86播放器风格色彩设置

注:如果使用腾讯视频、优酷视频等在线视频网站的资源,需要先进行视频地址解析,如点量视频解析,获取到实际的视频地址。

其他使用方法

在使用优酷或者腾讯视频时可以直接复制分享代码到文章中,如:

<iframe height=498 width=510 src='https://player.youku.com/embed/XMjk4ODAyMzIyOA==' frameborder=0 'allowfullscreen'></iframe>

参考文献

外链跳转插件

使用 npm 或者 yarn 安装

## npm 安装
npm install hexo-external-link --save
## yarn 安装
yarn add hexo-external-link

之后在博客站点根目录下添加如下配置:

hexo_external_link:
  enable: true
  enable_base64_encode: true
  url_param_name: 'u'
  html_file_name: 'go.html'
  target_blank: true
  link_rel: 'external nofollow noopener noreferrer'
  domain: 'your_domain' # 如果开启了防盗链,填写你的域名
  safety_chain: true

文章生成永久链接

主题默认的文章链接配置是

premalink: :year/:month/:day/:title

这种生成的链接地址很长,文章版权的链接地址会出现一大串字符编码,一点也不好看。因此需要修改文章生成链接的格式。 首先再根目录下执行下面的命令: hexo-abbrlinkGitHub地址

npm install hexo-abbrlink --save

然后再站点配置文件下添加如下配置:

abbrlink: 
    alg: crc16 #算法:
    crc16(default) and crc32 rep: hex #进制: dec(default) and hex: dec #输出进制:十进制和十六进制,默认为10进制。丨dec为十进制,hex为十六进制

再将站点配置文件的permalink的值修改为:

permalink: posts/:abbrlink.html  # 此处可以自己设置,也可以直接使用 :/abbrlink

生成完后,原md文件的Front-matter 内会增加abbrlink 字段,值为生成的ID 。这个字段确保了在我们修改了Front-matter 内的博客标题title或创建日期date字段之后而不会改变链接地址.

系列教程

全部文章RSS订阅

Hexo系列

HexoRSS分类订阅

[三万字教程]基于Hexo的matery主题搭建博客并深度优化完全一站式教程

  • markdown 各种其它语法插件,latex公式支持,mermaid图表,plant uml图表,URL卡片,bilibili卡片,github卡片,豆瓣卡片,插入音乐和视频,插入脑图,插入PDF,嵌入iframe

笔记系列

Note分类RSS订阅

Gitbook使用系列

Gitbook分类RSS订阅

Gitlab 使用系列

Gitlab RSS 分类订阅


文章作者: 夜法之书
版权声明: 本博客所有文章除特別声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 夜法之书 !
评论
 上一篇

阅读全文

基于Hexo的matery主题搭建博客网络优化篇3
基于Hexo的matery主题搭建博客网络优化篇3 基于Hexo的matery主题搭建博客网络优化篇3
有了一个独立博客后,访问速度很忙怎么办?这时候你需要上各种各样的优化手段了,比喻CDN,service worker,页面压缩技术,SEO优化等等。
2022-03-27
下一篇 

阅读全文

ISP 数字图像处理 算法概述、工作原理、架构、处理流程
ISP 数字图像处理 算法概述、工作原理、架构、处理流程 ISP 数字图像处理 算法概述、工作原理、架构、处理流程
从物理sensor中采集到的原始电平信号,转换到人眼可识别,符合人眼色彩习惯图像的过程就叫ISP图像处理。这是一个没有完美解决方案的方法。虽然算法一直在改进,但一直有存在某些漏洞。
2022-03-24
  目录