Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
stevenjoezhang committed Dec 28, 2024
1 parent 5ec8590 commit d1cc37a
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 14 deletions.
17 changes: 10 additions & 7 deletions README.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ Add Live2D widget to web page. Compatible with PJAX.
You can also check out example web pages:

- Check the effect in the lower left corner of [Mimi's Blog](https://zhangshuqiao.org)
- [demo.html](https://stevenjoezhang.github.io/live2d-widget/demo/demo.html) to demonstrate basic functionality
- [login.html](https://stevenjoezhang.github.io/live2d-widget/demo/login.html) to imitate the login interface of NPM
- [demo/demo.html](https://live2d-widget.pages.dev/demo/demo) to demonstrate basic functionality
- [demo/login.html](https://live2d-widget.pages.dev/demo/login) to imitate the login interface of NPM

## Usage

Expand All @@ -37,7 +37,7 @@ If you are interested in customizing the widget, please refer to the detailed in

## Configuration

You can refer to the source code of `autoload.js` to see the available configuration options. `autoload.js` will automatically load three files: `waifu.css`, `live2d.min.js`, and `waifu-tips.js`. `waifu-tips.js` creates the `initWidget` function, which is the main function for loading the widget. The `initWidget` function accepts an object-type parameter as the configuration for the widget. The following are the available options:
You can refer to the source code of `dist/autoload.js` to see the available configuration options. `autoload.js` will automatically load three files: `waifu.css`, `live2d.min.js`, and `waifu-tips.js`. `waifu-tips.js` creates the `initWidget` function, which is the main function for loading the widget. The `initWidget` function accepts an object-type parameter as the configuration for the widget. The following are the available options:

| Option | Type | Default Value | Description |
| ------ | ---- | ------------- | ----------- |
Expand All @@ -52,10 +52,13 @@ Among them, the parameters `apiPath` and `cdnPath` only need to set one of them.

If the options provided in the "Configuration" section above are not enough to meet your needs, you can make modifications yourself. The directory structure of this repository is as follows:

- `src/waifu-tips.js` contains the logic for the button and dialog box.
- `waifu-tips.js` is automatically generated by `src/waifu-tips.js` and it is not recommended to modify it directly.
- `waifu-tips.json` defines the triggering conditions (`selector`, CSS selector) and the displayed text when triggered (`text`).
- `waifu.css` is the style sheet for the virtual assistant.
- `src/` directory contains the code for each component, e.g. the button and dialog box.
- `build/` directory contains the files built by TypeScript.
- `dist/` directory contains the files that can be directly used on web pages after packaging, including:
- `autoload.js` is used to automatically load other resources such as style sheets.
- `waifu-tips.js` is automatically generated by `build/waifu-tips.js` and it is not recommended to modify it directly.
- `waifu-tips.json` defines the triggering conditions (`selector`, CSS selector) and the displayed text when triggered (`text`).
- `waifu.css` is the style sheet for the virtual assistant.

By default, the CSS selector rules in `waifu-tips.json` are effective for the Hexo [NexT theme](http://github.com/next-theme/hexo-theme-next), but you may need to modify or add new content to make it suitable for your own website.
**Warning: The content in `waifu-tips.json` may not be suitable for all age groups or appropriate to access during work. Please ensure their suitability when using them.**
Expand Down
17 changes: 10 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@
你也可以查看示例网页:

-[米米的博客](https://zhangshuqiao.org) 的左下角可查看效果
- [demo.html](https://stevenjoezhang.github.io/live2d-widget/demo/demo.html),展现基础功能
- [login.html](https://stevenjoezhang.github.io/live2d-widget/demo/login.html),仿 NPM 的登陆界面
- [demo/demo.html](https://live2d-widget.pages.dev/demo/demo),展现基础功能
- [demo/login.html](https://live2d-widget.pages.dev/demo/login),仿 NPM 的登陆界面

## 使用

Expand All @@ -37,7 +37,7 @@

## 配置

你可以对照 `autoload.js` 的源码查看可选的配置项目。`autoload.js` 会自动加载三个文件:`waifu.css``live2d.min.js``waifu-tips.js``waifu-tips.js` 会创建 `initWidget` 函数,这就是加载看板娘的主函数。`initWidget` 函数接收一个 Object 类型的参数,作为看板娘的配置。以下是配置选项:
你可以对照 `dist/autoload.js` 的源码查看可选的配置项目。`autoload.js` 会自动加载三个文件:`waifu.css``live2d.min.js``waifu-tips.js``waifu-tips.js` 会创建 `initWidget` 函数,这就是加载看板娘的主函数。`initWidget` 函数接收一个 Object 类型的参数,作为看板娘的配置。以下是配置选项:

| 选项 | 类型 | 默认值 | 说明 |
| - | - | - | - |
Expand All @@ -52,10 +52,13 @@

如果以上「配置」部分提供的选项还不足以满足你的需求,那么你可以自己进行修改。本仓库的目录结构如下:

- `src/waifu-tips.js` 包含了按钮和对话框的逻辑;
- `waifu-tips.js` 是由 `src/waifu-tips.js` 自动打包生成的,不建议直接修改;
- `waifu-tips.json` 中定义了触发条件(`selector`,CSS 选择器)和触发时显示的文字(`text`);
- `waifu.css` 是看板娘的样式表。
- `src/` 目录下包含了各个组件的代码,例如按钮和对话框等;
- `build/` 目录下包含了 TypeScript 构建后的文件;
- `dist/` 目录下包含了进一步打包后网页直接可用的文件,其中:
- `autoload.js` 是用于自动加载其它资源,例如样式表等;
- `waifu-tips.js` 是由 `build/waifu-tips.js` 自动打包生成的,不建议直接修改;
- `waifu-tips.json` 中定义了触发条件(`selector`,CSS 选择器)和触发时显示的文字(`text`);
- `waifu.css` 是看板娘的样式表。

`waifu-tips.json` 中默认的 CSS 选择器规则是对 Hexo 的 [NexT 主题](http://github.com/next-theme/hexo-theme-next) 有效的,为了适用于你自己的网页,可能需要自行修改,或增加新内容。
**警告:`waifu-tips.json` 中的内容可能不适合所有年龄段,或不宜在工作期间访问。在使用时,请自行确保它们是合适的。**
Expand Down

0 comments on commit d1cc37a

Please sign in to comment.