hexo-tag-bootstrap

    0.2.2 • Public • Published

    hexo-tag-bootstrap

    npm npm

    Intro

    hexo-tag-bootstrap is a collections of Hexo tag plugins.

    It wraps most Twitter-Bootstrap 4 components in a uniformed way. It can be used independently, though I highly recommend you to use it with Freemind, a Bootstrap theme for Hexo.

    Install

    $ npm install hexo-tag-bootstrap --save

    Make sure to have the bootstrap css in you template before using any of these!

    Components

    • textcolor - Convey meaning through color with a handful of emphasis utility classes.
    • button - Inserts a button with target links, text and specified color. ** {% btn url text (color=primary) (size=def|sm|lg) (outline|block) %}
    • label - Inserts a label with text and specified color.
    • pill - Inserts a label with text and specified color. ** {% badge color text %}
    • badge - Inserts a badge with text.
    • alert - Inserts alert messages with text and specified color.
    • card - Add a card control ** carddeck - use with cards to combine multiples ** cardgroup - similar to carddeck
    • jumbo - jumbotron
    • carousel - carousel tag - each img within will create a new "slide"
    • row - add a grid row
    • col - add a column within a grid row

    For most options like style (primary, secondary, success, danger, warning, info, light, dark) simply set the option, the order normally does not matter.

    Other components in the content (i.e. images) can be applied using classes and the information on http://getbootstrap.com/docs/4.0/content/images/

    More info: http://wzpan.github.io/hexo-theme-freemind-blog/2014/03/16/tag-plugins/

    Grid

    The bootstrap grid is best explained at http://getbootstrap.com/docs/4.0/layout/grid/

    To use it with hexo, simply add a row and within add cols

    {% row %}
      {% col  %}
        a column
      {% endcol  %}
    {% endrow %}
    

    you can add any number of sm/md/lg/xl classes to adjus the colos (you can omit the .col-:

    {% row %}
      {% col md-4 xl-4 %} col a {% endcol %} 
      {% col md-6 xl-4 %} col b {% endcol %} 
      {% col md-2 xl-4 %} col c {% endcol %} 
    {% endrow %}
    

    The card also supports col directly, by simply adding col or col=4 (you can use the same class prefixes as above):

    {% row %}
      {% col md-4 %}  a column  {% endcol  %}
      {% card col=md-4 "Cool card" %} a column  {% endcard  %}
      {% col md-4 %}  a column  {% endcol  %}
    {% endrow %}
    

    Samples

    {%btn http://www.google.com "Lets visit Google" danger lg outline%}
    {%pill test%}
    {%pill success Successfull!!!%}
    

    Row with 3 entrieS: 2 card and one col

    {% row %}
    
    {% col md-4 %}
    This is a test
    * One
    * Two
    * Three
    {% endcol %}
    
    {% card col=md-4 "Cool card" %}
    Our cool stuff:
    * coole Features
    * something else
    {% endcard %}
    
    {% card col=md-4  %}
    # heading 1
    ### sub heading 
    This is Some content
    * pos 1
    * pos 2
    {% endcard %}
    
    {% endrow %}
    

    Carousel (with 2 images, first with caption)

    {% carousel nav indicators %}
    {% img d-block w-100 /stock/img1.jpg %}
    # First Slide
    This is a label for the slide :) 
    {% img d-block w-100 /stock/img2.jpg %}
    {% endcarousel %}
    

    Dependencies

    Tips for non bootstrap-based theme

    If you're using a Hexo theme that is not built on Twitter Bootstrap, you can have a try at a minimal CSS provided by @noraj1337 which wraps all the neccessary stylesheets for the above plugins. For example for stylus theme templates include tag.css like this @import "tag.css" at the end of themes/theme_name/source/css/style.styl and place tag.css in themes/theme_name/source/css/.

    Keywords

    none

    Install

    npm i hexo-tag-bootstrap

    DownloadsWeekly Downloads

    13

    Version

    0.2.2

    License

    none

    Unpacked Size

    28.8 kB

    Total Files

    23

    Last publish

    Collaborators

    • hahack
    • wzpan