5 分钟带你读懂 Hexo 源码设计模式
Hexo是什么? 官方定义是快速、简洁且高效的博客框架,实际不仅仅于此,它是一个JS语言编写的静态网站生成器,主要作用是解析Markdown语法,并配合模板引擎,快速生成静态网站。同时,还可以自定义主题,引用第三方插件,除了搭建个人博客之外,Hexo还被许许多多的项目拿来生成API文档,如阿里开源项目Weex、Egg等等。 框架特色 Node.js运行环境,速度极快,扩展
Hexo是什么? 官方定义是快速、简洁且高效的博客框架,实际不仅仅于此,它是一个JS语言编写的静态网站生成器,主要作用是解析Markdown语法,并配合模板引擎,快速生成静态网站。同时,还可以自定义主题,引用第三方插件,除了搭建个人博客之外,Hexo还被许许多多的项目拿来生成API文档,如阿里开源项目Weex、Egg等等。 框架特色 Node.js运行环境,速度极快,扩展
方法 bilibili默认给的是一个iframe,在iframe中添加css样式:style=”position:absolute; height: 100%; width: 100%;”在原来的iframe外面嵌套一层div,div添加样式:style=”position:relative; padding-bottom:75%” 直接上代码:
修改 pug 代码 butterfly-swiper下载 将资源包中的sliderbar.pug复制到文件夹blog\themes\butterfly\layout中。 将index.pug复制并重命名为index-re.pug作为备份,将资源包 pug 文件夹的index.pug覆盖进行替换。 或者打开index.pug按照以下代码进行修改。修改的起始点为#recen
安装插件 12345 npm i hexo-butterfly-article-double-row --save# 或者cnpm i hexo-butterfly-article-double-row --save 修改站点配置 修改站点根目录下的配置文件_config.yml
安装插件 在博客根目录[blog]下打开终端,运行以下指令: 1 npm install hexo-filter-gitcalendar --save 修改配置 在站点配置文件_config.yml或者主题配置文件如_config.butterfly.yml中添加
引言 Hexo 是一个轻量、快速,简单和强大的博客框架,当我们需要发布博文的时候,只需要将写好的文章(MarkDown文件)放入本地的 \source\_posts 文件夹,然后再推送上去就行了,原理就是当我们在执行 hexo g 命令时,.md 文件就会被转化成 HTML 文件,但是有时候我们需要新建一个独立的页面,这个页面不使用主题的渲染,具有自己独立的样式,可以放一些自
前言 不知道大家对于默认的butterfly版权怎么看?如果不太满意可以按照如下教程进行美化。 教程 修改post-copyright.pug 打开ROOT\themes\butterfly\layout\includes\post文件夹,将下列代码覆盖post-copyright.pug文件 1234567891011121314
前言 看到了大佬的文章页一页到底,效果如下图所示:那么怎么样修改才能做到这一点呢? 教程 适用范围:butterfly3.3.0-3.5.1。更低版本以及更高有没有效果不能保证。 新建Styl文件 在ROOT\themes\butterfly\source\css\page目录新建topimg.styl page目录为_page,因为markdown的渲染
介绍本文将会详细介绍一图流背景与顶部图的修改过程。 设置图片 这个是 Butterfly 自带的功能,修改主题的配置文件 _config.butterfly.yml。 编辑 index_img、background、footer_bg 选项。设置网站背景,并将主页顶部图和页脚背景改为透明。(需要将以下示例地址替换为自己的图片地址。)
前言 如果你的 Butterfly 版本高于 4.3.0,则主题自带 CDN 自定义格式功能。可参考 主题文档的 CDN 部分 进行配置,无需继续以下步骤。 教程 创建文件 创建一个 JavaScript 脚本文件,放到 scripts 文件夹。 增加代码 123456789101112 modify.js'us...