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

**URL:** <https://forum.freemdict.com/t/topic/16539>\
**Category:** 技术交流与词典编修\
**Tags:** 新手指南\
**Created:** [2022 年10 月 25 日 10:56 UTC](https://forum.freemdict.com/t/topic/16539 "2022-10-25T10:56:28Z")\
**Posts on this page:** 20\
**Page:** 4

<div class="post-metadata">

作者： ![mdict6](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/m/8491ac/32.png) [@mdict6](https://forum.freemdict.com/u/mdict6)\
发布日期： [2022 年10 月 30 日 15:49 UTC](https://forum.freemdict.com/t/topic/16539/63 "2022-10-30T15:49:55Z")

</div>

![image](https://forumcdn.freemdict.com/uploads/default/original/3X/c/e/ceb9e82354ecc822ef7d98c182d890e3a18d050f.jpeg)

```auto
<head>
mark
{display:block
;background-color:#fff!important;}
mark>a{background-color:yellow;
}
</head>

<mark>
<a>a</a>
</mark>
<a>b</a>
<a>c</a>
<a>d</a>
<a>e</a>

```

---

<div class="post-metadata">

作者： ![fruition](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/fruition/32/51082_2.png) [@fruition](https://forum.freemdict.com/u/fruition)\
发布日期： [2022 年10 月 30 日 16:57 UTC](https://forum.freemdict.com/t/topic/16539/64 "2022-10-30T16:57:21Z")

</div>

![Screenshot from 2022-10-31 00-56-57](https://forumcdn.freemdict.com/uploads/default/original/3X/6/9/69a673bc969435ebcb1f4e76b5f6decd05eabe1f.png)  
謝謝 @mdict6 兄指點迷津，這招漂亮，可以精簡不少多余的標簽 😀

---

<div class="post-metadata">

作者： ![alexpeng](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/alexpeng/32/19592_2.png) [@alexpeng](https://forum.freemdict.com/u/alexpeng)\
发布日期： [2022 年10 月 31 日 00:08 UTC](https://forum.freemdict.com/t/topic/16539/65 "2022-10-31T00:08:04Z")

</div>

坛友的智慧实胜我百倍。

mark标签是否可以改成其它的呢，如 `<mk>` ？也许这样css中可以省一条背景色的设定。

---

<div class="post-metadata">

作者： ![random](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/random/32/19006_2.png) [@random](https://forum.freemdict.com/u/random)\
发布日期： [2022 年10 月 31 日 00:23 UTC](https://forum.freemdict.com/t/topic/16539/66 "2022-10-31T00:23:14Z")

</div>

display:inline-block; margin-top:.5em 放 mark {}里

---

<div class="post-metadata">

作者： ![mdict6](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/m/8491ac/32.png) [@mdict6](https://forum.freemdict.com/u/mdict6)\
发布日期： [2022 年10 月 31 日 00:53 UTC](https://forum.freemdict.com/t/topic/16539/67 "2022-10-31T00:53:39Z")

</div>

https://codepen.io/mdict/embed/preview/QWxjmPX?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=QWxjmPX

---

<div class="post-metadata">

作者： ![fruition](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/fruition/32/51082_2.png) [@fruition](https://forum.freemdict.com/u/fruition)\
发布日期： [2022 年10 月 31 日 05:00 UTC](https://forum.freemdict.com/t/topic/16539/69 "2022-10-31T05:00:33Z")

</div>

@alexpeng 兄，虛懷若谷，這帖很補，在下難得有些疑問得解，搞這麼多css都是別人的，然後就按那架構去弄，也很怕變動，因為稍有變動，可能調不了…，基本的可能還好，複雜點很難預測效果…調整還得對照 HTML 的架構，也常翻車，除非試到那個點上，否則很多都是糊弄過去…以至怎麼搞也是幾招套來套去，沒整體架構…有的看起來炫但大都是套好的花招照用…挖別人的套用… 😆

---

<div class="post-metadata">

作者： ![tianse](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/t/aeb1de/32.png) [@tianse](https://forum.freemdict.com/u/tianse)\
发布日期： [2023 年3 月 3 日 14:16 UTC](https://forum.freemdict.com/t/topic/16539/70 "2023-03-03T14:16:04Z")

</div>

谢谢！很好的教程！受教了！

---

<div class="post-metadata">

作者： ![Tay](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/t/ecb155/32.png) [@Tay](https://forum.freemdict.com/u/Tay)\
发布日期： [2023 年7 月 1 日 11:22 UTC](https://forum.freemdict.com/t/topic/16539/71 "2023-07-01T11:22:43Z")

</div>

大大您好，您的方法十分清晰，十分感谢您的分享！但是我按照您的方法用emeditor转换txt文件后只出现相应的mdd文件没有mdx文件，请问您知道如何解决吗？

---

<div class="post-metadata">

作者： ![alexpeng](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/alexpeng/32/19592_2.png) [@alexpeng](https://forum.freemdict.com/u/alexpeng)\
发布日期： [2023 年7 月 1 日 11:30 UTC](https://forum.freemdict.com/t/topic/16539/72 "2023-07-01T11:30:08Z")

</div>

很高兴能帮到你。请不要称呼“大大”，感谢您的迁就。

打包时 MdxBuilder 的截图发来看看。

---

<div class="post-metadata">

作者： ![Tay](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/t/ecb155/32.png) [@Tay](https://forum.freemdict.com/u/Tay)\
发布日期： [2023 年7 月 1 日 12:09 UTC](https://forum.freemdict.com/t/topic/16539/73 "2023-07-01T12:09:28Z")

</div>

谢谢您的回复，以下是您要求的截图

 ![image](https://forumcdn.freemdict.com/uploads/default/original/3X/b/f/bf766b2134cb942c57f4dbad11d66ac92144ac04.png)

---

<div class="post-metadata">

作者： ![alexpeng](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/alexpeng/32/19592_2.png) [@alexpeng](https://forum.freemdict.com/u/alexpeng)\
发布日期： [2023 年7 月 1 日 12:34 UTC](https://forum.freemdict.com/t/topic/16539/74 "2023-07-01T12:34:33Z")

</div>

可能是txt源文件有问题。把data文本框内容删掉再打包，看看有什么出错信息。或者试着查找下有没有空行 `\n\n` 。  
或者源文件发来我看看。

---

<div class="post-metadata">

作者： ![Tay](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/t/ecb155/32.png) [@Tay](https://forum.freemdict.com/u/Tay)\
发布日期： [2023 年7 月 1 日 13:00 UTC](https://forum.freemdict.com/t/topic/16539/75 "2023-07-01T13:00:32Z")

</div>

[现代汉语词典0001.txt](https://forum.freemdict.com/uploads/short-url/1cxtZwYxlg9RPCOqbrddXt43cix.txt) (2.3 KB)  
我采用的是您提供的“不使用正则”的方法，之前替换的时候/n前没有空格，这次修改之后mdxbuilder输出的仍然只有mdd文件。

 ![image](https://forumcdn.freemdict.com/uploads/default/original/3X/3/4/3426340bd02682e96722be80171b081aa5f27639.png)  
 ![image](https://forumcdn.freemdict.com/uploads/default/original/3X/5/b/5b3ceab1f5a0a4d29850675b29134f38a6d6284b.png)  
劳您查看了，感谢！

---

<div class="post-metadata">

作者： ![alexpeng](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/alexpeng/32/19592_2.png) [@alexpeng](https://forum.freemdict.com/u/alexpeng)\
发布日期： [2023 年7 月 1 日 13:09 UTC](https://forum.freemdict.com/t/topic/16539/76 "2023-07-01T13:09:54Z")

</div>

源文件格式不对，我给你改了，再试试。  
`\n` 指的是换行，不是在源文件中写上\n这样的字符，`\t` 是制表符。  
[现代汉语词典0001.txt](https://forum.freemdict.com/uploads/short-url/6jTuwOA4n2Nh4Uc4KfQgPRxs9eU.txt) (2.0 KB)

哦，还有你的图像宽度不对，越来越大了……

---

<div class="post-metadata">

作者： ![Tay](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/t/ecb155/32.png) [@Tay](https://forum.freemdict.com/u/Tay)\
发布日期： [2023 年7 月 1 日 13:16 UTC](https://forum.freemdict.com/t/topic/16539/77 "2023-07-01T13:16:11Z")

</div>

好的，非常感谢您的帮助！！！被您发现小白属性了 😁  
祝您生活愉快，顺遂福绥！ 🙏

---

<div class="post-metadata">

作者： ![Tay](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/t/ecb155/32.png) [@Tay](https://forum.freemdict.com/u/Tay)\
发布日期： [2023 年7 月 1 日 14:53 UTC](https://forum.freemdict.com/t/topic/16539/78 "2023-07-01T14:53:53Z")

</div>

不好意思，又来劳烦您了 😭  
感谢您之前的修改，我成功得到了mdx和mdd文件，并将其复制粘贴到Mdict的doc文件中。

 ![image](https://forumcdn.freemdict.com/uploads/default/original/3X/e/5/e57b1212d01ca8895badb5e1f83136aa9499c191.png)  
但是导入词库后发现体现不了图片。  
 ![image](https://forumcdn.freemdict.com/uploads/default/original/3X/9/0/90877c5b2cd6112d9f6c41de93fcbdac4564e90c.png)  
另外，我用MdxExport解开mdd文件得到的是我打算引用的图片，是否能反向证明mdd文件是没有问题的呢？  
深夜叨扰，多有得罪[鞠躬]。  
能否劳您闲暇时帮忙解答，感激不尽！！！

---

<div class="post-metadata">

作者： ![alexpeng](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/alexpeng/32/19592_2.png) [@alexpeng](https://forum.freemdict.com/u/alexpeng)\
发布日期： [2023 年7 月 2 日 01:55 UTC](https://forum.freemdict.com/t/topic/16539/79 "2023-07-02T01:55:17Z")

</div>

```auto
氨纶 
<img src="GHMY0001.png" width="100%"> 
</>

```

检查一下源文件中图片文件名和 mdd 中的图片文件名是否一致。你的图片名也是“GHMY”（古汉名言）开头吗？  
再检查一下图片的位置，图片是直接放在红框目录下吧。

 ![image](https://forumcdn.freemdict.com/uploads/default/original/3X/e/3/e3938b305a33768da491131e89346ef58645218e.png)

多说一句，mdd 要是不需修改，红框处留空就可以了，也就是仅生成 mdx 文件。

另：二楼修改了一下，重点看看第3步。

> [@alexpeng](#):
>
> 替换时需选中“转义字符”或“正则表达式”。

你似乎对“转义字符”不熟悉，希望[这个链接](https://baike.baidu.com/item/%E8%BD%AC%E4%B9%89%E5%AD%97%E7%AC%A6/86397?fr=ge_ala)对你有帮助。

---

<div class="post-metadata">

作者： ![webeyes](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/w/c0e974/32.png) [@webeyes](https://forum.freemdict.com/u/webeyes)\
发布日期： [2023 年7 月 2 日 02:18 UTC](https://forum.freemdict.com/t/topic/16539/80 "2023-07-02T02:18:16Z")

</div>

在熟悉本帖的静态图片词典制作方法之后，有JS基础的同学请参考以下贴应用动态插入页面技术制作无需跳转便可翻页的图片词典。动态插入技术将大大提升图片词典的体验，希望今后成为图片词典制作技术的主流。以下贴中的JS程序一旦读懂理解之后，可以用作模板用于任何图片词典，无需每次制作都重新编程。

> [@赵振才 英语常见问题解答大词典（图片版） 升级版 动态追加页面瀑布流技术](https://forum.freemdict.com/t/topic/21900/3):
>
> 其实这是没有应用动态加载的时候的最佳策略，可以最大程度的减少翻页。 但如果以这个为基础添加动态加载，会导致左右翻页时候页面重复。

---

<div class="post-metadata">

作者： ![alexpeng](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/alexpeng/32/19592_2.png) [@alexpeng](https://forum.freemdict.com/u/alexpeng)\
发布日期： [2023 年7 月 2 日 02:27 UTC](https://forum.freemdict.com/t/topic/16539/81 "2023-07-02T02:27:46Z")

</div>

赞！准备学习，已列入计划 😁

---

<div class="post-metadata">

作者： ![Tay](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/t/ecb155/32.png) [@Tay](https://forum.freemdict.com/u/Tay)\
发布日期： [2023 年7 月 2 日 11:15 UTC](https://forum.freemdict.com/t/topic/16539/82 "2023-07-02T11:15:24Z")

</div>

是名称和转义字符的问题，已经按照您的指示修改，完美地解决了之前的问题，太感谢您了！现在打字手都有一点点抖，真的超级超级（此处省略n个超级）感谢您！！！我终于制作成功了 🙏 🤩

---

<div class="post-metadata">

作者： ![alexpeng](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/alexpeng/32/19592_2.png) [@alexpeng](https://forum.freemdict.com/u/alexpeng)\
发布日期： [2023 年7 月 2 日 11:30 UTC](https://forum.freemdict.com/t/topic/16539/83 "2023-07-02T11:30:02Z")

</div>

可喜可贺 👏👏

[上一页](https://forum.freemdict.com/t/topic/16539.md?page=3)

[下一页](https://forum.freemdict.com/t/topic/16539.md?page=5)
