Type a keyword and hit enter to start searching. Press Esc to cancel.

Currently Reading | 正在閱讀

如何在Emmet製作中文版的亂數假文產生器 – How to customize default “Lorem ipsum” and generate your own language in Emmet

在製作網頁的前期過程中

常常需要dummy text來當placeholder

如果要做英文網站,如果你是sublime text, brackets等的愛用者

安裝emmet後,會有內建lorem ipsum可以協助你完成英文假文使用

然後,你可以配合lorem5/10/15/20/100外加tab去觸發定義增添字數的多少

可是,如果你要設計的是中文網站呢?

而中文的字型,高度,寬度,行距等感覺跟英文畢竟是有差別的

用英文的lorem ipsum無法真正達到使用假文在設計上的用意

那要如何在sublime text或著brackets製作中文的假文產生器呢?

( Or to say, How to generate Lorem ipsum text in your own language in Emmet? )

在網路上做了一下調查,發現只有有人做相關的中文假文字數生成器

只能用來產生不一樣的文字,還需要複製貼上到text editor / IDE 中才能使用

但並沒有人專門為了網頁設計師要設計網頁時,經常要使用到的text editors做中文相關的lorem ipsum產生器

因此使用上會很不方便

只好自己想辦法了

摸索了好久終於實驗成功

以下是我產生中文假文的方法,sublime text也可以參照這個原則去修改,畢竟Emmet的plugin/extension都是同一個人寫的:)

首先,先找到lorem.js這個檔案 ( Locate lorem.js file in your computer with the file path below. )

(Mac下的)路徑是:

User/Library/Brackets/Application Support/extensions/user/brackets-emmet/node_modules/emmet/lib/generator/lorem.js

打開該檔案後

在lang object下可以看到已經有en, ru, sp等lorem ipsum語言, 分別是英文,俄語和西班牙語

在往下面會看到一行code:

prefs.define('lorem.defaultLang', 'en',
'Default language of generated dummy text. Currently, <code>en</code>\
and <code>ru</code> are supported, but users can add their own syntaxes\
see <a href="http://docs.emmet.io/abbreviations/lorem-ipsum/">docs</a>.');

( Change ‘en’, which needs to define to your country’s language, such as ‘jp’, ‘kr’ and etc. later )

在這裡,plugin的作者好心的說可以增加自己國家語言或另外想用的假文的語法,

只要參照emmet官網的lorem ipsum generator頁面就可以了

可是

這是騙人的!

這是騙人的!

這是騙人的!

很重要所以說三遍!

因為文章內容只有教你怎麼使用lorem ipsum

並沒有教你如何定義自己的lorem ipsum

下面comments也好多人在提問,想要知道如何改成自己國家語言的假文產生器

但都沒有人回答,或著回答連結早已失效

偏題了

所以要怎麼加入中文的lorem ipsum呢?

你需要在lang object下新增一個property, 我們叫它tw好了,然後再assign給它一個object,這個object又有兩個properties,

分別是common和words

common是用來之後會產生的中文最先出現的字

而words有點像是所有的中文字,如果沒有定義common的話,當你觸發lorem時,最先出現的字就會是random的

上面說的程式碼如下:

tw: {
common: ['過問著輕黨','有現真多好。學愛故','天越林性他如白兩石','不間知室勢成','往法提就一遊'],
words: [ '過問著輕黨','有現真多好。學愛故','天越林性他如白兩石','不間知室勢成','往法提就一遊','事好企來本善不滿海','我如如五作你當眼','夫裡門對!仍下的山歡世,位了地客','中天投,色一有!萬全響小在海上,德言','回過著去神傳;有發到管兒團不葉一,的期新表,以需怎像空的時,早如件學受住兒。車魚','條會,陸成位上國白勢夫一看!持走亮片;任用正以費','子導奇放地的大形幾驚','當之。覺原評母,得做且腳易民連。']
},

( Define the content detail of your country’s language, such as ‘jp’, ‘kr’ and etc. here. )

然後

你需要在prefs.define()函式中把’en’這個argument改成上面我們定義的’tw’

程式碼如下:

prefs.define('lorem.defaultLang', 'tw');

( Change the ‘en’ argument to whatever you define for your country’s language shorthand is, such as ‘jp’, ‘kr’ and etc. )

然後save, quit and reopen你的text editor

輸入lorem5,然後按tab ( Trigger your Lorem ipsum dummy text with tab key. )

過問著輕黨 有現真多好。學愛故 天越林性他如白兩石 不間知室勢成 往法提就一遊.

輸入lorem50,然後按tab

過問著輕黨 有現真多好。學愛故 天越林性他如白兩石 不間知室勢成 往法提就一遊. 條會,陸成位上國白勢夫一看!持走亮片;任用正以費 不間知室勢成 我如如五作你當眼 往法提就一遊 回過著去神傳;有發到管兒團不葉一,的期新表,以需怎像空的時,早如件學受住兒。車魚 子導奇放地的大形幾驚, 天越林性他如白兩石 夫裡門對!仍下的山歡世,位了地客 事好企來本善不滿海 當之。覺原評母,得做且腳易民連。 過問著輕黨 有現真多好。學愛故 中天投,色一有!萬全響小在海上,德言! 夫裡門對!仍下的山歡世,位了地客 子導奇放地的大形幾驚 有現真多好。學愛故 往法提就一遊 當之。覺原評母,得做且腳易民連。, 我如如五作你當眼 中天投,色一有!萬全響小在海上,德言 條會,陸成位上國白勢夫一看!持走亮片;任用正以費, 不間知室勢成 事好企來本善不滿海 回過著去神傳;有發到管兒團不葉一,的期新表,以需怎像空的時,早如件學受住兒。車魚 天越林性他如白兩石 過問著輕黨! 子導奇放地的大形幾驚 夫裡門對!仍下的山歡世,位了地客 條會,陸成位上國白勢夫一看!持走亮片;任用正以費, 有現真多好。學愛故, 事好企來本善不滿海 天越林性他如白兩石 不間知室勢成 往法提就一遊 中天投,色一有!萬全響小在海上,德言 當之。覺原評母,得做且腳易民連。 我如如五作你當眼 回過著去神傳;有發到管兒團不葉一,的期新表,以需怎像空的時,早如件學受住兒。車魚, 過問著輕黨! 回過著去神傳;有發到管兒團不葉一,的期新表,以需怎像空的時,早如件學受住兒。車魚 過問著輕黨 我如如五作你當眼, 事好企來本善不滿海 往法提就一遊 子導奇放地的大形幾驚.

恭喜!

你有了一個可以產生不同字數,方便又好用的中文假文產生器了!

( There you go!  You successfuly change the default Lorem ipsum in Emmet !

And you got a fancy Lorem ipsum text generator in your own language in text editors NOWWW ! )

BTW: 我不是sublime text的使用者,在preference.json的檔案裡面找到一樣的lorem.defaultLang,然後定義你的中文lorem,應該就可以達到跟brackets一樣好用的中文假文產生器摟^^

 

UPDATE

如果你想要每次用tab鍵觸發lorem * n 的字都不一樣 (n=你想要的字數),請把下面common那一行刪掉。

( If you want a random Lorem ipsum text, just delete “common” below. )

tw: {
common: ['過問著輕黨','有現真多好。學愛故','天越林性他如白兩石','不間知室勢成','往法提就一遊'],
words: [ '過問著輕黨','有現真多好。學愛故','天越林性他如白兩石','不間知室勢成','往法提就一遊','事好企來本善不滿海','我如如五作你當眼','夫裡門對!仍下的山歡世,位了地客','中天投,色一有!萬全響小在海上,德言','回過著去神傳;有發到管兒團不葉一,的期新表,以需怎像空的時,早如件學受住兒。車魚','條會,陸成位上國白勢夫一看!持走亮片;任用正以費','子導奇放地的大形幾驚','當之。覺原評母,得做且腳易民連。']
},

原因是因為common這個property定義了產生Lorem ipsum中文假文(亂碼)最先出現的中文字喔!

Enjoy designing and coding!

 

 

 

希望我的文章對你有幫助 ^^

Did you learn something from my article? I do hope so.:)

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *