Skip to content

Add tabs on your pages with this Jekyll plugin

Notifications You must be signed in to change notification settings

NejcZdovc/jekyll-tabs

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Forked from https://github.com/Ovski4/jekyll-tabs.

This gem just fixes template and JS bug, so that it plays nicely with Github Pages.


Jekyll Tabs

This Jekyll plugin provides tags used to add tabs in your content. It is heavily inspired from https://github.com/clustergarage/jekyll-code-tabs.

  • It works with multiple tab panels on the same page
  • It does not require a specific javascript framework

Installation

Install the plugin

Add this line to your Gemfile:

group :jekyll_plugins do
  
  gem "jekyll-tabs"
end

Add in you _config.yml:

plugins:
  - jekyll-tabs

And then execute:

$ bundle

and put this in your _config.yml

plugins:
  - jekyll-tabs

Add the javascripts

Copy the content of this file in your public folder, let's say public/js/tabs.js. Include the script in your layout, for instance in layouts/default.html

<!DOCTYPE html>
<html lang="en-us">
  {% include head.html %}
  <body>
      {{ content }}
    <script src="/public/js/tabs.js"></script>
  </body>
</html>

Add some style to the tabs

Feel free to style it the way you want. Here is an example.

Create a file called custom.css in public/css with this content. Include it in _include/head.html

<link rel="stylesheet" href="/public/css/custom.css">

That's it

Usage

Create the markup

### First tabs

{% tabs log %}

{% tab log php %}
```php
var_dump('hello');
```
{% endtab %}

{% tab log js %}
```javascript
console.log('hello');
```
{% endtab %}

{% tab log ruby %}
```javascript
pputs 'hello'
```
{% endtab %}

{% endtabs %}

### Second tabs

{% tabs data-struct %}

{% tab data-struct yaml %}
```yaml
hello:
  - 'whatsup'
  - 'hi'
```
{% endtab %}

{% tab data-struct json %}
```json
{
    "hello": ["whatsup", "hi"]
}
```
{% endtab %}

{% endtabs %}

Here is the result:

Image of Yaktocat

Characters before the first space must be the same between tabs of the same scope (log and data-struct in this example). Every characters following will be displayed as the tab label.

About

Add tabs on your pages with this Jekyll plugin

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Ruby 84.3%
  • HTML 15.7%