2019-8-31-jekyll-在博客添加流程图
title | author | date | CreateTime | categories |
---|---|---|---|---|
jekyll 在博客添加流程图
|
lindexi
|
2019-08-31 16:55:59 +0800
|
2018-2-13 17:23:3 +0800
|
jekyll
|
本文告诉大家如何在博客使用流程图。
如果你使用的是我博客的模板,那么就可以直接使用我说的文件,如果是自己的主题,就需要在自己文件对应的地方加上代码。
在我的博客里,需要添加下面的js到博客,可以打开 js.html 添加下面的代码。如果是自己定义的主题,需要在博客可以访问的地方添加下面的代码
<script src="//cdn.bootcss.com/raphael/2.2.0/raphael-min.js"></script>
<script src="//cdn.bootcss.com/flowchart/1.6.3/flowchart.js"></script>
<script>
function flow(name,f)
{
var chart = flowchart.parse(f);
chart.drawSVG(name,
{
'x': 30,
'y': 50,
'line-width': 3,
'maxWidth': 3,//ensures the flowcharts fits within a certian width
'line-length': 50,
'text-margin': 10,
'font-size': 14,
'font': 'normal',
'font-family': 'Helvetica',
'font-weight': 'normal',
'font-color': 'black',
'line-color': 'black',
'element-color': 'black',
'fill': 'white',
'yes-text': 'yes',
'no-text': 'no',
'arrow-end': 'block',
'scale': 1,
'symbols': {
'start': {
'font-color': 'red',
'element-color': 'green',
'fill': 'yellow'
},
'end':{
'class': 'end-element'
}
},
'flowstate' : {
'past' : { 'fill' : '#CCCCCC', 'font-size' : 12},
'current' : {'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold'},
'future' : { 'fill' : '#FFFF99'},
'request' : { 'fill' : 'blue'},
'invalid': {'fill' : '#444444'},
'approved' : { 'fill' : '#58C4A3', 'font-size' : 12, 'yes-text' : 'APPROVED', 'no-text' : 'n/a' },
'rejected' : { 'fill' : '#C45879', 'font-size' : 12, 'yes-text' : 'n/a', 'no-text' : 'REJECTED' }
}
});
}
window.onload = function ()
{
var cd = document.getElementsByClassName("flow");
for (var i = 0; i < cd.length; i++)
{
var t = cd[i].getElementsByClassName("flowcode")[0].value;
var canvas = "canvas" + i;
cd[i].innerHTML = "<div id=\"" + canvas + "\"></div>"
flow(canvas, t);
}
}
</script>
然后就可以在博客使用流程图啦。
流程图使用的使用需要先定义,然后使用->
表示连接
可以使用的定义有下面几个
- start 开始
- end 结束
- operation 方法
- subroutine 子程序
- condition 条件
- inputoutput 输入
使用流程图和使用代码一样,需要使用<div class="flow">
放在一个地方,然后写 flow
请看下面代码
<div class="flow">
<textarea class="flowcode"> </textarea>
</div>
例如写一个简单的流程,注意把前面的空格删掉
<div class="flow">
<textarea class="flowcode">
st=>start: Start
e=>end
ldata=>operation: 进入csdn st->ldata->e
</textarea>
</div>
st=>start: Start
e=>end
ldata=>operation: 进入csdn
st->ldata->e
</textarea>
condition
条件需要添加是否条件,例如下面的代码
<div class="flow">
<textarea class="flowcode">
st=>start: Start
e=>end
ldata=>operation: 进入csdn
c=>condition: 是否进入lindexi_gd
l=>operation: 访问
st->ldata->c
c(yes)->l->e
c(no)->e
</textarea>
</div>
必须删除空格才可以使用代码
st=>start: Start
e=>end
ldata=>operation: 进入csdn
c=>condition: 是否进入lindexi_gd
l=>operation: 访问
st->ldata->c
c(yes)->l->e
c(no)->e
</textarea>
2019-8-31-jekyll-在博客添加流程图的更多相关文章
- jekyll 在博客添加流程图
本文告诉大家如何在博客使用流程图. 如果你使用的是我博客的模板,那么就可以直接使用我说的文件,如果是自己的主题,就需要在自己文件对应的地方加上代码. 在我的博客里,需要添加下面的js到博客,可以打开 ...
- 给Jekyll静态博客添加ScrollSpy博文大纲目录
目录 内置TOC 添加ScrollSpy博文menu Scrollnav.js 使用方法❤ 最近又双叒把博客模板换成了Jekyll,Jekyll无论上手难度和修改难度都是目前所见流行模板中最低的(以无 ...
- Jekyll博客添加Valine评论
Jekyll博客添加Valine评论 关于github搭建jekyl博客,在这里不做过多描述,详情参考: 百度搜索关键字:github搭建jekyll博客 官网:https://www.jekyll. ...
- 给jekyll博客添加搜索功能
使用SWIFTYPE为jekyll博客添加搜索引擎 步骤 1.首先去swiftype注册一个账号 2.接着添加自己想要配置的网站地址并为新设定的引擎添加一个名字(非会员只能设置一个引擎). 3.收到验 ...
- 给jekyll博客添加天气插件
layout: post title: 给博客添加天气插件 date: 2020-04-26 author: Dapenson header-img: img/post-bg-debug.png ca ...
- github page+jekyll搭博客初体验
div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 0 10px; padding ...
- 为你的WordPress博客添加CSS3炫酷读者墙
为你的WordPress博客添加CSS3炫酷读者墙,也就是把你文章的评论最活跃的读者显示在单独的一个页面,先看看效果吧: 1.复制主题的page.php,另存为readerwall.php,然后在其顶 ...
- 基于Jekyll的博客模板
代码地址如下:http://www.demodashi.com/demo/13147.html 效果 环境配置 环境 Windows 10 Git Bash 安装ruby 下载rubyinstalle ...
- 【干货】2个小时教你hexo博客添加评论、打赏、RSS等功能 (转)
备注:该教程基于Hexo 2.x版本,目前Hexo是3.x版本,照本教程实现有可能会出现404错误,笔者目前还未找时间去解决,待笔者找时间解决该问题后,再写一篇该问题的解决教程,给各位读者带来困扰,还 ...
随机推荐
- Qt: error lnk1158 无法运行rc.exe
解决办法:(依据自己的环境而定) 将C:\Program Files (x86)\Windows Kits\\bin\10.0.15063.0\x64 目录下的rc.exe 和rcdll.dll 复制 ...
- 【JZOJ3214】【SDOI2013】方程
╰( ̄▽ ̄)╭ 给定方程 X1+X 2+-+Xn=m 我们对第 1.. n1 个变量 进行一些限制 : X1≤A1 X2≤A2 - Xn1 ≤An1 我们对第 n1+1.. n1+1.. n1+ n2 ...
- 大数据ETL详解
ETL是BI项目最重要的一个环节,通常情况下ETL会花掉整个项目的1/3的时间,ETL设计的好坏直接关接到BI项目的成败.ETL也是一个长期的过程,只有不断的发现问题并解决问题,才能使ETL运行效率更 ...
- 掀开SQL的神秘面纱,将优化进行到底
掀开SQL的神秘面纱,将优化进行到底 有这样一条奇怪的SQL,返回结果不足10行,逻辑读达到1.2w,存在索引却走多次全表扫描,如何揭开它神秘的面纱拯救系统性能,答案在这里,你不可错过! 本文来自上周 ...
- 【JZOJ4787】【NOIP2016提高A组模拟9.17】数格子
题目描述 输入 输出 样例输入 1 10000 3 10000 5 10000 0 0 样例输出 1 11 95 数据范围 每个测试点数据组数不超过10组 解法 状态压缩动态规划. 设f[i][j]表 ...
- @spoj - ADAMOLD@ Ada and Mold
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个长度为 N 的序列 A,将其划分成 K + 1 段,划分 ...
- Hdu 1800 字符串hash
题目链接 题意: 给出n(n<=3000)个字符串(长度<30,数字组成,肯能存在前导0), 问该序列最少可以分成多少个单调序列.可以转化成求相同字符串的个数的最大值 附上代码: /*** ...
- 【Mysql的那些事】Django数据库配置
1:安装与配置 1:pip install PyMySQL(或者直接使用Pycharm的setting,点击添加PyMySQL) 2:在Django的工程同名子目录的__init__.py文件中添加如 ...
- pytorch利用多个GPU并行计算多gpu
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/Answer3664/article/de ...
- hdu1503 LCS
题意:如果有相同的字母,这些字母只输出一次.其余的都输出. 先做一次LCS,标记相同的字母,然后回溯输出. #include<stdio.h> #include<string.h&g ...