📝 🔖 Write Document For Simplified Format

README.md

@@ -1,4 +1,4 @@
-### Brief Introduction
+## Brief Introduction
 This is a responsive link-boxes snippet inspired by and modified from Typecho's link-box, initially used for the links page of friends on my blog. Actually it can also be used as an index page or other situations which requires a list of links.
 
 Demo is shown at [https://demos.kingsleyxie.cn/link-boxes/](https://demos.kingsleyxie.cn/link-boxes/), and here is a preview picture on PC side:
@@ -9,7 +9,9 @@ Demo is shown at [https://demos.kingsleyxie.cn/link-boxes/](https://demos.kingsl
 
 The [Alpha version](https://github.com/KingsleyXie/NaiveProjects/tree/c3c13f9/Snippets/link-boxes/) wrote with both CSS and JavaScript is also shown [here](https://demos.kingsleyxie.cn/link-boxes-alpha/), but it is deprecated since the CSS-only version now has a better performance.
 
-### Usage
+## Usage
+### With Pure HTML Code
+
 Include the [`./link-boxes.css`](./link-boxes.css) file or add corresponding code inside it in your page code(HTML for example), and write your link boxes with syntax shown below:
 
 ```html
@@ -27,7 +29,34 @@ Include the [`./link-boxes.css`](./link-boxes.css) file or add corresponding cod
 
 Remember to change these four variables: `LINK-HERE`, `AVATAR-LINK-HERE`, `AVATAR-ALT-HERE` and `NICKNAME-HERE` to whatever value it is in your case.
 
-### Customization
+### With Simplified Format
+Besides the CSS file `./link-boxes.css`, add the Javascript code inside [`./link-boxes.js`](./link-boxes.js), and then you can use this kind of simplified format to create a link-box:
+
+```html
+<div class="link-boxes">
+    <!-- Standard Format For Each -->
+    [nickname](link~~avatar|alt)
+
+    <!-- Or Without `alt` -->
+    [nickname](link~~avatar)
+</div>
+```
+
+**Note: Formated code should be inside a `div` with `link-boxes` class, otherwise they won't be parsed to the corresponding HTML code**
+
+For example:
+
+```html
+<div class="link-boxes">
+    [Google](https://www.google.com~~https://balabala.png|google)
+
+    [Google](https://www.google.com~~https://balabala.png)
+</div>
+```
+
+Moreover, you can choose not to write the AVATAR-ALT, the `alt` value will be automatically set to `avatar`.
+
+## Customization
 If you are not satisfied with the image size or other style of these link boxes, or want to customize your own link boxes, you can simply change the corresponding values inside [`./link-boxes.css`](./link-boxes.css). By default, value of the core variables are:
 
 ```css

demo/index.html

@@ -24,31 +24,31 @@ <h3 style="font-weight: 500; margin: 15px">Lorem ipsum dolor sit amet, consectet
 
 	<div class="link-boxes">
 		<!-- Formated -->
-		[Kingsley](https://github.com/KingsleyXie/link-boxes:./demo-icons/kingsley.jpg|kingsley)
+		[Kingsley](https://github.com/KingsleyXie/link-boxes~~./demo-icons/kingsley.jpg|kingsley)
 
 		<!-- Formated Without AVATAR-ALT-NAME -->
-		[Google](https://github.com/KingsleyXie/link-boxes:./demo-icons/instantlogosearch-google.png)
+		[Google](https://github.com/KingsleyXie/link-boxes~~./demo-icons/instantlogosearch-google.png)
 
 		<!-- Formated -->
-		[Wechat](https://github.com/KingsleyXie/link-boxes:./demo-icons/instantlogosearch-wechat.png|wechat)
+		[Wechat](https://github.com/KingsleyXie/link-boxes~~./demo-icons/instantlogosearch-wechat.png|wechat)
 
 		<!-- Formated -->
-		[Google](https://github.com/KingsleyXie/link-boxes:./demo-icons/instantlogosearch-google-2.png|google)
+		[Google](https://github.com/KingsleyXie/link-boxes~~./demo-icons/instantlogosearch-google-2.png|google)
 
 		<!-- Formated -->
-		[IKEA](https://github.com/KingsleyXie/link-boxes:./demo-icons/instantlogosearch-ikea.png|ikea)
+		[IKEA](https://github.com/KingsleyXie/link-boxes~~./demo-icons/instantlogosearch-ikea.png|ikea)
 
 		<!-- Formated Without AVATAR-ALT-NAME -->
-		[Starbucks](https://github.com/KingsleyXie/link-boxes:./demo-icons/instantlogosearch-starbucks.png)
+		[Starbucks](https://github.com/KingsleyXie/link-boxes~~./demo-icons/instantlogosearch-starbucks.png)
 
 		<!-- Formated -->
-		[Twitter](https://github.com/KingsleyXie/link-boxes:./demo-icons/instantlogosearch-twitter.png|twitter)
+		[Twitter](https://github.com/KingsleyXie/link-boxes~~./demo-icons/instantlogosearch-twitter.png|twitter)
 
 		<!-- Formated -->
-		[Facebook](https://github.com/KingsleyXie/link-boxes:./demo-icons/instantlogosearch-facebook-2.png|facebook)
+		[Facebook](https://github.com/KingsleyXie/link-boxes~~./demo-icons/instantlogosearch-facebook-2.png|facebook)
 
 		<!-- Formated Without AVATAR-ALT-NAME -->
-		[Ubuntu](https://github.com/KingsleyXie/link-boxes:./demo-icons/instantlogosearch-ubuntu.png)
+		[Ubuntu](https://github.com/KingsleyXie/link-boxes~~./demo-icons/instantlogosearch-ubuntu.png)
 
 		<!-- Initial Pure HTML -->
 		<a href="https://github.com/KingsleyXie/link-boxes" class="link-box">

link-boxes.js

@@ -1,10 +1,10 @@
-const filterReg = /\[(.*)\]\((.*):([^\|]*)\)/g;
-const replaceReg = /\[(.*)\]\((.*):(.*)\|(.*)\)/g;
+const filterReg = /\[(.*)\]\((.*)~~([^\|]*)\)/g;
+const replaceReg = /\[(.*)\]\((.*)~~(.*)\|(.*)\)/g;
 const divSelector = ".link-boxes";
 
 document.querySelector(divSelector).innerHTML =
 document.querySelector(divSelector).innerHTML
-.replace(filterReg, '[$1]($2:$3|avatar)');
+.replace(filterReg, '[$1]($2~~$3|avatar)');
 
 document.querySelector(divSelector).innerHTML =
 document.querySelector(divSelector).innerHTML