hexo-filter-custom-link

Customize the rendered HTML of links. 自定义链接渲染后的 HTML。

This plugin can unify the rendered HTML of Hexo links. By specifying special links, we can apply different templates. If you want to customize Obsidian links, try this plugin: hexo-filter-titlebased-link. For more on how to customize your HTML links, check out my blog post (Written in Chinese).

插件可以统一 Hexo 链接渲染后的结果，还可以指定部分链接应用不同的 HTML 模板。 如果你想自定义 Obsidian 的双向连接，你可以试试这个插件： hexo-filter-titlebased-link。 更多自定义链接 HTML 的玩法可以参考我的博客文章 自定义 Hexo 中的超链接样式。

Installation

npm install hexo-filter-custom-link --save

Add this option in your _config.yml:

# hexo-filter-custom-link
# https://github.com/uuanqin/hexo-filter-custom-link
custom_link:
  enable: true   # Enable this plugin
  general_template: ''
  custom_templates:
    - name: TEMP1
      template: '<a class="my-link-1" href="__URL__">__TEXT__</a>'
      spacing: 0
    - name: TEMP2
      template: '<a class="my-link-2" href="__URL__">__TEXT__</a>'
      spacing: 0

Customize Your Links

The basic link rendering process in Hexo is:

Markdown                     ====>      HTML
[name](https://example.com) ====>      <a href="https://example.com">name</a>

Plugins allow us to customize the rendered HTML of our links. By using placeholders like __URL__ __TEXT__, we can design a custom template.

For example, if your option is:

custom_link:
  enable: true   # Enable this plugin
  general_template: '<a class="my-link" href="__URL__">__TEXT__</a>'

Then the resultant HTML of the link will be:

<a class="my-link" href="https://example.com">name</a>

More Templates

You can add a template name to specify which template should be applied to the link. The template name should be quoted by %% and is located in the start of link title.

For example, here is the Markdown text you wrote in the post:

[name](https://example.com "%%TEMP%%")

And your option is:

custom_link:
  enable: true   # Enable this plugin
  general_template: '' # if yoy leave this option blank, generic links are not templated
  custom_templates:
    - name: TEMP
      template: '<a class="my-link-2" href="__URL__">__TEXT__</a>'

Then the resultant HTML of the link will be:

<a class="my-link-2" href="https://example.com">name</a>

Spacing

For complex templates, we can adjust the spacing to separate the HTML template from Markdown.

custom_link:
  enable: true   # Enable this plugin
  general_template: '' # if you leave this option blank, generic links are not templated
  general_spacing: 0
  custom_templates:
    - name: TEMP
      template: ''
      spacing: 2

Placeholders

A placeholder can be reused multiple times in a template.

Built-in placeholders:

• __TEXT__ This is the link text.
• __URL__ This is the target URL.
• __TITLE__ This is the title of link.

We can add more custom placeholders whose name is quoted with __, and pass values to placeholders just as we do with URLs.

Here is an example:

[name](url "%%TEMP%%PARAM1=val1&PARAM2=val2")

Your template can be:

custom_link:
  enable: true   # Enable this plugin
  general_template: '' # if yoy leave this option blank, generic links are not templated
  general_spacing: 0
  custom_templates:
    - name: TEMP
      template: |
        <p>
          This is param1: __PARAM1__,
          This is param2: __PARAM2__.
        </p>
      spacing: 2

Related Hexo Plugins

• hexo-filter-titlebased-link: Transfer wiki links (based on the title) in Markdown files to permalink. 将基于标题的双向链接转换为 Hexo 设定的永久链接。
• hexo-filter-link-post: Transfer relative post link in markdown file to post link. 将文件里的通过相对路径引用的 markdown 文件转为对应的文章的链接。

License

MIT