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

七、制作图文综合版

阿弥陀佛大师已经做好了文字版,不过原文字版没有使用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 个赞