Hexo 中经常使用CDN加速技术介绍
对 Hexo 中经常使用到的CDN加速技术进行简单的介绍。你会了解到网站CDN加速是什么?CDN加速起到什么作用?
Hexo 为 Valine 增加博主、小伙伴标识以及浏览器图标
在 Hexo 中为 Valine 评论系统增加博主、小伙伴标识以及浏览器图标,使用了魔改版的 Valine 文件。
Hexo 添加百度主动推送的功能
引言百度主动推送的作用:
及时发现:可以缩短百度爬虫发现您站点新链接的时间,使新发布的页面可以在第一时间被百度收录
保护原创:对于网站的最新原创内容,使用主动推送功能可以快速通知到百度,使内容可以在转发之前被百度发现
百度站长工具注册先在百度站长工具中添加自己的网站(域名要是自己的域名,https://yourname.github.io 域名不可以)
站长工具地址:https://ziyuan.baidu.com/dashboard/index
按照说明的步骤一步一步操作就可以,尽量用www开头的域名即可,这是官方推荐的。
安装插件在Hexo站点根目录下,打开git-bash,输入下面命令安装插件:
1npm install hexo-baidu-url-submit --save
修改配置修改配置文件_config.yml
123456#设置百度主动推送baidu_url_submit: count: 200 #比如200,代表提交最新的200个链接 host: zsyyblog.com # 在百度站长平台中注册的域名,这个改为你自己的域名 token: your_t ...
Hexo使用Markdown语法速查表
引言Markdown 速查表提供了所有 Markdown 语法元素的基本解释。如果你想了解某些语法元素的更多信息,请参阅更详细的 基本语法 和 扩展语法。
基本语法这些是 John Gruber 的原始设计文档中列出的元素。所有 Markdown 应用程序都支持这些元素。
元素
Markdown 语法
标题(Heading)
# H1## H2### H3
粗体(Bold)
bold text
斜体(Italic)
italicized text
引用块(Blockquote)
> blockquote
有序列表(Ordered List)
1. First item2. Second item3. Third item
无序列表(Unordered List)
- First item- Second item- Third item
代码(Code)
`code`
分隔线(Horizontal Rule)
—
链接(Link)
[title](https://www.example.com)
图片(Image)
![alt te ...
Hexo使用Markdown的语法简介
引言通过 hexo 第一次接触到了Markdown。给人的第一感觉是很简单,整个版面看上去比较清爽,很是喜欢:)
Markdown 可以通过简单、易读易写的文本格式生成结构化的HTML文档,应用广泛。
基于HTML的语法可以完全用在Markdown中,当然大部分时候我们更需要用Markdown针对书写的边便捷用法,这里做一个总结。
常用语法1. 标题在句首插入#表示标题,有六种标题。也就是最多可以有6个#号表示最小字号的标题
2. 列表有序列表 数字加英文的点 如 1. 2. 3.无序列表 *+- 这三个任意一种后面文本接空格
3. 引用块在引用块的句首加>嵌套引用需要缩进,例如第一层嵌套用>>
4. 代码块使用 ``` 进行代码块引用 可以接对应的代码语言名,例如JS、CSS等,Markdown会自行使用对应的背景渲染。行内引用 可以用两个 `` 进行包裹
5. 链接超链接 [A](网址 "optional title")
图片链接 ![A](网址/地址 可选标题) 地址也可以用本地路径,可以在markdo ...
Hexo使用 hexo-filter-nofollow 加强网站SEO和防止权重流失
引言为网站使用到的所有外链添加rel="noopener external nofollow noreferrer", 可以有效地加强网站SEO和防止权重流失。
hexo-filter-nofollow插件自动将nofollow属性添加到所有外部链接。
安装方法1npm i hexo-filter-nofollow --save
配置选项123456nofollow: enable: true field: site exclude: - 'exclude1.com' - 'exclude2.com'
参数说明123456enable - 是否启用插件。默认值为:true field - 您希望插件继续的范围可以是“site”或“post”。默认值为:site 'post' - 仅将nofollow属性添加到帖子内容中的外部链接 'site' - 将nofollow属性添加到整个网站的外部链接exclude - 排除主机名。指定子域(如果适用),包括w ...
Hexo调整Markdown表格宽度的技巧
引言<table> 中表格的宽度由标题的 <th> 决定,我们只需要利用上 CSS 操作一番即可达到目的。
解决方法默认情况下,下面表格两列是等宽的
第一列
第二列
A
B
C
D
在MD文件中增加以下的样式后就可以修改第一列的宽度为100px了
12345<style> table th:first-of-type { width: 100px; }</style>
或者
12345<style> table th:nth-of-type(1) { width: 100px; }</style>
table th:first-of-type {
width: 100px;
}
《Hexo:从零开始编写自己的主题》 - 6. 添加自己的脚本处理数学公式
《Hexo:从零开始编写自己的主题》1. Hexo概述以及Hexo工作原理2. 入门Hexo主题编写3. 优化样式,设计自己的主题4. fancybox优化图片展示效果、代码高亮以及数学公式5. 添加本地搜索功能以及发布博客让官网接收6. 添加自己的脚本处理数学公式
6. 添加自己的脚本,以处理数学公式为例6.1 问题描述这个应该算法是 hexo 的一个BUG或者说是hexo的不足。正常情况下,我们将 markdown 文件渲染为 html 时,需要保护一些特别部分不被渲染,比如说代码块与公式。
代码块中写
1<h1> Hello World </h1>
很明显这块代码不应该被渲染,公式也是如此,但是对于复杂的公式,可能存在大公式里包含小公式的情况,hexo 有可能只渲染子模块,比如:
公式为
123456789101112131415161718192021222324252627$$f(x)=\left\{\begin{aligned}x & = & \cos(t) \\y & = & \sin( ...
《Hexo:从零开始编写自己的主题》 - 5. 添加本地搜索功能以及发布博客让官网接收
《Hexo:从零开始编写自己的主题》1. Hexo概述以及Hexo工作原理2. 入门Hexo主题编写3. 优化样式,设计自己的主题4. fancybox优化图片展示效果、代码高亮以及数学公式5. 添加本地搜索功能以及发布博客让官网接收6. 添加自己的脚本处理数学公式
5. 添加本地搜索功能以及发布博客让官网接收经过这些时间的折腾,逐步完善主题的各个功能,现在已经提交到 hexo 官网,请前去查看 https://hexo.io/themes/ 并搜索 heyan。
5.1 添加本地搜索的功能本地搜索是指搜索范围局限于自己的所有博客,而不是第三方的搜索引擎比如百度谷歌等。
比如,
这个功能的实现需要依赖于第三方库,具体地址为:https://github.com/wzpan/hexo-generator-search。
首先安装依赖,
1npm install hexo-generator-search --save
接着修改hexo的 _config.yml 配置文件,在后面添加:
12345search: path: search.xml field: post content ...
《Hexo:从零开始编写自己的主题》 - 4. fancybox优化图片展示效果、代码高亮以及数学公式
《Hexo:从零开始编写自己的主题》1. Hexo概述以及Hexo工作原理2. 入门Hexo主题编写3. 优化样式,设计自己的主题4. fancybox优化图片展示效果、代码高亮以及数学公式5. 添加本地搜索功能以及发布博客让官网接收6. 添加自己的脚本处理数学公式
4. fancybox优化图片展示效果、代码高亮与数学公式查看效果 https://smileyan.cn/heyan/ 。
这部分内容非常简单,但我也是琢磨了不少时间,踩了不少的坑才完成的。
4.1 添加 fancybox如果 csdn 博客一样,我们点击博客中的图片可以用放大的效果,这个功能的实现只需要以下几个步骤即可。
4.1.1 引入 css / js 资源在header.ejs 中引入以下资源(也可以认为是在 layout.ejs 中引入)
1234<link rel="stylesheet" href="https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.css"><script ...