竹山一叶

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

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

《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 是一个基于 Node. ...

引言博客搭建这么久了发现并没有进行过优化，首页虽然打开速度勉强能够接受，但是 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 ，搜索引擎会认为它们是两个网站，结果造成每一个的搜索链接都减少从而降低排名。所以要把带www的和不带www的地址归到同一个网站排名下。还有一个原因是用不同的地址会造成缓存友好性变差。 浏览器跟踪重定向地址，发起GET请求 服务器”处理”请 ...

一、引言Hexo作为一个优秀的Markdown博客框架，自然也诞生了很多适用的Markdown渲染器，这里对比分析一下Hexo下几种常用的Markdown渲染器：hexo-renderer-marked、hexo-renderer-kramed、hexo-renderer-pandoc、hexo-renderer-markdown-it、hexo-renderer-markdown-it-plus。 二、详细介绍2.1、hexo-renderer-markedHexo默认的Markdown的渲染器，针对于普通的Markdown的文章书写，该渲染器已经足够，但是由于不支持Mathjax，不支持插件扩展，不支持emoji表情，所以该渲染器也是介绍的渲染器中功能最弱的。 GitHub地址：https://github.com/hexojs/hexo-renderer-marked NPM地址：hexo-renderer-marked 版本：2.0.0最近提交：a month ago依赖：hexo-util，marked，strip-indent安装方式：npm install hexo-re ...

引言在写博客时，往往会涉及到一些数学公式，当你需要使用 LaTeX 语法时，由于 Hexo 默认的 Markdown 渲染器(hexo-renderer-marked)不支持复杂公式，导致渲染失败，这时候就需要更换 Markdown 渲染器。 卸载 Markdown 渲染器在更换 Markdown 渲染器时，需要卸载原先的 Markdown 渲染器 1npm uninstall hexo-renderer-marked --save 推荐的 Markdown 渲染器在 Fluid 主题中，官网给出了推荐的 Markdown 渲染器，你可以 点击这里查看详细信息 不可以同时安装多个渲染器，如果更换公式引擎，对应渲染器也要一并更换。 下面介绍几种常见的 Markdown 渲染器，你可以在 Hexo 插件 中找到它们。 你也可以在 这里 查看更多版本。 hexo-renderer-marked Hexo 默认的 Markdown 的渲染器，不支持 Mathjax，不支持插件扩展，不支持 emoji 表情 项目地址：https://github.com/hexojs/hexo-ren ...

前言如何让markdown可以解析emoji呢？在编辑器中输入 :blush: 并没有表情出现，为什么呢？ 这是markdown渲染引擎的问题，Hexo默认是采用hexo-renderer-marked，这个渲染器不支持插件扩展，当然就不行了，还有一个支持插件扩展的是 hexo-renderer-markdown-it，所以我们可以使用这个渲染引擎来支持emoji表情，具体实现过程如下。 更换渲染引擎进入blog目录下，执行以下命令： 12npm un hexo-renderer-marked --savenpm i hexo-renderer-markdown-it --save 安装emoji插件1npm install markdown-it-emoji --save 修改配置文件修改_config.yml文件，添加如下内容 12345678910111213141516171819202122232425262728293031323334# Markdown-it config## Docs: https://github.com/celsomiranda/hexo-re ...