Skip to content

Commit

Permalink
update:更新文档资料
Browse files Browse the repository at this point in the history
  • Loading branch information
lixianbin1 committed Jun 11, 2021
1 parent 8d60af9 commit 488bf6c
Show file tree
Hide file tree
Showing 8 changed files with 172 additions and 158 deletions.
8 changes: 4 additions & 4 deletions docs/en/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,20 @@
home: true
heroImage: /img/logo01.png
heroText: imgzoom-li
tagline: 一个可以查看图片(可以缩放,拖拽)的JS插件
actionText: 快速上手
tagline: A JS plug-in that can view pictures (zoom and drag)
actionText: Get started quickly
actionLink: /guide/
footer: MIT Licensed | Copyright © 2018-present Evan You
---

### 简单使用
### Easy to use

```sh
npm install imgzoom-li
```

```html
<img class="imgZoom" src="./Img/202001034.png" alt="示例图片" >
<img class="imgZoom" src="./Img/202001034.png" alt="Sample picture" >
```

```javascript
Expand Down
16 changes: 8 additions & 8 deletions docs/en/guide/README.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
# imgzoom-li 是什么?
# What is imgzoom Li?

`imgzoom-li` 是一个用于查看网页图片的 `js`插件,可以切换,拖拽和缩放。使用简单,便捷和兼容性强。
`Imgzoom` Li is a 'JS' plug-in for viewing web page pictures, which can switch, drag and zoom. It is easy to use, convenient and compatible.

<img :src="$withBase('/imgzoom.jpg')" alt="imgzoom">

### 它能为我做什么
### What can it do for me

imgzoom-li 一个可以查看图片(可以缩放,拖拽)的JS插件,无需引入额外 js 插件,简洁,方便,兼容。采用原生js编写。能广泛兼容多种浏览器,IE9+ 等低版本浏览器也可以兼容。对项目中的图片可以进行查看,放大,缩小及拖拽等操作。
Imgzoom Li is a JS plug-in that can view pictures (zoom, drag) without introducing additional JS plug-ins. It is simple, convenient and compatible. It is written in native JS. It can be widely compatible with a variety of browsers, IE9 + and other low version browsers can also be compatible. The pictures in the project can be viewed, enlarged, reduced and dragged.

<img :src="$withBase('/VPDemo.png')" alt="VPDemo">

该文档可以全方位的为你演示 imgzoom-li 的各类配置和效果,通过项目的结构和注释,可以很好的了解和学习
This document can demonstrate all kinds of configurations and effects of imgzoom Li for you in an all-round way. Through the structure and annotation of the project, you can understand and learn it well

### 我需要为它做什么
### What do I need to do for it

imgzoom-li 采用原生js ,无需引入额外的js插件。可以即装立用。无需为此产生额外的负担。
Imgzoom Li uses native JS without introducing additional JS plug-ins. It can be installed and used immediately. There is no need to put an extra burden on it.

imgzoom 仅作为一个演示项目,无需额外的权限,仅需要克隆和点赞即可。如果你能为此添加你的学习过程中产生的问题和解决办法的话,那肯定是极好的,
Imgzoom is only a demonstration project, without additional permissions. It only needs to clone and like. If you can add problems and solutions in your learning process, it will be excellent,
23 changes: 15 additions & 8 deletions docs/en/guide/Started.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,33 @@
# 快速上手
# Get started quickly

本文会为你快速介绍一下imgzoom-li 的应用及过程
This article will give you a quick introduction to the application and process of imgzoom Li

### imgzoom-li 的使用
### The use of imgzoom Li

1:安装 imgzoom-li
1: Install imgzoom Li

```sh

yarn add imgzoom-li # npm install imgzoom-li

```

2:打开你需要查看图片的html,在所有需要查看的图片的class上添加 imgZoom
2: Open the HTML of the pictures you need to view, and add imgzoom to the class of all the pictures you need to view

```html
<img class="imgZoom" src="./Img/202001034.png" alt="示例图片" >

< img class = "imgzoom" SRC =. / img / 202001034. PNG "ALT =" sample picture ">

```

3:在js中调用 imgzoom-li
3: calling imgzoom-li in JS

```javascript

import imgli from 'imgzoom-li'

imgli.init()

```

之后你就可以尽情在页面中享受imgzoom-li 带来的图片查看效果了
After that, you can enjoy the image viewing effect of imgzoom Li on the page
50 changes: 0 additions & 50 deletions docs/en/guide/going.md

This file was deleted.

60 changes: 38 additions & 22 deletions docs/en/guide/introduce.md
Original file line number Diff line number Diff line change
@@ -1,65 +1,81 @@
# Introduction

# 介绍
Imgzoom is used to introduce imgzoom Li (PS: a plug-in for viewing pictures. Originally, it was intended to use the name of imgzoom, but it has already been used.) Plug in Library packaging, publishing and maintenance of the project, you can learn through it a library packaging, publishing and maintenance.

imgZoom 一个用于介绍 imgzoom-li(PS:一个用于查看图片的插件,原本打算用 imgzoom 的名称,可是已经有人用了。) 插件库的打包,发布和维护的项目,可以通过它学习库的一个打包,发布和维护。
### Branch introduction

### 分支介绍
- **master**

- **master**
>The introduction branch is used to introduce the related content of imgzoom and the reference of plug-in library
>介绍的分支,用于介绍 imgzoom 的相关内容及插件库的引用
- **gh-pages**

- **gh-pages**
>Demo branch, above is the static website generated by vuepress
>演示的分支,上面是通过 vuepress 生成的静态网站
- **package**

- **package**
>The publishing branch, which is the content of imgzoom Li plug-in, is the content to be published
>发布的分支,上面是imgzoom-li插件的内容,是需要发布的内容
### Command introduction

### 命令介绍
Package command, package the demo project under SRC directory, and generate the build folder

打包命令,打包src目录下的演示项目,生成bui ld文件夹
```sh

npm run buil # npx webpack -p

```

启动服务,启动src目录下的演示项目
Start the service and start the demo project in SRC directory

```sh

npm run serve # npx webpack-dev-server

```

启动服务器,启动vuepress的文档介绍网站
Start the server, start the document introduction website of vuepress

```sh

npm run docs:dev # vuepress dev docs

```

打包命令,打包vuepress的文档介绍网站
Package command, package vuepress document introduction website

```sh

npm run docs:build # vuepress build docs

```

### 引用支持
### Reference support

#### VuePress

VuePress:一个快速构建文档型网站的工具,通过它用来构建介绍项目的静态网站。 [官网介绍](https://vuepress.vuejs.org/zh/)
Vuepress: a tool to quickly build a document website. It is used to build a static website to introduce projects[ [official website]https://vuepress.vuejs.org/zh/ )

1: install vuepress as a local dependency. Vuepress no longer recommends global installation of vuepress

1 : 将 VuePress 安装为本地依赖 , vuepress 已经不再推荐全局安装 VuePress
```sh
yarn add -D vuepress # npm install -D vuepress

yarn add -D vuepress # npm install -D vuepress

```

#### Webpack

Webpac:一个模块打包器。通过它用来生成打包后的代码。 [官网介绍](https://webpack.docschina.org/)
WebPAC: a module packer. It is used to generate packaged code[ [official website]https://webpack.docschina.org/ )

1:将 webpack 安装为本地依赖,同时安装 webpack-cli 命令工具
1: Install webpack as a local dependency and the webpack cli command tool

```sh

yarn add -D webpack # npm install -D webpack

yarn add -D webpack-cli # npm install -D webpack-cli
```
PS:目前用于演示引用imgzoom-li库的项目打包

```

PS: currently used to demonstrate the packaging of projects that reference the imgzoom Li library
26 changes: 0 additions & 26 deletions docs/en/guide/page1.md

This file was deleted.

57 changes: 41 additions & 16 deletions docs/en/guide/vuepress.md
Original file line number Diff line number Diff line change
@@ -1,48 +1,73 @@
# VuePress

### 链接语法
### Link syntax

```md
[转跳特定标题](/guide/page1.html#介绍) <!-- 跳转到特定标题位置 -->
[bar - three](../bar/three.md) <!-- 具体文件可以使用 .md 结尾(推荐) -->
[bar - four](../bar/four.html) <!-- 也可以用 .html -->

[jump to specific title] (/ guide / page1. HTML # introduction) <-- Jump to a specific title position -- >

[bar - three](../bar/three.md) <!-- Specific files can end with. MD (recommended) - >

[bar - four](../bar/four.html) <!-- You can also use. HTML -- >

```

### 提示主题
### Prompt topic

Example effect

示例效果
::: tip
这是一个提示

This is a hint

:::

::: warning
这是一个警告

This is a warning

:::

::: danger
这是一个危险警告

This is a danger warning

:::

::: details
这是一个详情块,在 IE / Edge 中不生效

This is a detail block and does not work in IE / edge

:::
示例代码

Sample code

```md

::: tip
这是一个提示

This is a hint

:::

::: warning
这是一个警告

This is a warning

:::

::: danger
这是一个危险警告

This is a danger warning

:::

::: details
这是一个详情块,在 IE / Edge 中不生效

This is a detail block and does not work in IE / edge

:::

```

目前的 imgzoom-li 正在试验中,请稍候!
The current imgzoom Li is being tested, please wait!
Loading

0 comments on commit 488bf6c

Please sign in to comment.