Hexo-tag-ogp-link-preview NPM

hexo-tag-ogp-link-preview

A Hexo tag plugin for embedding link preview by OpenGraph on article.

Installation

npm install hexo-tag-ogp-link-preview

Usage

Write like below to your hexo article markdown file:

{% link_preview url [target] [rel] [loading] %}
[Content]
{% endlink_preview %}

or you are able to use "Named Parameter":

{% link_preview url [rel:{rel_value}] [target:{target_value}] [loading:{loading_value}] %}
[Content]
{% endlink_preview %}

Tag arguments

Notice: All optionally parameters (except for the required url parameter) are able to use "Named Parameter".

Name	Required?	Default	Description
`url`	Yes		This parameter is a target of the link preview.
`target`	No	`_blank`	Specify a `target` attribute of the anchor element.One of `_self`, `_blank`, `_parent`, or `_top`.
`rel`	No	`nofollow`	Specify a `rel` attribute of the anchor element.One of `external`, `nofollow`, `noopener`, `noreferrer`, or `opener`.
`loading`	No	`lazy`	Specify a `loading` attribute of the image element.One of `lazy`, `eager`, or `none`.If specify a `none`, remove loading attribute from image element.

Tag content

content is fallback text which use when failed to get OpenGraph data from url.

Configuration

You write like below to hexo configuration file _config.yml:

link_preview:
  class_name:
    anchor_link: link-preview
    image: not-gallery-item
  description_length: 140
  disguise_crawler: true

Setting values

Notice: All setting values are NOT required.

Name	type	Default	Description
`class_name`	`string` or `object`	`link-preview`	If you are specified `string`, set a `class` attribute of the anchor element only.If you are specified `object`, set each a `class` attribute of the anchor element and the image element.
`class_name`.`anchor_link`	`string`	`link-preview`	Set a `class` attribute of the anchor element.
`class_name`.`image`	`string`		Set a `class` attribute of the image element.If you are not specify (empty string, etc.), nothing to set.
`description_length`	`number`	`140`	It sliced to fit if a number of character of the `og:Description` exceeds the specified number value.
`disguise_crawler`	`boolean`	`true`	If scraper for OpenGraph want to disguise to crawler, set `true`.Otherwise, set to `false`.

Example

Write a following to your hexo article markdown file:

{% link_preview http://www.example.com/ loading:lazy %}
fallback Text
{% endlink_preview %}

When scraper get OpenGraph successfully, generated html like blow:

<a href="http://www.example.com/" target="_blank" rel="nofollow" class="link-preview">
    <div class="og-image">
        <img src="https://www.example.com/image.png" alt="example image" class="not-gallery-item" loading="lazy">
    </div>
    <div class="descriptions">
        <div class="og-title">title text</div>
        <div class="og-description">description text</div>
    </div>
</a>

When scraper fail to get OpenGraph, generated html like blow:

<a href="http://www.example.com/">fallback Text</a>

hexo tag helper plugin link preview og ogp opengraph open-graph open-graph-protocol

hexo-util open-graph-scraper

@everything-registry/sub-chunk-1844

1.1.1

2 years ago

1.1.0

2 years ago

1.0.0

2 years ago