竹山一叶

引言通过 hexo 第一次接触到了Markdown。给人的第一感觉是很简单，整个版面看上去比较清爽，很是喜欢：） Markdown 可以通过简单、易读易写的文本格式生成结构化的HTML文档，应用广泛。 基于HTML的语法可以完全用在Markdown中，当然大部分时候我们更需要用Markdown针对书写的边便捷用法，这里做一个总结。 常用语法1. 标题在句首插入#表示标题，有六种标题。也就是最多可以有6个#号表示最小字号的标题 2. 列表有序列表 数字加英文的点 如 1. 2. 3.无序列表 *+- 这三个任意一种后面文本接空格 3. 引用块在引用块的句首加>嵌套引用需要缩进，例如第一层嵌套用>> 4. 代码块使用 ``` 进行代码块引用 可以接对应的代码语言名，例如JS、CSS等，Markdown会自行使用对应的背景渲染。行内引用 可以用两个 `` 进行包裹 5. 链接超链接 [A](网址 "optional title") 图片链接 ...

引言为网站使用到的所有外链添加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 -...

引言<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：从零开始编写自己的主题》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 & = &...

《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 ...

《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"...

《Hexo：从零开始编写自己的主题》1. Hexo概述以及Hexo工作原理2. 入门Hexo主题编写3. 优化样式，设计自己的主题4. fancybox优化图片展示效果、代码高亮以及数学公式5. 添加本地搜索功能以及发布博客让官网接收6. 添加自己的脚本处理数学公式 3. 优化样式，设计自己的主题3.1 概述第2章完成了hexo的功能实现，虽然非常非常丑，但是可以保证的是该有的功能全部都实现了一遍，这个章节我们开始设计并开发自己的主题。 首先需要参考（复制粘贴）一些已有的模板代码，这些代码不要太多，不能太复杂，只要一个简单的界面就行。 3.2 选择自己熟悉的 UI 框架现在有很多开源框架，我们使用这些开源框架来实现自己的功能，节省开发成本。 最好选择自己熟悉的框架，以及简单可用的框架。 比如 bootstrap，pure.css 等。 这里我选择的是 bootstrap5，主要原因是官网提供了大量可用的例子。 3.3 总体设计最上面一行导航栏；左边博客内容，右边为侧边栏。 最下面也是一个导航栏，写上结束语之类的。 这个过程我们是写静态网站，是一个 html 文件，这个过程跟...

《Hexo：从零开始编写自己的主题》1. Hexo概述以及Hexo工作原理2. 入门Hexo主题编写3. 优化样式，设计自己的主题4. fancybox优化图片展示效果、代码高亮以及数学公式5. 添加本地搜索功能以及发布博客让官网接收6. 添加自己的脚本处理数学公式 2. 入门Hexo主题编写这部分内容将非常非常简陋地实现主题编写，因为非常简陋，所以代码量也非常少，并且不带任何样式，主要的目的是搭建主题的总体架构，证明所有功能我们都是已经实现了的，把优化界面的事情留到以后完成。 2.1 新建主题并配置在 themes 目录下新建一个文件夹，我们的主题对应的就是这个文件夹，给自己的主题起个名字，我们暂时起名为 base 吧。 目前 base 还是为空的文件夹，我们修改根目录的 _config.yml 也就是Hexo的配置文件，将主题修改为我们的主题名字 base。 并且在 base 目录下新建 layout 文件夹，并在 layout 下新建 layout.ejs 文件与 index.ejs 文件，前面第一章节介绍过，layout.ejs 是整个主题的入口，而 index.ejs...

《Hexo：从零开始编写自己的主题》1. Hexo概述以及Hexo工作原理2. 入门Hexo主题编写3. 优化样式，设计自己的主题4. fancybox优化图片展示效果、代码高亮以及数学公式5. 添加本地搜索功能以及发布博客让官网接收6. 添加自己的脚本处理数学公式 引言主题的源码地址为：https://github.com/smile-yan/hexo-theme-heyan 本系列博客是从开发者的角度看 Hexo 这个博客系统，快速了解基本原理以后，再编写自己的主题。 希望通过阅读本系列博客你也能编写一个自己喜欢的样式的主题，并在下面评论，让大家前去看看，给你的github点星星。 注意，此系列博客假设读者已经有一定的 Node.js 基础以及安装好了 node 环境，hexo 环境。这些环境的搭建教程有非常多博客教程，希望自行前去学习以及搭建环境。 1. 关于Hexo及其工作原理俗话说得好，磨刀不误砍柴工。先来了解一下Hexo和工作原理。 1.1 什么是HexoHexo.js 官网的概述是：快速、简洁且高效的博客框架。准确而具体地概述应该是 Hexo.js 是一个基于...

引言博客搭建这么久了发现并没有进行过优化，首页虽然打开速度勉强能够接受，但是 github 和 coding 提供的空间有限，是时候优化一下了。基本思路是采用 gulp 进行代码的压缩等。 分析在浏览器输入url到页面打开，都做了些什么？ 浏览器里输入网址 https://zsyyblog.com 浏览器查找域名对应的IP地址这一步包括DNS具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存… 浏览器向web服务器发送一个HTTP请求 服务器的永久重定向响应（从https://zsyyblog.com 到 https://www.zsyyblog.com）关于为什么要重定向。其中一个原因跟搜索引擎排名有关。如果一个页面有两个地址，就像 https://zsyyblog.com 和 https://www.zsyyblog.com...