jemdoc是什么?
jemdoc是一种用于创建网站的基于文本的轻量标记语言。它需要一个用jemdoc标记编写的文本文件,一个可选的配置文件和一个可选的菜单文件。(类似markdown)jemdoc的灵感来自于AsciiDoc,这是一个文本文件格式。AsciiDoc很棒,AsciiDoc的许多想法都复制到了jemdoc中。主要区别在于jemdoc更简单(您可以说故意功能较差)并且语法更加一致。同事jemdoc的网页严峻简洁风格也表明其非常适合充当学术简历。
环境 jemdoc 使用的是python2 环境,而不能是python3 .如果没有安装python2 可以使用虚拟环境安装python2 .如果电脑中安装了python3 ,那么可以用虚拟环境来安装python2 .
前置准备 安装virtualenv
创建虚拟环境 创建文件夹
1 mkdir website && cd website
创建虚拟环境
1 virtualenv venv --python=python2.5
激活虚拟环境 windows 环境
Linux/macOS
激活结果
前面就有(venv) 这个了。
QuickStart 环境准备
去jemdoc官网 下载jemdoc.py。对的,你没看错,就只要一个.py代码文件就行了。不过建议顺带下载使用官方的示例CSS文件:jemdoc.css 。
下载完毕之后,如下图所示:
新建example.jemdoc文件,(建议和jemdoc.py同级目录,比较好写命令)在example.jemdoc文件中可以尝试复制下官方的example的内容:
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 [https://jemnz.com/ Jacob Mattingley] ([www@jemnz.com]) If the first line of the file starts with +\# jemdoc+, special functions like [menu.html menus] will be used. == Example Here are some *text* /features/. I could [http://cvxmod.net/ link somewhere] or insert a raw link to another page like [download.html]. I could use +monospace+, too. I could write special characters like \#, \$ and \+ by just using a backslash (\\) in front of those characters. Or automatically detect an [www@jemnz.com email address]. ~~~ Save the file as +index.jemdoc+, say, and simply call +jemdoc index+ (after [download.html downloading jemdoc], of course). ~~~ == Next bit, next heading level two === Getting into level three now Why not use a list - to explain the way you do lists?- to demonstrate how a line\n break might work?Or perhaps a . Multilevel .. Numbered list .. Is more . Useful? : {Definition} lists, especially when there are many definitions : {Can be useful} for explaining things == Finally, a few more blocks This `section' features "smart quotes". ~~~ {Simple block} This is a simple text block, with a title. Notice how the previous line has only one set of braces (\{\}). ~~~ ~~~ {Interactive Python listing}{pyint} >>> print 'Interactive Python code.' 'Interactive Python code.' ~~~ ~~~ {}{} Plain code block with no title. ~~~ You might need 2--3 different-sized dashes---they can be useful. Now we're done!
生成网页
1 python jemdoc.py example.jemdoc
然后就会在目录下生成index.html文件,打开页面如下:
Jemdoc语法 可以结合官方文档和本篇教程一起学习,官方文档:http://jemdoc.jaboc.net/cheatsheet.html
新建cheatsheet.jemdoc,在里面使用教程上的语法
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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 /斜字体/ *加粗* +等宽(li和cs等宽)+ +等宽(cs和li等宽)+ 不等宽(li占的比cs小哦) 不等宽(cs占的比li大哦) 连字符-连字符 破折号1--破折号1 破折号2---破折号2 省略号...省略号 不间断空格~不间断空格(最重要的作用就是换行时不被打断) # 注释?? \C is © \R is ® \M is · “单引号文字”写为“单引号文字” “双引号文字”写为“双引号文字” jemdoc's的撇号jemdoc's的输入自动转换 \n 强制手动换行 段落由空白行分隔(即空一行才可以另起一段)下面这句话 (我是第二行了的)是会在同一行/段的哦 LaTeX方程(暂不能用哦) #s (and only #s) must be quoted in URLs = 标题一 == 标题二 === 标题三 ==== 标题四 [https://www.hojun.cn/ 这是超链接写法] 邮箱哦:([hojun@qq.com]) 这个会跳转到当前目录的[other.html],和超链接类似。 这是无序列表: - 无序列表 -- 二级无序列表 --- 三级无序列表 - 无序列表 这是有序列表: . level1 .. level2 ... level3 . level1 :{定义解释块}balabala,这里解释,比如下面例子 :{233}233是一个网络用语,大致意思就是啊哈哈,非常好笑的意思。233来源于猫扑表情第233号,是一张捶地大笑的表情,因此不少网友就喜爱在贴吧和论坛发帖的时候加上一句233,用来表示哈哈大笑的意思。 ~~~ {简单块,这里是标题} This is a simple text block, with a title. Notice how the previous line has only one set of braces (\{\}). ~~~ ~~~ {这个是代码块标题,后面那个是代码高亮,好像仅支持py}{python} def putbsbs(l): for i in range(len(l)): l[i] = '\\b' + l[i] + '\\b' return l ~~~ ~~~ {}{} 啥都不写就是不要标题~ ~~~ {{<h2>}}这是用inline html escaping包裹的h2,语法结束记的要换行,不然有bug{{</h2>}} ~~~ {}{raw} 要写html代码记的用raw,而不是楼上的: <form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form> ~~~ #include{include.jemdoc} #includeraw{include.html} ~~~ {}{img_left}{https://jemnz.com/jacobm2.png}{Jacob Mattingley}{120px}{160px}{https://www.baidu.com} 加图片 {}{img_left}{图片url}{描述图像}{宽}{高}{点击图片跳转的链接} (后面三个参数可以省略) {}{img_left}{图片url}{描述图像} ~~~
高级用法 添加菜单 jemdoc只适用于做页面?NONONO,jemdoc的官网就是运用添加菜单功能实现的。 首先,你在新建一个菜单文件MENU,内容如下:
1 2 3 4 5 6 7 8 jemdoc学习 home [index.html] cheatsheet [cheatsheet.html] example [example.html] jemdoc学习二 testgbk [testgbk.html] include [include.html]
然后分别在index.jemdoc、cheatsheet.jemdoc等以上MENU包含的jemdoc中首行加入:
1 2 3 4 5 6 7 8 //index.jemdoc 加这个 # jemdoc: menu{MENU}{index.html} //cheatsheet.jemdoc 加这个 # jemdoc: menu{MENU}{cheatsheet.html} //其他雷同 ......
在全部重新生成一遍
modeline 模式行设置 jemdoc的modeline要在首行(或头部配置),如:
1 2 3 4 5 6 # jemdoc: menu{MENU}{cheatsheet.html} // 或 # jemdoc: addcss{jemdoc.css} # jemdoc: addjs{jemdoc.js}
addcss&js 上图前面的就是上一步说的添加menu,而后面的则是引入css和js。 试这在录下新建个js文件夹,在下面新建jemdoc.js,内容如下:
1 console.log("this is ./js/jemdoc.js")
然后新建modeline.jemdoc中引入,注意这里有个坑,我们试着在头部引入:
1 2 3 4 # jemdoc: addcss{jemdo} # jemdoc: addcss{jemdo.css} # jemdoc: addjs{./js/jemdoc} # jemdoc: addjs{./js/jemdoc.js}
生成的代码如下:(解释就写在备注那里)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 // 这个是jemdoc默认会生成的,自动引入jemdoc.css <link rel="stylesheet" href="jemdoc.css" type="text/css" /> // 这个是addcss{jemdo}生成的,可以看到jemdoc自动给加了.css后缀 <link rel="stylesheet" href="jemdo.css" type="text/css" /> // 这个是addcss{jemdo.css}生成的,可以看到jemdoc没给加后缀 <link rel="stylesheet" href="jemdo.css" type="text/css" /> // 这个是addjs{./js/jemdoc}生成的,可以看到jemdoc自动给加了.js后缀 <script src="./js/jemdoc.js" type="text/javascript"></script> // 这个是addjs{./js/jemdoc.js}生成的,可以看到jemdoc多加了个.js后缀,导至找不到js. <script src="./js/jemdoc.js.js" type="text/javascript"></script>
综上所述,在使用addcss和addjs模式行的时候都不要加后缀,jemdoc会自动生成。
其他 1 2 3 4 5 6 7 8 // 自定义页面titile # jemdoc: title{自定义titile} // 清除jemdoc自动包含的jemdoc.css # jemdoc: nodefaultcss // 添加Google Analytics(分析)支持 analytics {ANALYTICS KEY}
1 2 3 4 5 6 7 8 9 10 11 // 不要生成时间 # jemdoc: notime // 不要生成日期 # jemdoc: nodate // 不要生成时指向jemdoc的超链接 # jemdoc: showsource // 不要生成footer # jemdoc: nofooter
在jemdoc中首行加入:
方程式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 // 禁用LaTeX方程式支持。 # jemdoc: noeqs // 调整方程式的大小(默认值为130) # jemdoc: eqsize {SIZE} // 调整方程式目录(默认eqs)。 # jemdoc: noeqs // 禁用方程式缓存。 # jemdoc: noeqs // 在编译方程式时包括对LATEX_PACKAGE_NAME的支持 # jemdoc: addpackage {LATEX_PACKAGE_NAME}
html成生模版更改 可以修改jemdoc的生成规则,在cmd中输入。
1 python jemdoc.py --show-config
或者在jemdoc.py文件的133-207行可以看到对应的html配置。 首先,找出需要使用来更改哪个块,这里拿[footerend]举例。创建一个新文件myfooterend.conf,一开始内容为原来模版的:
1 2 3 [footerend] </div> </div>
然后我们总要搞点小动作:
1 2 3 4 [footerend] <p style="color: red;">这是我改的footerend,就是为了说这句话2333~</p> </div> </div>
然后新建个myfooter.jemdoc,在用以下命令生成它:
1 python2 jemdoc.py -c myfooterend.conf myfooter.jemdoc
使用clustrmaps 该网站提供访问统计功能,独特之处是以全球地图的形式标明访问者全球分布情况 。该站点承诺无 cookie、无间谍软件。网址提供了生成访问者地址分布图的代码,可以嵌入到网站或博客中,来显示来自世界各地访问者的实时地图,有助于发展您隐藏的兴趣社区。最重要的是,这个功能是免费 的,能够满足个人网站的需求,如下图所示。可以用该网站来记录个人简历中的一些信息:
每天的访问量;
每一个访问的人的IP相关信息都会记录下来,我们就可以查看;
。。。
网站地址:clustrmaps.com
配置 clustrmaps 网站注册后,访问 Enter your website address 添加自己的网站地址,选择免费的服务。将上面的github pages站点地址放置于内
选择自己喜欢的插件格式,现在 Hexo 的 Next 两种主题都是支持的,但是自己比较喜欢 Map widget 的主题。
点击选择后,拷贝网站出现的脚本 javascript 代码,粘贴到特定位置
参考文献