diff --git a/README.md b/README.md
new file mode 100644
index 0000000..3a0cc58
--- /dev/null
+++ b/README.md
@@ -0,0 +1,33 @@
+# live2d-widget
+
+## 功能
+在网页中添加 Live2D 看板娘
+
+## Demo
+https://zhangshuqiao.org  
+左下角可查看效果
+
+## 依赖
+需要jQuery和font-awesome  
+请确保它们已在页面中加载
+
+## 使用
+请修改autoload.js中的参数（具体参考该文件内的注释），这样，通过
+```
+<script src="/path/to/autolload.js"></script>
+```
+就可以加载了
+
+waifu-tips.json中包含了触发条件（selector，选择器）和触发时显示的文字（text）。源文件是对Hexo的NexT主题有效的，为了适用于你自己的网页，也需要自行修改，或增加新内容。
+
+## 鸣谢
+代码自这篇博文魔改而来：  
+https://www.fghrsh.net/post/123.html  
+其中增加了一些功能，优化了提示展现机制
+
+更多内容可以参考：  
+https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02  
+https://zhangshuqiao.org/2018-07/在网页中添加Live2D看板娘
+
+可以自行在后端api中增加模型：  
+https://github.com/xiazeyu/live2d-widget-models
diff --git a/autoload.js b/autoload.js
new file mode 100644
index 0000000..3b84858
--- /dev/null
+++ b/autoload.js
@@ -0,0 +1,25 @@
+$("<link>").attr({href: "https://www.example.com/path/to/waifu.css", rel: "stylesheet", type: "text/css"}).appendTo('head');
+//waifu.css的绝对路径
+
+$.ajax({
+	url: 'https://www.example.com/path/to/live2d.min.js',
+	dataType:"script",
+	cache: true,
+	async: false
+});
+//live2d.min.js的绝对路径
+
+$.ajax({
+	url: 'https://www.example.com/path/to/waifu-tips.js',
+	dataType:"script",
+	cache: true,
+	async: false
+});
+//waifu-tips.js的绝对路径
+
+// 初始化看板娘，会自动加载指定目录下的 waifu-tips.json
+$(window).on("load", function() {
+	initWidget("/lib/waifu/", "https://api.fghrsh.net/live2d");
+});
+//initWidget第一个参数为waifu-tips.json所在的文件夹，第二个参数为api地址
+//api后端可自行搭建，参考https://github.com/fghrsh/live2d_api
diff --git a/waifu-tips.js b/waifu-tips.js
index d25be86..7108745 100755
--- a/waifu-tips.js
+++ b/waifu-tips.js
@@ -1,8 +1,3 @@
-/*
- * https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02
- * https://www.fghrsh.net/post/123.html
- */
-
 String.prototype.render = function(context) {
 	var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g,
 		strFlag = true,
@@ -26,7 +21,7 @@ String.prototype.render = function(context) {
 	return strFlag ? result : "";
 }
 
-$(window).on("load", function() {
+function initWidget(waifuPath, apiPath) {
 	if (sessionStorage.getItem("waifu-display") == "none") return;
 	sessionStorage.removeItem("waifu-text");
 	$("body").append('<div class="waifu">\
@@ -210,7 +205,7 @@ $(window).on("load", function() {
 		}
 	}
 
-	function initModel(waifuPath, apiPath) {
+	function initModel() {
 		if (waifuPath === undefined) waifuPath = "";
 		if (apiPath === undefined) apiPath = "";
 		apiURL = apiPath;
@@ -303,5 +298,5 @@ $(window).on("load", function() {
 			}
 		});
 	}
-	initModel("/lib/waifu/", "https://api.fghrsh.net/live2d");
-});
+	initModel();
+}