竹山一叶

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

引言hexo-theme-butterfly是基於 hexo-theme-melody 的基礎上進行開發的。 Bufferfly主题安装在hexo主题根目录下通过git bash输入以下命令安装Butterfly主题。 1git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly 应用Butterfly主题修改 Hexo 根目录下的 _config.yml，把主题改为butterfly。（大概在_config.yml文件代码第100行） 1234# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: butterfly 安装插件一般情况下在上一步结束后就可以直接在本地运行成功了，但是butterfly主题依赖 pug 以及 stylus 的渲染器，如果不安装此插件直接运行网站会出现错误。pug 以及 stylus 的渲染器安装命令如下所示： ...

前言支持跨域、随意开关接口的 hexo 博客 api 插件hexo-info-api。 响应头12345Content-Type: application/json; charset=utf-8Access-Control-Allow-Origin: <config.allowOrigin>Access-Control-Allow-Credentials: true 数据将以 UTF-8 编码 json 格式返回 你可以从配置文件设置允许跨域访问的域名（设置为 * 为允许所有域名） 安装12345# npmnpm install hexo-info-api --save# yarnyarn add hexo-info-api 配置向 hexo 的配置文件 _config.yml 中添加以下内容 1234567891011121314151617hexo_info_api: allowOrigin: "*" # 设置为 "*" 以允许所有源访问 (跨域访问 Access-Control-Allow-Origin) enable: ...

简介hexo-generator-index2是带过滤功能的Hexo首页生成器插件。在官方的首页生成器基础上添加了过滤指定分类/标签的功能。比如，在首页只显示指定分类下面的文章列表。 除此之外，它还在指定的目录下生成指定类型的文章，比如在web目录下生成Web相关的文章。 安装12npm install hexo-generator-index2 --savenpm uninstall hexo-generator-index --save hexo-generator-index2可以完全替代官方的hexo-generator-index，所以安装之后，先卸载官方的插件，不然会引起一些冲突。 选项1234567891011# index2 generator是否包含官方的hexo-generator-index，默认true（包含）index2_include_index: true # defult is true# 配置index2 generator，可以是数组或对象index2_generator: per_page: 10 order_by: -date i ...