词典制作:从一个简单的图片词典开始

没有高级版吧。这是官网的版本比较。
比较桌面安装版,桌面便携版和商店应用版 – EmEditor (文本编辑器)

3 Likes

你没有用shaoshi说的注册码吗?
前几天有网友告诉我付费版功能多一点,比如提取功能

2 Likes

用了。羞愧,一直用的PJ版 :joy:

2 Likes

我也要学,我也要用,好用了再考虑捐赠购买。
但是我先去跑几圈,减肥比较重要。

自从学会了制作mdx,我已经看完了民法典啦,正在看民法典学习读本。刷起来贼欢快

1 Like

Niubility!

1 Like

六、制作成模拟单栏

Mastameta 大佬的模拟单栏真好用,我想要,我想要……

1.图像词头

  1. 同“二、加入上下页导航1.1”,在Em中制作成三列页码。

  2. 查找:

^(\d{3})\t(\d{3})\t(\d{3})\n

替换为:

GHMY\1\n<link href="古汉名言.css" rel="stylesheet" /><div><book><c1><img src="GHMY\1.png"></c1><c2><img src="GHMY\1.png"></c2></book><zm><a href="entry://GHMY\2">上一页</a> <a href="entry://GHMY\3">下一页</a></zm>\n</>\n

2.文字词头

同“二、加入上下页导航2.”。
或,
同“五、制作成“伪图文版2.”。

合并两个文本文件,打包,完成。

3.样式表

hw {display:inline-block; font-size:24px; color:#000064; font-weight:400;}
hw:before {content:"【"; color:#800000; font-size:.9em; }
hw:after {content:"】"; color:#800000; font-size:.9em; }
a:link {color:currentColor; text-decoration:none;}
a:visited {color:currentColor}
a:link:hover {color:#b30015}

book {display:flex; flex-flow:column nowrap; align-items:center; position:relative;
	border-radius:.4em; border:1px solid #f5ece0; background-color:#fcf6ee;
	width:98%; max-width:100%; padding:.3em .3em .3em .3em; overflow:hidden}
book img {width:100%; height:auto; }
c1, c2 {display:block; width:100%; overflow:hidden}
c2 {display:none}

@media (max-width:51em) {
	book {max-width:25em; padding:.5em .2em; margin:.3em 0 0 0; clear:right}
	c1, c2 {width:99.5%; display:inline-block; padding:0 0 .5em}
	book img {width:200%}
	c1>img {margin:-12% 0 -3% .5%}
	c2>img {margin:-12% 0 0 -100.5%}
}

zm {display:block; text-align:center;}

保存到文本文件中,并重命名为“古汉名言.css”。

4.实现原理

在一个页面中插入两张同样的图片。
窗口足够宽时,按窗口宽度显示整页图像,并隐藏后一张图。窗口足够窄时,则将图片宽度设置成窗口宽度的两倍,前一张图让其显示左半侧,后一张图让其显示右半侧。
有的词典软件貌似因不支持图片放大的操作,而无法使用‘模拟单栏’。

6 Likes

谢谢制作教程。请问为何图像与文字的词头要分开呢?这能起什么作用呢?似乎不分开也可以?

习惯?便于控制?主次分明?其实我也是学习大佬的做法 :grin:
可以不分开吗?当然可以!你的词典你做主。

七、制作图文综合版

阿弥陀佛大师已经做好了文字版,不过原文字版没有使用css。
我已将其整理成css版,只要和前面制作的图像版合并起来就成了“图文综合版”啦。

古汉名言(css)_源文件本坛下载。所有原材料又在百度盘存了一份。

细细察看文字版,发现词条内未注明页码,这就需要先给文字版加上页码。我们先将页码部分做好,再来给文字版添加页码。
前面“伪图文版”中最后显示出来的页码,形如:“第001页”。“第1页”应该才是我们平常习惯用的,所以这里需调整一下。

1. 处理页码

  1. 打开Excel索引表,选中B列复制到C列。选中C列→设置单元格格式→自定义:000
  2. 全选复制到Em中,查找:
^(.+)\t(.+)\t(.+)\n

替换为:

\1\t<pg><a href="entry://GHMY\3">第\2页</a></pg>\n
  1. 复制回 Excel ,另存为页码表。

2. 插入页码

  1. 先将文字版词条处理成单行:第一行前添加一行 </> ,查找 </>\n(.*)\n 替换为 </>\1\t
    删除所有 </> 后复制到 Excel 中。全选后按字母排序。在A列左侧插入两列。

  2. 将 Excel 页码表也全选后按字母排序。复制A、B列,粘贴到前一个 Excel 表的前两列中。

  3. 在合并的 Excel 表的E1单元格中输入 =A1=C1
    复制E1单元格,滚动条拉到底,选中E1~E3529,粘贴。
    注意:不要直接选中E列后粘贴。

  4. 查找 FALSE ,参数如图。
    image
    会发现原文字版多了一条,以及几条符号有误,总体来说比较顺利。
    修改文字到查找不到为止。
    清除E列,填入 </> 。删除A列。

  5. 复制回 Em。
    查找:</hw> 替换为:</hw>\t
    将页码列移动到 </hw> 所在列之后。
    查找:\t<link 替换为:\n<link
    查找:\t</> 替换为:\n</>
    删除其余 \t

3. 合并源文本

将“模拟单栏”的图像词头复制到第2步的文本文件中。打包,完成。

4. 样式表

将以下代码添加到压缩包中的 css 尾部。

book {display:flex; flex-flow:column nowrap; align-items:center; position:relative;
	border-radius:.4em; border:1px solid #f5ece0; background-color:#fcf6ee;
	width:98%; max-width:100%; padding:.3em .3em .3em .3em; overflow:hidden}
book img {width:100%; height:auto; }
c1, c2 {display:block; width:100%; overflow:hidden}
c2 {display:none}

@media (max-width:51em) {
	book {max-width:25em; padding:.5em .2em; margin:.3em 0 0 0; clear:right}
	c1, c2 {width:99.5%; display:inline-block; padding:0 0 .5em}
	book img {width:200%}
	c1>img {margin:-12% 0 -3% .5%}
	c2>img {margin:-12% 0 0 -100.5%}
}
zm {display:block; text-align:center; margin-top:.5em}

5. 马后炮

阿弥陀佛大师的文字版和 Excel 索引表中都漏了4条。其主题帖的10楼发了已修补的mdx,可对照它将漏的词头插入索引表中。
:face_with_monocle:

5 Likes

@alexpeng 兄,整理的相當棒耶,CSS的使用,在下都是亂套,沒仔細的研究過,請教老兄,hw:before ,hw:after ,hw 是什麼標簽,另外此 before ,after 可否套用於 div 的標簽
剛搞懂,不好意思 :sweat_smile:

1 Like

hw 是自定义标签,你可以改成其它的。
可以啊,css 的问题可以这样查找“css before”。

1 Like

Thanks a lot
謝謝老兄,終於搞懂了!竟然連 class 也能套用,讚!… :sweat_smile:

1 Like

高级!这是什么软件?

不是軟件,是w3school 網站

css,我幾乎都從w3school學來的。簡潔好用。

我個人不用class了。可以完全換成 attribute 或特製標籤。如果數據都一堆 class 和 span, 你寫正則會很辛苦。像 span, div,我限制於固定的層次,最好避開全面施用。

@匿名1303
before, after 可以完全替代介面重複的文字。好處是可以通過css改變內容,而不用編輯mdx。這樣數據保持瘦削而不膨脹。瘦削就更方便使用正則、手工編輯數據,不僅是體積問題。

@Mastameta 兄,不很清楚 attribute 怎麼用,before ,after 也是剛看到 @alexpeng 那個有點好奇後才去弄懂,以前沒注意過怎麼用,css 我沒很系統的去理解,大都是看效果後,抄抄改改 :sweat_smile: 亂套用
您說的固定層次,個人覺的很有必要,因若太多層,蠻複雜的,正則也不是很精通,也很難處理
剛搞懂那個 before ,after 就可以改善我的一個div 的結構,也省下用正則再去處理,您說的 一堆 class ,span,div,也是我目前的問題,實在沒什概念簡化


這是用 mdictool 合并的,但感覺不很適合,因最上面那個eye 1-12 我想替代成括號內字根,但有困難,正則可能沒法處理

1 Like

關於削減,比方說:
<span class="headword">
不如用特製標籤:
<hw>

如果這個 <hw> 需要加上類似 class 的分辨,就加個 attribute:
<hw phrase>
<hw idiom>
這比 class="phrase" 省略。在CSS裡,用 hw[phrase] 來選上。before 就是 hw[phrase]::before

用正則時,這標籤的閉合是較獨特的 </hw>,而不是氾濫的</span>。氾濫,用正則較麻煩,較容易出錯。

這個 attribute 還有別的玩法,現在出門了,下次再聊。

1 Like

哇!厲害了,好像有看過這樣的處理,但沒去理解過用法,也不會用,就一直渾渾噩噩的亂套亂用 <span class="headword">這樣的方式, 謝謝@Mastameta 兄,指點迷津提供好的處理方法 :grinning:

aabbcc
aa, bb, cc, aabbcc

@Mastameta @alexpeng 兄,請教一下,困擾蠻久的一個問題,若在aabbcc 單字中,用 a href 的轉跳的方式,該如何才能,點 aa,bb,cc,aabbcc 各自轉跳,aa,bb,cc,是沒有問題的但若要 aabbcc 也可以轉跳,則aa,bb,cc會卡住也是跳往 aabbcc

<a href="entry://aabbcc"><a href="entry://aa">aa</a><a href="entry://bb">bb</a><a href="entry://cc">cc</a></a>