VSCode Hexo Utils

A sidebar for Hexo blog system.

Features

• Create new article with exists template
• Sidebar, include tags, categories, posts and drafts
• Front Matter completion for tags and categories (Thanks ruanimal)
• Front Matter shortcut action buttons (CodeLens) to select tags, update or insert date/updated fields (Thanks ruanimal)
• Preview image with assets folder
• Hexo tag syntax highlight and hexo snippets
• Paste image directly from clipboard, default shortcut is ctrl+alt+v. (Thanks vscode-paste-image project)
• Upload all local images in current file, it will replace the local path with the uploaded URL and keep the original path as a comment.
• Support remote development
• Automatically open Markdown side preview when opening a blog post (Thanks ruanimal)
• Deploy button in editor title bar to publish your blog with one click (Thanks ruanimal)
• And more ...

Extension Settings

• hexo.sortMethod: Controls posts(drafts) and categories(tags) sorted method, default sort by name.
• hexo.includeDraft: Controls whether include drafts in tag and category view container, default false.
• hexo.hexoProjectRoot: Hexo project path(relative to current workspace root), default is workspace root.
• hexo.markdown.resource: Controls whether resolve image with hexo resource folder, default is true.
• hexo.markdown.autoPreview: Controls whether automatically trigger markdown side preview when opening a blog post, default false.
• hexo.upload: Controls whether upload image when use paste image command.
• hexo.uploadType: Support imgchr, tencentoss, custom.
• hexo.uploadImgchr: Account settings for https://imgchr.com/ site. Only available when hexo.upload is true.
• hexo.uploadTencentOSS: Account settings for tencent OSS service. Only available when hexo.upload is true.
• hexo.uploadCustom: Custom upload server configuration. Only available when hexo.upload is true.
• hexo.generateTimeFormat: The time format when generate new article, default is ISO format. (time-format-tokens)
• hexo.assetFolderType: Paste image folder type. (if post, paste image to current post folder, else the image would be at global folder /sources/images/<__post>/), see #89
• hexo.deploy.command: Custom deploy command, default npx hexo deploy. The environment variable HEXO_ROOT will be set to the hexo project root path.
• hexo.deploy.showButton: Controls whether show deploy button on editor title, default false.

Custom Upload Server Example

If you want to use a custom upload server, you can configure it as follows:

{
  "hexo.uploadType": "custom",
  "hexo.uploadCustom": {
    "url": "https://xxxx.com/upload",
    "method": "POST",
    "fileKey": "file",
    "responseUrlKey": "data.url",
    "headers": {
      "Authorization": "Bearer your_token"
    },
    "extraFormData": {
      "account_id": "",
      "secret_access_key": ""
    }
  }
}

• url: The API endpoint for uploading images.
• method: HTTP method, default is POST.
• fileKey: The form-data key name for the file, default is file.
• responseUrlKey: The path to the image URL in the response JSON (e.g., url or data.url).
• headers: Optional HTTP headers.
• extraFormData: Optional additional form-data fields.

Known Issues

If you have found any bugs. Please open an issue

Q&A

1. Markdown Snippet Prefix Does Not Trigger Snippet

2. If you are using this extension to connect to a remote server via SSH, then you need to install this extension by install in SSH:xxx to extend VSCode's Markdown rendering capabilities.

3. If you have opened multiple folders in one workspace, you need to set the Hexo project as the first opened folder.

Release Notes

See releases.

Enjoy!