试用jemdoc

jemdoc是什么?

jemdoc是一种用于创建网站的基于文本的轻量标记语言。它需要一个用jemdoc标记编写的文本文件,一个可选的配置文件和一个可选的菜单文件。(类似markdown)jemdoc的灵感来自于AsciiDoc,这是一个文本文件格式。AsciiDoc很棒,AsciiDoc的许多想法都复制到了jemdoc中。主要区别在于jemdoc更简单(您可以说故意功能较差)并且语法更加一致。同事jemdoc的网页严峻简洁风格也表明其非常适合充当学术简历。

环境

jemdoc使用的是python2环境,而不能是python3.如果没有安装python2 可以使用虚拟环境安装python2.如果电脑中安装了python3,那么可以用虚拟环境来安装python2.

前置准备

安装virtualenv

1
pip install virtualenv

创建虚拟环境

创建文件夹

1
mkdir website && cd website

创建虚拟环境

1
virtualenv venv --python=python2.5

激活虚拟环境

windows 环境

1
venv\Scripts\activate

Linux/macOS

1
. venv/bin/activate

激活结果

1
(venv) \>

前面就有(venv) 这个了。

QuickStart

环境准备

jemdoc官网下载jemdoc.py。对的,你没看错,就只要一个.py代码文件就行了。不过建议顺带下载使用官方的示例CSS文件:jemdoc.css

下载完毕之后,如下图所示:

image-20211120022626280

新建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文件,打开页面如下:

image-20211120023012306

image-20211120023055071

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}

//其他雷同
......

在全部重新生成一遍

image-20211120023609340

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}

底部footer配置

1
2
3
4
5
6
7
8
9
10
11
// 不要生成时间
# jemdoc: notime

// 不要生成日期
# jemdoc: nodate

// 不要生成时指向jemdoc的超链接
# jemdoc: showsource

// 不要生成footer
# jemdoc: nofooter

在jemdoc中首行加入:

1
# jemdoc: nofooter

方程式

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

image-20211120024351543

使用clustrmaps

该网站提供访问统计功能,独特之处是以全球地图的形式标明访问者全球分布情况。该站点承诺无 cookie、无间谍软件。网址提供了生成访问者地址分布图的代码,可以嵌入到网站或博客中,来显示来自世界各地访问者的实时地图,有助于发展您隐藏的兴趣社区。最重要的是,这个功能是免费的,能够满足个人网站的需求,如下图所示。可以用该网站来记录个人简历中的一些信息:

  • 每天的访问量;
  • 每一个访问的人的IP相关信息都会记录下来,我们就可以查看;
  • 。。。

网站地址:clustrmaps.com

配置 clustrmaps

网站注册后,访问 Enter your website address 添加自己的网站地址,选择免费的服务。将上面的github pages站点地址放置于内

image-20211120024918799

选择自己喜欢的插件格式,现在 Hexo 的 Next 两种主题都是支持的,但是自己比较喜欢 Map widget 的主题。

image-20211120025013604

点击选择后,拷贝网站出现的脚本 javascript代码,粘贴到特定位置

参考文献