远方的灯塔 - 专注于服务端技术分享 远方的灯塔 - 专注于服务端技术分享
首页
  • Java SE
  • Struts2
  • Hibernate
  • MyBatis
  • JAX-WS
  • 并发
  • 分布式
  • Git
  • 文章分类
  • 文章标签
  • 文章归档
  • 《C程序设计语言》
心情随笔
友情链接
给我留言 (opens new window)
关于我
GitHub (opens new window)

Terwer Green

一个后端老菜鸟
首页
  • Java SE
  • Struts2
  • Hibernate
  • MyBatis
  • JAX-WS
  • 并发
  • 分布式
  • Git
  • 文章分类
  • 文章标签
  • 文章归档
  • 《C程序设计语言》
心情随笔
友情链接
给我留言 (opens new window)
关于我
GitHub (opens new window)
  • 把npm依赖转换为本地依赖
  • 从零开始写一个vuepress插件
    • 初始化插件项目
    • 插件高级开发
      • 添加插件配置
  • dojo利用promise实现多个异步校验
  • 使用nodejs实现ed25519的公钥加密和私钥解密
  • js正则替换和删除字符串
  • 纯css实现下拉菜单
  • css背景上下渐变的实现
  • npm切换为阿里云国内源码
  • vdoing主题vuepress的v1版本集成Artalk
  • node发送邮件
  • 两栏布局左右拖拽效果实现方案
  • 国际化
  • vue3的reactive和ref的区别
  • Next-js组件使用泛型类型传递异步数据
  • 从零开始使用react写一个随机变色的标签组件
  • yarn和npm设置国内镜像源
  • vite使用nodeJS内置的模块
  • 使用vitest对vite项目进行单元测试
  • Web字体简介_TTF_OTF_WOFF_EOT以及SVG
  • Chrome插件开发background_js支持跨域请求与返回async和await的处理
  • Nuxt3和Vue3集成FontAwesome
  • babel运行nodejs
  • 使用cross-fetch替换node-fetch和isomorphic-fetch
  • dotenv加载变量
  • MacOS解决npm权限不足问题
  • 在Vite+TypeScript的项目中使用~和@代替src根路径的方法
  • 前端开发
terwer
2022-11-26
目录

从零开始写一个vuepress插件

# 初始化插件项目

  1. 在任意目录新建一个插件目录,我这里在 /pkg/vuepress-plugin-simple-encrypt

    mkdir /pkg/vuepress-plugin-simple-encrypt
    
    1

    image-20220424215029271

  2. 进入该目录,初始化项目

    yarn init
    
    1

    输入插件名 vuepress-plugin-simple-encrypt ,入口文件名 index.js ,其他选项对应填写即可。

    image-20220424215319909

    初始化之后,package.json 的文件内容:

    {
      "name": "vuepress-plugin-simple-encrypt",
      "version": "1.0.0",
      "description": "a simple encrypt and decrypt for vuepress",
      "main": "index.js",
      "scripts": {
        "test": "yarn test"
      },
      "repository": {
        "type": "git",
        "url": "git+https://github.com/terwer/vuepress-plugin-simple-encrypt.git"
      },
      "keywords": [
        "encrypt",
        "decrypt",
        "vuepress"
      ],
      "author": "terwer",
      "license": "MIT",
      "bugs": {
        "url": "https://github.com/terwer/vuepress-plugin-simple-encrypt/issues"
      },
      "homepage": "https://github.com/terwer/vuepress-plugin-simple-encrypt#readme"
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
  3. 编写入口文件 index.js

    module.exports = (options, ctx) => {
        return {
            name: 'vuepress-plugin-simple-encrypt',
            async ready() {
                console.log('Hello World!');
            }
        }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
  4. 注入插件到 vuepress。在 config.ts 文件的插件节点加上我们的插件,注意使用相对目录目录

    [
      require('../../pkg/vuepress-plugin-simple-encrypt'), // 主要用于文章部分加密
      {
      }
    ]
    
    1
    2
    3
    4
    5
  5. 启动项目 yarn dev ,正常情况可以看到输出 Hello World

image-20220424215853496

# 插件高级开发

# 添加插件配置

config.ts 修改插件对应配置如下

[
  require('../../pkg/vuepress-plugin-simple-encrypt'), // 主要用于文章部分加密
  {
    contentTitle: '加密内容',
    unencryptedText: '未加密内容',
    encryptedText: '该内容已加密,如需访问,请留言或者联系 youweics@163.com 获取密码。',
    decryptedText: '文章已成功解密。',
    decryptButtonText: '查看',
    decryptFailText: '密码错误!',
    unencryptedIcon: undefined,
    encryptedIcon: undefined,
    decryptedIcon: undefined
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
编辑 (opens new window)
#插件#目录#初始化#从零开始#vuepress#plugin
上次更新: 2023/01/02, 03:49:04
把npm依赖转换为本地依赖
dojo利用promise实现多个异步校验

← 把npm依赖转换为本地依赖 dojo利用promise实现多个异步校验→

最近更新
01
Fri Dec 16 2022 00:00:00 GMT+0000 (Coordinated Universal Time)
12-16
02
挂件模式用挂载菜单的方式使用
12-15
03
README
12-07
更多文章>
Theme by Vdoing | Copyright © 2011-2023 Terwer Green | MIT License | 粤ICP备2022020721号-1 | 百度统计
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式