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

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>

a标签可以这样嵌套用吗?这个还真不知道,一会搜索看看。

@alexpeng 兄,我也不清楚,若外面那個<a href="entry://aabbcc">不要套上去,應該是沒問題,但如果有此需求,可有解

最外面那層應該是沒法跳,剛試了下,好像沒有反應

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

還沒試,不知是否可行

这个帖子似乎有解决方法,希望对你有帮助。

謝謝 @alexpeng 兄,好像有點難懂… :sweat_smile:

我也不懂 :joy:

我不是很了解你要的效果,這些aa, bb是代表漢字還是羅馬字的詞目?anyway, href 鏈接夾在另外 href 中,不合理。

你好像要的是:
<a href="entry://aabbcc">aabbcc</a>

然後 mdx 要提供跳轉設備:
aabbcc
@@@LINK=aa
</>
aabbcc
@@@LINK=bb
</>
aabbcc
@@@LINK=cc
</>

aabbcc才會同時跳三處。(我們甭太離題,應當討論圖片詞典呵呵)

@Mastameta 兄,您有點誤解在下想要轉跳的方式,最外那層是箝套,不知是否可以實現,@@@LINK那樣的跳轉不太適合想弄的材料
<a href="entry://aabbcc"><a href="entry://aa">aa</a><a href="entry://bb">bb</a><a href="entry://cc">cc</a></a>

_---------------------------------------

<a href="entry://aa">aa</a><a href="entry://bb">bb</a><a href="entry://cc">cc</a>
aa, bb, cc 可以轉跳 OK

但若想在同一詞條轉跳 aabbcc ,不知可行否? :sweat_smile:

鏈接夾在鏈接,這樣怪怪的。分別列出四個鏈接就可以了。

確實是怪怪的,因為不知如何實現 :sweat_smile:
maybe…
<a href="entry://aabbcc"> # </a><a href="entry://aa">aa</a><a href="entry://bb">bb</a><a href="entry://cc">cc</a>

# aabbcc

點擊 井字號 轉跳 aabbcc 應該是沒問題 :laughing:

那樣可以。那個 aabbcc 目的地,在界面上怎麼標都無所謂。

嗯嗯,好的,謝謝啦! :laughing:

切回 before 的話題,標籤叫 <a combo href="entry://aabbcc"></a>
CSS:a[combo]::before {content:"#"; margin-right:.5em} 之類的。
(因為鏈接原來沒標題目,就不分前後,所以這裡換用 ::after 會有等同的效果。)

2 Likes

@Mastameta 兄,您的完整標簽意思是否是 <a combo href="entry://aabbcc"></a>
然后在css內加上那行井字號就可以出現,讚!厲害了 :grinning: :pray: 漂亮了!,又學到了一招好用的方法,嗯嗯,理解了,漂亮,漂亮 :grinning:

關於 # 前後的空白,一般來說,html 中最好別用鍵盤打出的空白來安排空間佈局。用 CSS margin。這樣可以更準確控制隔離的大小,數據也更容易維護,因為沒有多餘的東西。別加空白,除非是真正內容(例如英文詞之間的空白)。

1 Like

嗯嗯,理解,這方法也彈性,還好您提醒了一下,不然我真沒想到這個功用,謝謝 @Mastameta 兄指點迷津,太感謝了! :laughing: :sweat_smile: