tona-plugins 1.0.21 → 1.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +136 -24
  2. package/README.zh-CN.md +160 -0
  3. package/package.json +26 -25
  4. package/src/plugins/clickEffects/index.js +1 -3
  5. package/src/plugins/emoji/index.js +1 -3
  6. package/src/plugins/notice/index.scss +11 -1
package/README.md CHANGED
@@ -1,48 +1,160 @@
1
- # plugins
1
+ # tona-plugins
2
2
 
3
- Plugins for Tona theme.
3
+ <p align="center">
4
+ <img src="../../assets/tona.png" alt="Tona" width="100" />
5
+ </p>
4
6
 
5
- ## Usage
7
+ <p align="center">
8
+ Official plugin collection for Tona themes.
9
+ </p>
10
+
11
+ <p align="center">
12
+ <a href="https://www.npmjs.com/package/tona-plugins"><img src="https://img.shields.io/npm/v/tona-plugins?style=flat-square" alt="npm version"></a>
13
+ <a href="LICENSE"><img src="https://img.shields.io/npm/l/tona-plugins?style=flat-square" alt="license"></a>
14
+ </p>
15
+
16
+ **English** | [中文](./README.zh-CN.md)
17
+
18
+ ## Features
19
+
20
+ - **30+ Plugins** - Comprehensive plugin collection
21
+ - **Easy Integration** - Simple `theme.use()` API
22
+ - **Configurable** - Each plugin has customizable options
23
+ - **Official Support** - Maintained by the Tona team
24
+
25
+ ## Installation
6
26
 
7
27
  ```bash
8
- npm i tona
28
+ npm install tona-plugins
9
29
  ```
10
30
 
11
31
  ```bash
12
- npm i tona-plugins
32
+ pnpm add tona-plugins
13
33
  ```
14
34
 
15
- ```js
16
- import { createTheme } from 'tona'
17
- import { background } from 'tona-plugins'
18
-
19
- createTheme().use(background)
35
+ ```bash
36
+ yarn add tona-plugins
20
37
  ```
21
38
 
22
- Configure the default behavior of the plugin in your Theme
39
+ ## Usage
23
40
 
24
- ```js
41
+ ```typescript
25
42
  import { createTheme } from 'tona'
26
- import { background } from 'tona-plugins'
43
+ import { background, darkMode, codeHighlight } from 'tona-plugins'
44
+
45
+ const theme = createTheme()
27
46
 
28
- createTheme().use(background, {
29
- // The default configuration of the Theme
30
- enable: true,
31
- })
47
+ theme.use(background)
48
+ theme.use(darkMode)
49
+ theme.use(codeHighlight)
32
50
  ```
33
51
 
34
- Configure background plugin
52
+ ## Available Plugins
53
+
54
+ ### UI Enhancements
55
+
56
+ | Plugin | Description |
57
+ | -------------- | ----------------------------- |
58
+ | `background` | Custom background image/color |
59
+ | `darkMode` | Dark mode toggle |
60
+ | `colorMode` | Color theme switching |
61
+ | `clickEffects` | Click animation effects |
62
+ | `live2d` | Live2D model widget |
63
+
64
+ ### Content
65
+
66
+ | Plugin | Description |
67
+ | ------------------ | ------------------------ |
68
+ | `codeHighlight` | Syntax highlighting |
69
+ | `codeCopy` | Copy code button |
70
+ | `codeLang` | Show code language |
71
+ | `codeLinenumbers` | Line numbers for code |
72
+ | `codeTrafficLight` | Mac-style window buttons |
73
+ | `imagePreview` | Image lightbox |
74
+ | `notation` | Text annotations |
75
+
76
+ ### Navigation
77
+
78
+ | Plugin | Description |
79
+ | --------- | ---------------------- |
80
+ | `catalog` | Table of contents |
81
+ | `tools` | Quick navigation tools |
82
+ | `footer` | Custom footer |
83
+ | `qrcode` | QR code generator |
35
84
 
36
- ```js
85
+ ### Social
86
+
87
+ | Plugin | Description |
88
+ | ----------------- | -------------------- |
89
+ | `commentsAvatars` | Comment user avatars |
90
+ | `emoji` | Emoji support |
91
+ | `signature` | Post signature |
92
+
93
+ ### Media
94
+
95
+ | Plugin | Description |
96
+ | ------------- | ------------------------- |
97
+ | `musicPlayer` | Background music player |
98
+ | `barrage` | Danmu/barrage comments |
99
+ | `charts` | Data visualization charts |
100
+
101
+ ### Utilities
102
+
103
+ | Plugin | Description |
104
+ | ---------- | -------------------- |
105
+ | `notice` | Announcement notices |
106
+ | `toast` | Toast notifications |
107
+ | `lock` | Content protection |
108
+ | `donation` | Donation button |
109
+ | `license` | License display |
110
+ | `webTag` | Website tags |
111
+
112
+ ## Plugin Configuration
113
+
114
+ Each plugin accepts configuration options:
115
+
116
+ ```typescript
37
117
  import { createTheme } from 'tona'
38
118
  import { background } from 'tona-plugins'
39
119
 
40
- createTheme().use(
120
+ const theme = createTheme()
121
+
122
+ theme.use(
41
123
  background,
42
- {},
43
124
  {
44
- // The configuration of the plugin
45
- opacitySelector: '#sideBar,#mainContent,#footer',
46
- }
125
+ // Theme-level defaults
126
+ enable: true,
127
+ value: '#f5f5f5',
128
+ },
129
+ {
130
+ // Plugin-specific options
131
+ opacitySelector: '#main',
132
+ },
47
133
  )
48
134
  ```
135
+
136
+ ## Creating Custom Plugins
137
+
138
+ ```typescript
139
+ import { defineOptions } from 'tona'
140
+
141
+ export function myPlugin(theme, devOptions, pluginOptions) {
142
+ const getOptions = defineOptions('myPlugin', {
143
+ enable: false,
144
+ color: '#000',
145
+ })
146
+
147
+ const options = getOptions(devOptions)
148
+
149
+ if (!options.enable) return
150
+
151
+ // Plugin logic here
152
+ document.body.style.color = options.color
153
+ }
154
+ ```
155
+
156
+ ## Related
157
+
158
+ - [tona](https://github.com/guangzan/tona/tree/main/packages/core) - Core framework
159
+ - [tona-options](https://github.com/guangzan/tona/tree/main/packages/options) - Pre-defined options
160
+ - [create-tona](https://github.com/guangzan/tona/tree/main/packages/create-tona) - Create themes
package/README.zh-CN.md ADDED
@@ -0,0 +1,160 @@
1
+ # tona-plugins
2
+
3
+ <p align="center">
4
+ <img src="../../assets/tona.png" alt="Tona" width="100" />
5
+ </p>
6
+
7
+ <p align="center">
8
+ Tona 主题的官方插件集合。
9
+ </p>
10
+
11
+ <p align="center">
12
+ <a href="https://www.npmjs.com/package/tona-plugins"><img src="https://img.shields.io/npm/v/tona-plugins?style=flat-square" alt="npm version"></a>
13
+ <a href="LICENSE"><img src="https://img.shields.io/npm/l/tona-plugins?style=flat-square" alt="license"></a>
14
+ </p>
15
+
16
+ [English](./README.md) | **中文**
17
+
18
+ ## 特性
19
+
20
+ - **30+ 插件** - 全面的插件集合
21
+ - **易于集成** - 简单的 `theme.use()` API
22
+ - **可配置** - 每个插件都有可自定义的选项
23
+ - **官方支持** - 由 Tona 团队维护
24
+
25
+ ## 安装
26
+
27
+ ```bash
28
+ npm install tona-plugins
29
+ ```
30
+
31
+ ```bash
32
+ pnpm add tona-plugins
33
+ ```
34
+
35
+ ```bash
36
+ yarn add tona-plugins
37
+ ```
38
+
39
+ ## 使用
40
+
41
+ ```typescript
42
+ import { createTheme } from 'tona'
43
+ import { background, darkMode, codeHighlight } from 'tona-plugins'
44
+
45
+ const theme = createTheme()
46
+
47
+ theme.use(background)
48
+ theme.use(darkMode)
49
+ theme.use(codeHighlight)
50
+ ```
51
+
52
+ ## 可用插件
53
+
54
+ ### UI 增强
55
+
56
+ | 插件 | 描述 |
57
+ | -------------- | ------------------- |
58
+ | `background` | 自定义背景图片/颜色 |
59
+ | `darkMode` | 暗黑模式切换 |
60
+ | `colorMode` | 颜色主题切换 |
61
+ | `clickEffects` | 点击动画效果 |
62
+ | `live2d` | Live2D 模型挂件 |
63
+
64
+ ### 内容
65
+
66
+ | 插件 | 描述 |
67
+ | ------------------ | ---------------- |
68
+ | `codeHighlight` | 语法高亮 |
69
+ | `codeCopy` | 复制代码按钮 |
70
+ | `codeLang` | 显示代码语言 |
71
+ | `codeLinenumbers` | 代码行号 |
72
+ | `codeTrafficLight` | Mac 风格窗口按钮 |
73
+ | `imagePreview` | 图片灯箱 |
74
+ | `notation` | 文本注释 |
75
+
76
+ ### 导航
77
+
78
+ | 插件 | 描述 |
79
+ | --------- | ------------ |
80
+ | `catalog` | 目录 |
81
+ | `tools` | 快速导航工具 |
82
+ | `footer` | 自定义页脚 |
83
+ | `qrcode` | 二维码生成器 |
84
+
85
+ ### 社交
86
+
87
+ | 插件 | 描述 |
88
+ | ----------------- | ------------ |
89
+ | `commentsAvatars` | 评论用户头像 |
90
+ | `emoji` | Emoji 支持 |
91
+ | `signature` | 文章签名 |
92
+
93
+ ### 媒体
94
+
95
+ | 插件 | 描述 |
96
+ | ------------- | -------------- |
97
+ | `musicPlayer` | 背景音乐播放器 |
98
+ | `barrage` | 弹幕 |
99
+ | `charts` | 数据可视化图表 |
100
+
101
+ ### 工具
102
+
103
+ | 插件 | 描述 |
104
+ | ---------- | ---------- |
105
+ | `notice` | 公告通知 |
106
+ | `toast` | Toast 通知 |
107
+ | `lock` | 内容保护 |
108
+ | `donation` | 捐赠按钮 |
109
+ | `license` | 许可证显示 |
110
+ | `webTag` | 网站标签 |
111
+
112
+ ## 插件配置
113
+
114
+ 每个插件都接受配置选项：
115
+
116
+ ```typescript
117
+ import { createTheme } from 'tona'
118
+ import { background } from 'tona-plugins'
119
+
120
+ const theme = createTheme()
121
+
122
+ theme.use(
123
+ background,
124
+ {
125
+ // 主题级默认值
126
+ enable: true,
127
+ value: '#f5f5f5',
128
+ },
129
+ {
130
+ // 插件特定选项
131
+ opacitySelector: '#main',
132
+ },
133
+ )
134
+ ```
135
+
136
+ ## 创建自定义插件
137
+
138
+ ```typescript
139
+ import { defineOptions } from 'tona'
140
+
141
+ export function myPlugin(theme, devOptions, pluginOptions) {
142
+ const getOptions = defineOptions('myPlugin', {
143
+ enable: false,
144
+ color: '#000',
145
+ })
146
+
147
+ const options = getOptions(devOptions)
148
+
149
+ if (!options.enable) return
150
+
151
+ // 插件逻辑
152
+ document.body.style.color = options.color
153
+ }
154
+ ```
155
+
156
+ ## 相关
157
+
158
+ - [tona](https://github.com/guangzan/tona/tree/main/packages/core) - 核心框架
159
+ - [tona-options](https://github.com/guangzan/tona/tree/main/packages/options) - 预定义选项
160
+ - [create-tona](https://github.com/guangzan/tona/tree/main/packages/create-tona) - 创建主题
package/package.json CHANGED
@@ -1,53 +1,54 @@
1
1
  {
2
2
  "name": "tona-plugins",
3
- "version": "1.0.21",
3
+ "version": "1.0.22",
4
4
  "description": "",
5
+ "keywords": [
6
+ "博客园"
7
+ ],
8
+ "homepage": "https://github.com/guangzan/tona/tree/main/packages/plugins#readme",
9
+ "bugs": {
10
+ "url": "https://github.com/guangzan/tona/issues"
11
+ },
12
+ "license": "MIT",
5
13
  "author": {
6
14
  "name": "guangzan",
7
- "url": "https://www.cnblogs.com/guangzan",
8
- "email": "guangzan1999@outlook.com"
15
+ "email": "guangzan1999@outlook.com",
16
+ "url": "https://www.cnblogs.com/guangzan"
9
17
  },
10
- "license": "MIT",
11
- "homepage": "https://github.com/guangzan/tona/tree/main/packages/plugins#readme",
12
18
  "repository": {
13
19
  "type": "git",
14
20
  "url": "git+https://github.com/guangzan/tona.git",
15
21
  "directory": "packages/plugins"
16
22
  },
17
- "bugs": {
18
- "url": "https://github.com/guangzan/tona/issues"
19
- },
20
- "keywords": [
21
- "博客园"
23
+ "files": [
24
+ "index.d.ts",
25
+ "src"
22
26
  ],
23
27
  "type": "module",
28
+ "main": "./src/index.js",
29
+ "module": "./src/index.js",
30
+ "types": "./index.d.ts",
24
31
  "exports": {
25
32
  ".": {
26
33
  "types": "./index.d.ts",
27
34
  "import": "./src/index.js"
28
35
  }
29
36
  },
30
- "main": "./src/index.js",
31
- "module": "./src/index.js",
32
- "types": "./index.d.ts",
33
- "files": [
34
- "index.d.ts",
35
- "src"
36
- ],
37
37
  "dependencies": {
38
38
  "notyf": "^3.10.0",
39
- "tona-options": "1.0.21",
40
- "tona": "1.0.21"
39
+ "tona": "1.0.22",
40
+ "tona-options": "1.0.22"
41
41
  },
42
42
  "devDependencies": {
43
- "@types/node": "^25.0.3",
44
- "sass": "^1.97.2",
45
- "vite": "^7.3.1",
43
+ "@types/node": "^25.5.0",
44
+ "sass": "^1.98.0",
45
+ "vite": "npm:@voidzero-dev/vite-plus-core@latest",
46
46
  "vite-plugin-html": "^3.2.2",
47
- "vite-plugin-singlefile": "^2.3.0",
48
- "tona-vite": "1.0.21"
47
+ "vite-plugin-singlefile": "^2.3.2",
48
+ "vite-plus": "latest",
49
+ "tona-vite": "1.0.22"
49
50
  },
50
51
  "scripts": {
51
- "dev": "vite"
52
+ "dev": "vp dev"
52
53
  }
53
54
  }
package/src/plugins/clickEffects/index.js CHANGED
@@ -71,9 +71,7 @@ ColorBall.prototype.fly = function (x, y, playCount, loopTimer = 300) {
71
71
  ball.style.opacity = 1
72
72
  }
73
73
  ball.style.transform = 'translate3d(0px, 0px, 0px) scale(1)'
74
- ball.style.transition = `transform 0.7s ${
75
- (curLoop * loopTimer) / 1000
76
- }s ease-out`
74
+ ball.style.transition = `transform 0.7s ${(curLoop * loopTimer) / 1000}s ease-out`
77
75
  ball.style.backgroundColor = getOneRandom(this.params.colors)
78
76
  fragment.appendChild(ball)
79
77
  ballElements.push(ball)
package/src/plugins/emoji/index.js CHANGED
@@ -34,9 +34,7 @@ const defaultEmojiList = [
34
34
  * 创建按钮
35
35
  */
36
36
  function createEmojiButton(buttonIcon) {
37
- return `<span class="qaq-btn" title="表情">${
38
- buttonIcon.length ? buttonIcon : '🍺'
39
- }</span>`
37
+ return `<span class="qaq-btn" title="表情">${buttonIcon.length ? buttonIcon : '🍺'}</span>`
40
38
  }
41
39
 
42
40
  /**
package/src/plugins/notice/index.scss CHANGED
@@ -26,7 +26,17 @@
26
26
  left: calc(-1 * var(--borderWidth));
27
27
  height: calc(100% + var(--borderWidth) * 2);
28
28
  width: calc(100% + var(--borderWidth) * 2);
29
- background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
29
+ background: linear-gradient(
30
+ 60deg,
31
+ #f79533,
32
+ #f37055,
33
+ #ef4e7b,
34
+ #a166ab,
35
+ #5073b8,
36
+ #1098ad,
37
+ #07b39b,
38
+ #6fba82
39
+ );
30
40
  border-radius: calc(2 * var(--borderWidth));
31
41
  z-index: -1;
32
42
  animation: animatedgradient 3s ease alternate infinite;