使用 lorem 快捷生成隨機文本填充頁面

時間 2021-02-19

標籤 git 編程編輯器測試 spa 插件設計 code blog 欄目 Git 简体版

原文原文鏈接

開發網頁時，須要臨時添加一些測試文字來添充頁面內容，這時就能夠考慮使用啞元文本「Lorem ipsum」

背景介紹

Lorem ipsum是指一篇經常使用於排版設計領域的拉丁文文章，主要的目的爲測試文章或文字在不一樣字型、版型下看起來的效果。git

Lorem ipsum從西元15世紀開始就被普遍地使用在西方的印刷、設計領域中，在電腦排版盛行以後，這段被傳統印刷產業使用幾百年的無心義文字又再度流行。因爲這段文字以「Lorem ipsum」起頭，而且常被用於標題的測試中，因此通常稱爲Lorem ipsum，簡稱爲Lipsum。編程

快速使用

在編程中，咱們也可使用Lorem ipsum來填充頁面，測試顯示效果。主要是經過編輯器中自帶的 Emmet 插件，識別以 lorem 開頭的短語，生成指定格式的內容。如下介紹均以 vscode 爲測試載體。編輯器

注意：lorem 短語須要手動輸入，複製粘貼不會觸發編輯器的 Emmet 識別；在輸入後，編輯器出現 Emmet 快捷提示，按回車便可測試

新建默認數量詞語的句子

lorem + Tab/Enter，新建一共30個詞語的句子ui

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi ipsam, pariatur illum odit beatae numquam ab fuga voluptas sequi maxime praesentium, atque amet doloribus nostrum, eveniet aliquam perferendis perspiciatis repellat?

新建指定數量詞語的句子

loremN，其中 N 是一個數字，表明有 N 個詞語（注意不是字符串長度爲 N ）spa

// lorem10
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, consectetur.

填充指定行數的內容

lorem*N，其中 N 是一個數字，表明有 N 行插件

// lorem*3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nihil sunt voluptatum. Recusandae nihil similique magnam tempore distinctio nobis illum natus impedit ut quod? Tempore accusamus soluta repellat enim. Atque?
Debitis ratione voluptas ipsa quos sed eum atque explicabo, impedit laborum cum itaque ducimus, officia accusamus possimus eius, aperiam reiciendis eaque? Veritatis corporis dicta exercitationem autem fuga impedit voluptates tempore?
Officia tenetur vel eum mollitia ex quasi? Repellat itaque facere alias fugit eveniet quia molestiae at quos, odit deleniti cum perferendis non amet, ipsam, ducimus odio nostrum obcaecati est quae!

結合二者，填充指定行數且指定詞語數量的內容

loremN*M，填充 M 行內容，每行 N 個詞語設計

// lorem10*4
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, suscipit!
Sed dolorum enim doloribus velit illo quo commodi quas autem.
Recusandae nemo nam iusto autem deleniti quaerat ullam temporibus delectus!
Vero natus iusto numquam molestias, voluptates temporibus eius expedita culpa!