🚩系列回顧
- 初識插件機制并實現自動壓縮粘貼的圖片
- 國際化 I18N 與配置多語言
- 自定義斜線命令 SlashCommand
- 發布到官方插件市場
開源地址：logseq-plugin-image-tiny，歡迎來?。
🐞 插件上線問題記錄
問題描述
本地插件開發完成后，我打包package.json、index.js、logo.png文件到另一臺電腦（未聯網），結果發現插件加載失敗，從控制臺上看，是因為無法從互聯網下載所需要的依賴（lsplugin.user.min.js）。
解決辦法
經過一番探索，發現每個插件其實都是一個iframe加載對應的index.html（如果插件本身沒有此文件，logseq 會自動創建）。而我的插件沒有用到打包工具，發布時沒有打包@logseq/libs依賴，所以需要從互聯網下載，導致了上述的問題。
所以解決方案就很明了啦，一是增加打包配置，二是手動依賴。這里我果斷選擇后者，等之后有時間再研究怎么配置打包工具。
index.html 內容如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>logseq-image-tiny</title><script src="lsplugin.user.min.js"></script>
</head><body><script type="module" src="index.js"></script>
</body></html>
📦 插件市場
logseq 插件開發完成后，我們可以發布到官方插件市場。之后，用戶在 logseq 內可以檢索并安裝我們的插件（想想就滿滿的成就感😎）。
此時，我們需要安裝官方教程進行配置。
? 發布流程
- Fork this repo to your Github account.
- Create a package directory under
./packagesroot based on your plugin name. - Write a manifest.json file to the package root. Valid fields as follows:
title- A title for plugin list item display.description- A short description about your plugin.author- The author’s name.repo- The GitHub repository identifier, like{user}/{repo}.icon- [optional] A logo for better recognition. default:""theme- [optional] A theme plugin? default:falsesponsors- [optional] Sponsor external links. default:[]web- [optional] Whether the web browser platform is supported. default:falseeffect- [optional] Whether the sandbox is running under the same origin with host. default:falseunsupportedGraphType- [optional] Flag to indicate that which graph type does not to be supported. value:file|db
- Make a Github Pull Request 😃
🚀 發布自己的插件
Fork官方插件市場倉庫
這樣我們就能修改倉庫內容啦。
編寫插件信息
我們在./packages目錄下新建插件同名目錄，并添加manifest.json文件，內容如下：
{"title": "Image Auto Tiny","description": "粘貼圖片到筆記時，自動轉換為 WebP/AVIF 格式。A plugin that automatically converts images to webp/avi format to reduce image storage volume.","author": "0604hx/集成顯卡","repo": "0604hx/logseq-plugin-image-tiny","icon": "./icon.png","effect": true
}
配置工作流
logseq 插件需要配置一個有效的 github CI 工作流，我們在項目根目錄下創建文件.github/workflows/main.yml，內容如下（根據實際情況填寫）：
# This is a basic workflow to help you get started with Actionsname: Releaseenv:PLUGIN_NAME: logseq-image-tiny# Controls when the workflow will run
on:push:tags:- "*" # Push events to matching any tag format, i.e. 1.0, 20.15.10# Allows you to run this workflow manually from the Actions tabworkflow_dispatch:# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:release:# The type of runner that the job will run onruns-on: ubuntu-latest# Steps represent a sequence of tasks that will be executed as part of the jobsteps:# Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it- uses: actions/checkout@v2- uses: actions/setup-node@v2with:node-version: "14.x"- name: Buildid: buildrun: |mkdir ${{ env.PLUGIN_NAME }}cp README.md package.json logo.png lsplugin.user.min.js index.js ${{ env.PLUGIN_NAME }}zip -r ${{ env.PLUGIN_NAME }}.zip ${{ env.PLUGIN_NAME }}lsecho "::set-output name=tag_name::$(git tag --sort version:refname | tail -n 1)"- name: Create Releaseid: create_releaseuses: actions/create-release@v1env:GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}VERSION: ${{ github.ref }}with:tag_name: ${{ github.ref }}release_name: ${{ github.ref }}draft: falseprerelease: false- name: Upload zip fileid: upload_zipuses: actions/upload-release-asset@v1env:GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}with:upload_url: ${{ steps.create_release.outputs.upload_url }}asset_path: ./${{ env.PLUGIN_NAME }}.zipasset_name: ${{ env.PLUGIN_NAME }}-${{ steps.build.outputs.tag_name }}.zipasset_content_type: application/zip
提交時出現如下錯誤：
refusing to allow a Personal Access Token to create or update workflow `.github/workflows/main.yml` without `workflow` scope
是因為我們的 token 沒有相應權限，請到TOKEN管理頁添加對應權限即可。
提交Pull Request
插件信息填寫完成后，提交（commit）變動到 github，然后發起一個 Pull Request，接著等待官方的審核（通常需要幾天）。
發布版本
官方同意 PR 后，就能通過插件市場檢索到我們的插件啦🎉。
溫馨提示
插件應該填寫README.md，清晰描述插件的功能及使用方式，最好有英文噢。
![[netty5: ByteToMessageCodec MessageToByteEncoder ByteToMessageDecoder]-源碼分析](http://pic.xiahunao.cn/[netty5: ByteToMessageCodec MessageToByteEncoder ByteToMessageDecoder]-源碼分析)
