K-article使用说明与示例

K-article说明

K-article是一个html文章的css样式，外带了一个文章标题列表的提取与铆点构造的js功能。主要应用于用markdown书写转换出的html代码。如果你还不知道markdown是啥，点这里学习一下。

如果你想不用模板搭建自己的博客，用markdown写作，又懒得调css样式，这是最省事的方案。

引用说明

css的引用方法：

首先在head中引用karticle.css。

<link rel="stylesheet" href="../src/static/css/karticle.css"/> 

之后你需要一个容器，宽度自定。这个容器决定了这篇文章在什么位置、多宽。之后在这个容器里建造一个名叫k-article的容器：

<div class="g-inner">
        <div class="k-article">
            //代码放在这里
        </div>
    </div>

就像上面的html一样，把文章的代码放在里面就可以了

js的引用方法：

在body最下面引用js文件即可。

<script src="../src/static/js/karticle.min.js"></script>

格式说明

css格式说明

上面的引用说明中已展示了h1、h2、h3、code、pre+code、p的格式。下面是其他的常用代码格式示例：

这是h4

这是h5

这是h6

这是a链接：这是a链接

这是比容器大的图片：

这是比容器小的图片：

这是列表：

• 列表1列表1列表1
• 列表2列表2
• 列表3

1. 列表1列表1列表1
2. 列表2列表2
3. 列表3

下面是blockquote引用的文字块：

当您在使用gulp构建您的项目时，您只需要 require Browsersync 模块, 利用API 并进行 选项配置。 以下是一些流行项目中常见的用例， 如 谷歌的网络入门套件 和其他项目。

新增：表格

js使用后效果展示

当在文章中使用h2标签时，目前会自动提取出h2的文字内容，并形成列表显示在左上角，自动添加锚点，点击列表相应的标题后会自动跳转到相应的h2。

这是华丽丽的分割线↑↑↑↑↑↑↑↑↑↑→<hr/>

声明

这是自己写着玩自己用的小玩意儿，够用就好，没有花太多的时间。如果有朋友觉的还不错，蛮好看，尽管拿去用就好。

使用less+gulp的方式开发，js是原生写的，感兴趣的朋友可以看一下代码。

觉得配色方面或者格式有不符合自己审美的朋友，可以给本项目一个分支，嫌麻烦的话直接自己覆盖就可以了。