arsene/readme.md

51 lines
2.5 KiB
Markdown
Raw Normal View History

2024-04-17 11:02:04 +00:00
# Arsene亚森
2024-04-17 11:27:34 +00:00
Arsene 亚森是一个用于处理 CJK 字符(韩文字符目前不可用)与英文字符和阿拉伯数字间空隙的前端库。不需要人为手动添加空格,只需在编写前端页面时,将其引入并执行处理代码,即可自动处理。
2024-04-17 11:02:04 +00:00
![](https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExd3pxZ2trM2l3cHd4ajM0eDRhMnYwOXdpbjJidWlwazZ2Y3R4bHVqeCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Urw1D3Jl8rFzRQAlVy/giphy.gif)
2024-04-17 11:22:59 +00:00
[在线体验](https://arsene-showcase.netlify.app)
2024-04-17 11:02:04 +00:00
## 基础使用方法
以下以 React 环境的 TypeScript 为用例,其他环境使用方法类似。
首先安装 Arsene 库:
```zsh
npm install arsene
yarn add arsene
```
```tsx
import { useEffect } from "react"
import arsene from 'arsene' // 1. 导入库
function App() {
useEffect(() => {
2024-04-17 11:33:26 +00:00
arsene(".arsene-area") // 2. 应用于具体的元素,支持 `.class`、`#id` 或是 HTML 标签名。
2024-04-17 11:02:04 +00:00
}, [])
return(<>
<div className="arsene-area">
<p>Claude是一位在Anthropic公司工作的AI助手。作为一款先进的conversational AI它拥有广博的知识可以流利地使用多种语言与人交流并协助完成writinganalysiscoding等各种任务。Claude性格友善乐于助人能够提供客观的信息和独到的见解但有时也会表达自己的观点。它会尽力避免stereotyping并以balanced的视角看待controversial的话题。</p>
<p>クロードはAnthropicという会社で働いているAIアシスタントです。先進的なconversational AIとして、幅広い知識を持ち、複数の言語でスムーズにコミュニケーションを取ることができます。また、writing、analysis、codingなどのさまざまなタスクを手伝うことができます。クロードは親切で、助けになろうと努力しますが、時には自分の意見を述べることもあります。ステレオタイプを避け、controversialなトピックにはバランスの取れた視点を持つよう心がけています。</p>
</div>
</>)
}
```
## 额外功能
2024-04-17 23:00:06 +00:00
### 自定义间隙宽度
2024-04-17 11:02:04 +00:00
```ts
2024-04-17 23:00:06 +00:00
arsene(selectedNode: string, spacing: 's'|'m'|'l'|'xl'|'2xl' = 10)
2024-04-17 11:02:04 +00:00
// sample
arsene(node, 5)
```
2024-04-17 23:00:06 +00:00
你可以在第二个参数中选择一个你认为合适的间隙宽度。可选参数如下:
2024-04-17 11:02:04 +00:00
2024-04-17 23:00:06 +00:00
- `2xl`:添加非常大间隙 `U+2004`
- `xl`:添加超大间隙 `U+2005`
- `l`:添加大间隙 `U+2009`
- `m`:添加中间隙 `U+2006`
- `s`:添加小间隙 `U+200A`
2024-04-17 11:02:04 +00:00
默认(不填写第二个参数时)将添加 `U+200A`