hexo-tag-blog-card

Embed a blog card on your Hexo article.

Features

• OGP(Open Graph Protocol) based blog card
• Supports favicon and site name
• Supports Hatena blog card style
• Supports style configuration

Installation

npm install hexo-tag-blog-card

Usage

{% blogCard <url> [target:<target>] [rel:<rel>] [hatena:<true/false>] %}

Example:

{% blogCard https://www.amazon.com/ target:_blank rel:nofollow %}

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".
4. hatena - if you can use Hatena Blog Card, set "true" (default: use global settings(useHatena))

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.

Options

className

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

descriptionLength

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

faviconAPI

You can provide a favicon API with variables($URL, $DOMAIN). (Default: http://favicon.hatena.ne.jp/?url=$URL)

useHatena

You can use Hatena Blog Card if you set true. (Default: false)

timeout

You can provide number of timeout(milliseconds). (Default: 4000)

You can use Hatena Blog Card if you set true. (Default: false)

Example

_config.yml:

blogCard:
  className: sample
  descriptionLength: 6
  faviconAPI: http://www.google.com/s2/favicons?domain=$DOMAIN

or

blogCard:
  className: sample
  useHatena: true

Style

You can customize the style.

Example:

View in CodePen

Thanks

This plugin refers to the following OSS resources:

• https://github.com/minamo173/hexo-tag-link-preview
• https://github.com/Gisonrg/hexo-github-card
• https://github.com/shundroid/hexo-embed-hatena-blog-card

Thanks to them.

License

MIT