Smileyan's blog

3. 优化样式，设计自己的主题3.1 概述第2章完成了hexo的功能实现，虽然非常非常丑，但是可以保证的是该有的功能全部都实现了一遍，这个章节我们开始设计并开发自己的主题。首先需要参考（复制粘贴）一些已有的模板代码，这些代码不要太多，不能太复杂，只要一个简单的界面就行。3.2 选择自己熟悉的 UI 框架现在有很多开源框架，我们使用这些开源框架来实现自己的功能，节省开发成本。最好选择自己熟悉的框架，以及简单可用的框架。比如 bootstrap，pure.css 等。这里我选择的是 bootst

《Hexo: 从零开始编写自己的主题》1. Hexo概述以及Hexo工作原理2. 入门Hexo主题编写3. 优化样式，设计自己的主题4. fancybox优化图片展示效果、代码高亮以及数学公式5. 添加本地搜索功能以及发布博客让官网接收6. 添加自己的脚本，以处理数学公式为例6.1 问题描述这个应该算法是 hexo 的一个BUG或者说是hexo的不足。正常情况下，我们将 markdown 文件渲染为 html 时，需要保护一些特别部分不被渲染，比如说代码块与公式。代码块中写<h1&

5. 添加本地搜索功能以及发布博客让官网接收经过这些时间的折腾，逐步完善主题的各个功能，现在已经提交到 hexo 官网，请前去查看 https://hexo.io/themes/ 并搜索 heyan。5.1 添加本地搜索的功能本地搜索是指搜索范围局限于自己的所有博客，而不是第三方的搜索引擎比如百度谷歌等。比如，这个功能的实现需要依赖于第三方库，具体地址为：https://github.com/wzpan/hexo-generator-search。首先安装依赖，$ npm install

4. fancybox优化图片展示效果、个性化代码高亮、这部分内容非常简单，但我也是琢磨了不少时间，踩了不少的坑才完成的。4.1 添加 fancybox如果 csdn 博客一样，我们点击博客中的图片可以用放大的效果，这个功能的实现只需要以下几个步骤即可。4.1.1 引入 css / js 资源在header.ejs 中引入以下资源（也可以认为是在 layout.ejs 中引入）<link rel="stylesheet" href="https://lib.baomitu.com/fanc

2. 入门Hexo主题编写这部分内容将非常非常简陋地实现主题编写，因为非常简陋，所以代码量也非常少，并且不带任何样式，主要的目的是搭建主题的总体架构，证明所有功能我们都是已经实现了的，把优化界面的事情留到以后完成。2.1 新建主题并配置在 themes 目录下新建一个文件夹，我们的主题对应的就是这个文件夹，给自己的主题起个名字，我们暂时起名为 base 吧。目前 base 还是为空的文件夹，我们修改根目录的 _config.yml 也就是Hexo的配置文件，将主题修改为我们的主题名字 base。并

《Hexo: 从零开始编写自己的主题》整理以前的笔记的最终结果就是，重新系统性地编写新的笔记。Smileyan本系列博客是从开发者的角度看 Hexo 这个博客系统，快速了解基本原理以后，再编写自己的主题。希望通过阅读本系列博客你也能编写一个自己喜欢的样式的主题，并在下面评论，让大家前去看看，给你的github点星星。注意，此系列博客假设读者已经有一定的 Node.js 基础以及安装好了 node 环境，hexo 环境。这些环境的搭建教程有非常多博客教程，希望自行前去学习以及搭建环境。1. 关