hexo-tag-ogp-link-preview
v1.1.1
Published
A Hexo tag plugin for embedding link preview by OpenGraph on article.
Downloads
125
Maintainers
Readme
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>