1 前言
在我们使用VNote写博客的时候,里面有一个功能叫警告
,具体的效果可以查看这里 Bootstrap Alerts。
2 环境的准备
由于hexo本身并不自带markdown-it渲染器,所以需要将需要进行替换。
- 可以点击查看这里的替换教程,插件的官网方面:点击查看官网的github
- markdown-it渲染器本身是不支持alerts语法,所以此时需要安装markdown-it-alerts插件。
具体安装,可以查看以下的安装命令
1 2
| cd hexo根目录 npm i markdown-it-alerts --save
|
更新hexo的_config.yml
文件,如下的配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| markdown: render: html: true xhtmlOut: false breaks: true linkify: true typographer: true quotes: '“”‘’' plugins: - plugin: name: markdown-it-alerts enable: true anchors: level: 2 collisionSuffix: '' permalink: false permalinkClass: 'header-anchor' permalinkSide: 'left' permalinkSymbol: '¶' case: 0 separator: ''
|
- 由于markdown-it-alerts的插件只是寻找到对应markdown语法进行替换,css样式部分它并不负责,所以需要到网站官网去下载样式,点击下载Bootstrap样式。也可以将样式里面大部分删除,只剩下 alert 相关的CSS样式。
3 环境的配置
这里我会划分成两步:
- 加载Alerts所需的CSS样式
- 优化markdown-it-alerts插件
3.1 加载Alerts所需的CSS样式
对于加载额外的样式,可以使用hexo提供的辅助函数(Helpers)。
- 将样式存放,即将样式放到
hexo根目录/source/css/bootstrap.css
- 让主题加载这个新添加的样式,寻找到网页head总定义位置,一般在(
hexo根目录/themes/你用的主题/layout/_partial/head.ejs
),如果还是没有找到,可以看看是否在hexo根目录/themes/你用的主题/layout/layout.ejs
。在head.ejs里面添加以下的一句代码
1
| <%- css('/css/bootstrap.css') %>
|
此时就会有alerts的样式,开始下一步
3.2 优化markdown-it-alerts插件
markdown-it-alerts与VNote在Alerts方面还是有所区别,这里就会导致一些尴尬,在VNote写完,不能在hexo里面直接用。查看以下图表
此时需要进入到 markdown-it-alerts 插件进行语法分析修改,保证与VNote一致的语法分析。进入博客根目录/node_modules/markdown-it-alerts/index.js
,打开进行修改成以下的内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59
| 'use strict';
var container = require('markdown-it-container');
module.exports = function alerts_plugin(md, options) { var containerOpenCount = 0; var links = options ? options.links : true; init(); return; function setupContainer(name) { md.use(container, name, { render: function (tokens, idx) { if (tokens[idx].nesting === 1) { containerOpenCount += 1; return '<div class="alert ' + name + '" role="alert">\n'; } else { containerOpenCount -= 1; return '</div>\n'; } } }); } function isContainerOpen() { return containerOpenCount > 0; } function selfRender(tokens, idx, options, env, self) { return self.renderToken(tokens, idx, options); } function setupLinks() { var defaultRender = md.renderer.rules.link_open || selfRender; md.renderer.rules.link_open = function (tokens, idx, options, env, self) { if (isContainerOpen()) { tokens[idx].attrPush(['class', 'alert-link']); } return defaultRender(tokens, idx, options, env, self); }; } function init() { setupContainer('alert-primary'); setupContainer('alert-secondary'); setupContainer('alert-success'); setupContainer('alert-info'); setupContainer('alert-warning'); setupContainer('alert-danger'); setupContainer('alert-light'); setupContainer('alert-dark'); if (links) { setupLinks(); } } };
|
从此VNote与hexo的alerts语法分析就一致了,可以相互使用,开始快乐的写博客吧!!!
4 效果
A simple success alert—check it out!
A simple danger alert—check it out!