This is a Jekyll tags plugin to add bulma style tabs to the GitHub pages along with the bulma-clean-theme.
This plugin was created based on the Jekyll Tabs plugin. Like the Jekyll Tabs does, Jekyll Bulma Tabs has features:
Add the plugin in the Jekyll GitHub pages Gemfile
.
group :jekyll_plugins do
# ... other gems
gem "jekyll-bulma-tabs"
end
Also, add the plugin in the Jekyll Github pages _config.yml
.
plugins:
- jekyll-bulma-tabs
Run the command below to install the plugin.
bundle install
Copy JavaScript and CSS files to the Jekyll Github pages public directory.
In general, the places are assets/js
and assets/css
.
Add tabs.js
and tabs.css
to GitHub pages' header/footer area. Exactly what file depends on how the GitHub pages are
created. For example, if the theme is bulma-clean-theme, the tabs.js
goes to _includes/footer-scripts.html
while the
tabs.css
goes to _includes/head.html
.
Example:
_includes/footer-scripts.html
<script src="{{ "/assets/js/tabs.js" | prepend: site.baseurl }}" type="text/javascript"></script>
_includes/head.html
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/tabs.css">
The markup looks like below:
{% tabs data-struct is-centered is-boxed %}
{% tab data-struct yaml %}
```yaml
hello:
- 'whatsup'
- 'hi'
```
{% endtab %}
{% tab data-struct json %}
```json
{
"hello": ["whatsup", "hi"]
}
```
{% endtab %}
{% endtabs %}
The syntax is:
{% tabs tabs-group-id bulma-tabs-options %}
{% tab tabs-group-id tab-title-1 %}
contents1
{% endtab %}
{% tab tabs-group-id tab-title-2 %}
contents2
{% endtab %}
{% endtabs %}
is-centered
or is-boxed
.The theme is available as open source under the terms of the MIT License.