Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including hexo-tag-link-preview with all npm packages installed. Try it out:

var hexoTagLinkPreview = require("hexo-tag-link-preview")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

hexo-tag-link-preview v1.2.1

Embed a link preview on your Hexo article.

hexo-tag-link-preview

Embed a link preview on your Hexo article.

NPM

npm npm hexo Dependency Status Maintainability

Installation

npm install hexo-tag-link-preview

or

yarn add hexo-tag-link-preview

Usage

{% linkPreview url target rel %}

Example:

{% linkPreview https://www.amazon.com/ _blank nofollow %}

it generates HTML:

<a href="https://www.amazon.com" class="link-preview" target="_blank" rel="nofollow">
  <div class="link-area">
    <div class="og-image">
      <img src="http://g-ec2.images-amazon.com/images/G/01/social/api-share/amazon_logo_500500._V323939215_.png">
    </div>
    <div class="descriptions">
      <div class="og-title">Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs &amp; more</div>
      <div class="og-description">Online shopping from the earth's biggest selection of books, magazines, music, DVDs, videos, electronics, computers, software, apparel &amp; accessories, shoes, jewelry, tools &amp; hardware, housewares, furniture, sporting goods, beauty &amp; personal care, broadband &amp; dsl, gourmet food &amp; just about anything else.</div>
    </div>
  </div>
</a>

Explantion of attributes

  1. url - An URL for the link. Required.
  2. target attribute - if you need to open link with another window, you must set here "_blank".
  3. rel attribute - if you need to link with rel="nofollow", set here "nofollow".

Target attribute and rel attribute can be abbreviated. But if only target attribute abbreviated, will not work correctly.

If you need to open same window and set rel="nofollow", please write down like below.

Example:

{% linkPreview https://www.amazon.com/ _self nofollow %}

Output:

<a href="https://www.amazon.com" class="link-preview" target="_self" rel="nofollow">

See also

Options

className

You can provide top-level class name of this preview link HTML.
(Default: link-preview)

descriptionLength

You can provide number of character in og-description.
(Default: 140)

Example

_config.yml:

linkPreview:
  className: sample
  descriptionLength: 6

it generates:

<a href="https://www.amazon.com" class="sample">
  <div class="link-area">
    <div class="og-image">
      <img src="http://g-ec2.images-amazon.com/images/G/01/social/api-share/amazon_logo_500500._V323939215_.png">
    </div>
    <div class="descriptions">
      <div class="og-title">Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs &amp; more</div>
      <div class="og-description">Online</div>
    </div>
  </div>
</a>

License

MIT

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free