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
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
我搭建了自己的博客 https://blog.lindexi.com/ 欢迎大家访问,里面有很多新的博客。只有在我看到博客写成熟之后才会放在csdn或博客园,但是一旦发布了就不再更新
如果在博客看到有任何不懂的,欢迎交流,我搭建了 dotnet 职业技术学院 欢迎大家加入
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接:http://blog.csdn.net/lindexi_gd ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系。
jekyll 在博客添加流程图的更多相关文章
- 2019-8-31-jekyll-在博客添加流程图
title author date CreateTime categories jekyll 在博客添加流程图 lindexi 2019-08-31 16:55:59 +0800 2018-2-13 ...
- 给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 ...
- 基于Jekyll的博客模板
代码地址如下:http://www.demodashi.com/demo/13147.html 效果 环境配置 环境 Windows 10 Git Bash 安装ruby 下载rubyinstalle ...
- 【干货】2个小时教你hexo博客添加评论、打赏、RSS等功能 (转)
备注:该教程基于Hexo 2.x版本,目前Hexo是3.x版本,照本教程实现有可能会出现404错误,笔者目前还未找时间去解决,待笔者找时间解决该问题后,再写一篇该问题的解决教程,给各位读者带来困扰,还 ...
- 给博客添加rss订阅
如果是自己搭建博客,有一个问题是如何写一篇新的文章就可以告诉读者,你写了一篇新的?一个简单方法是使用 rss ,RSS订阅是站点用来和其他站点之间共享内容的一种简易方式,即Really Simple ...
随机推荐
- SQLAlchemy中filter和filer_by的区别
filter: session.query(MyClass).filter(MyClass.name == 'some name') filter_by: session.query(MyClass) ...
- Android实战:手把手实现“捧腹网”APP(一)-----捧腹网网页分析、数据获取
Android实战:手把手实现"捧腹网"APP(一)-–捧腹网网页分析.数据获取 Android实战:手把手实现"捧腹网"APP(二)-–捧腹APP原型设计.实 ...
- sql表连接 —— join
一.内连接 —— INNER JOIN 内连接是最常见的一种连接,只连接匹配的行. 表1: 表2: 执行查询: select StudentId as 学生编号,StudentName as 姓名,G ...
- Atcoder Tenka1 Programmer Contest C C - 4/N
http://tenka1-2017.contest.atcoder.jp/tasks/tenka1_2017_c 我怀疑我是不是智障.... 本来一直的想法是能不能构造出答案,把N按奇偶分,偶数好办 ...
- 一 linux安装python3
参考 https://www.cnblogs.com/pyyu/p/7402145.html?tdsourcetag=s_pcqq_aiomsg 1 下载 网址:https://www.python. ...
- CSS+div总结 标签: css 2016-01-17 11:35 926人阅读 评论(31) 收藏
根据学习计划,将视频进行了学习,之前就知道css是基础,然后一致认为既然是基础,应该比较简陋吧,结果经过学习才发现,css的效果也是很炫的啊,然后学习完了视频,自己又找了一些教程.下面就简单介绍一下我 ...
- shell爬虫
#!/bin/bash curl_str='curl -x "http://http-pro.abuyun.com:9010" --proxy-basic --proxy-user ...
- sspanel 常用审计规则
规则 禁用 BT 防止版权争议 BitTorrent protocol 数据包明文匹配 禁止 百度高精度定位 防止IP与客户端地理位置被记录 (api|ps|sv|offnavi|newvector| ...
- uva 11375 Matches (递推)
http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...
- hdu 3234 Exclusive-OR (并查集)
Problem - 3234 题意不难理解,就是给出一些断言,以及一些查询,回答查询或者在找到断言矛盾以后沉默不做任何事. 这题其实就是一个并查集的距离存储问题,只要记录并查集元素的相对值以及绝对值就 ...