hexo-tag-owlplus

This project is based on hexo-tag-owl. Different than owl, this project replace <embed> with <iframe>.

Original auther: m80126colin

TODO:

embed to iframe

• [x] Bilibili
• [ ] Tudou
• [ ] Tencent
• [ ] Youku

An useful media tag for Hexo 3.x, Demo page

Features

• Various videos and images sources embedding
• Support videos website
  • Youtube
  • Niconico
  • Bilibili
  • Vimeo
  • Tudou
  • Youku
  • Tencent
  • TED
• Support images sources
  • Local images
  • Giphy
• Auto stylesheet embedding

Installation

Run the following command in the root directory of hexo:

npm install hexo-tag-owlplus --save

Introduction

Component Concept

All components are wrapped by a <div> tag with several classes. All components have at least one class .owlplus-media:

<div class="owlplus-media">[component]</div>

Auto Stylesheet Embedding

Because the components are lack of CSS, everyone can add some CSS for one's preference. Here provide a default CSS written in stylus at lib/asset/css.styl.

owlplus:
  css: default
  file: owlplus.css

• css: whether insert default stylesheet or not, with following values
  • default: use default stylesheet at lib/asset/css.styl
  • custom: use custom stylesheet with path at file
  • none: unable this feature
  • default values: none
• file: assign the path of stylesheet when css is not none, and default value is owlplus.css

Videos

Every components of this category have additional class .owlplus-video.

<div class="owlplus-media owlplus-video">[component]</div>

Each videos source will add additional class .owlplus-[source]:

• Youtube: .owlplus-youtube
• Niconico: .owlplus-niconico
• Bilibili: .owlplus-bilibili
• Vimeo: .owlplus-vimeo
• Tudou: .owlplus-tudou
• Youku: .owlplus-youku
• Tencent: .owlplus-tencent
• TED: .owlplus-ted

Usage

{% owlplus youtube youtube_id %}
{% owlplus niconico niconico_id [type] %}
{% owlplus bilibili bilibili_id [page] %}
{% owlplus vimeo vimeo_id %}
{% owlplus tudou tudou_id %}
{% owlplus youku youku_id %}
{% owlplus tencent tencent_id %}
{% owlplus ted ted_id [lang] %}

• youtube_id - video id on Youtube
• vimeo_id - video id in Vimeo.
• Niconico
  • niconico_id - video id in Niconico.
  • type - embeded type. There are only thumb and watch two options. Default is set as thumb.
    • thumb: set nico in thumb mode with extra class .niconico-thumb
    • watch: set nico in watch mode with extra class .niconico-watch
• Bilibili
  • bilibili_id - video id in Bilibili. You can use either av247371 or 247371.
  • page - if video have several clips, you can add a number indicated the video.
• tudou_id - video id in Tudou.
• youku_id - video id in Youku. You can use either id_XMTc3MzcxMjQw or XMTc3MzcxMjQw.
• tencent_id - video id in Tencent Video.
• TED
  • ted_id - video id in TED.
  • lang - subtitle language for TED videos.

Examples

{% owlplus youtube YtuAOT_c2EA %}
{% owlplus niconico sm1494658 %}
{% owlplus niconico sm1494658 watch %}
{% owlplus bilibili av247371 %}
{% owlplus bilibili 247371 %}
{% owlplus bilibili av367901 2 %}
{% owlplus vimeo 5566538 %}
{% owlplus tudou pRsx83aRLLs %}
{% owlplus youku id_XMTc3MzcxMjQw %}
{% owlplus tencent o03134mlm8j %}
{% owlplus ted gero_miesenboeck zh-cn %}

Images

Every components of this category have additional class .owlplus-image.

<div class="owlplus-media owlplus-image">[component]</div>

Local Images

Insert your image from blog's path.

Usage

{% owlplus local image_path %}

• image_path - relative path from your blog.

Example

{% owlplus local img/img.jpg %}
{% owlplus local another-img.gif %}

Giphy

Insert your gif from Giphy.

Usage

{% owlplus giphy giphy_id %}

• giphy_id - giphy id

Example

{% owlplus giphy AxqJJOBkWHXW %}

Contributors

• Tao Wang: Tencent (騰訊視頻) plugin function
• Riff: TED videos plugin support

License

MIT