bloggerpack / bloggerpack

Blogger snippets · Plugins

Bloggerpack

A tool for develop Blogger theme.

Getting started · Concepts · Changelog · License

Getting started

Features · Usage · Folder structure

Features

Nunjucks
Sass and ES6+
CSS and JS linter
CSS and JS minification
and more

Usage

Download starter themes

Folder structure

.
├── dist/ (!)
|   └── theme.xml <---------------------------+
├── src/                                      |
|   ├── config/                               |
|   |   ├── .eslintrc.json                    |
|   |   ├── .stylelintrc                      |
|   |   ├── banner.txt                        |
|   |   └── data.json                         |
|   ├── dist/ (!)                             |
|   |   ├── js.js <---------------+           |
|   |   ├── sass.css <------------|---+       |   # compiled <---+
|   |   └── skin.css <------------|---|---+   |   # source ----->|
|   ├── js/                       │   |   |   |
|   |   ├── auto-extract.js (!)   |   |   |   |
|   |   └── index.js ------------>|   |   |   |
|   ├── sass/                         |   |   |
|   |   ├── _auto-extract.scss (!)    |   |   |
|   |   └── index.scss -------------->|   |   |
|   ├── skin/                             |   |
|   |   ├── auto-extract.css (!)          |   |
|   |   └── index.css ------------------->|   |
|   ├── template/                             |
|   └── index.njk --------------------------->|   # (!) = auto-generated
├── .browserslistrc
└── package.json

Concepts

Config files · Template · Sass · Skin · JS

Config files

.browserslistrc

The config to share target browsers. Learn more about Browserslist.

package.json

Use this file to manage and install Bloggerpack and other packages. You also will need to add Bloggerpack commands and tasks.

src/config/data.json

Store your theme config in this file. This is Nunjucks template context, which means it can be accessed in template files using {{ data.keyName }}. You can also access data from package.json using {{ pkg.keyName }}. See Nunjucks variables.

src/config/banner.txt

The header for compiled Sass, Skin and JS. You can access data from data.json using <%= data.keyName %>.

Example:

/*!
 * <%= data.theme.name %> v<%= data.theme.version %>
 */

src/config/.stylelintrc

The default config is recommended, but if you want to change the config you can read the Stylelint docs.

src/config/.eslintrc.json

The default config is recommended, but if you want to change the config you can read the ESLint docs.

Template

We uses Nunjucks for its template engine. File extension for template files is .njk.

Template tag

Wrap the markup with >>>template->>>endtemplate tag in .njk files.

>>>template
<p>example</p>
>>>endtemplate

Including template

Do not use the default Nunjucks {% include %} tag, use {% template %} tag instead.

Note: the path is relative to the index.njk root directory.

src/example-dir/file1.njk:

>>>template
<p>example</p>
>>>endtemplate

src/example-dir/file2.njk:

>>>template
<div>
  {% template "example-dir/file1.njk" %}
</div>
>>>endtemplate

src/index.njk:

>>>template
{% template "example-dir/file2.njk" %}
>>>endtemplate

Output (dist/theme.xml):

<div>
  <p>example</p>
</div>

Including template from node modules

You can also include template from node modules:

>>>template
{% template "package-name/path/to/file.njk" %}
>>>endtemplate

Below is example of package-name/path/to/file.njk:

>>>template
Template here
>>>endtemplate

>>>sass
CSS for the template here
>>>endsass

>>>skin
Skin for the template here
>>>endskin

>>>js
JS for the template here
>>>endjs

Sass, Skin, and JS are optional.

Plugin package name:

Plugin package names must start with bloggerpack-plugin-* to automatically extract the Sass, Skin, and JS in template.

Including assets

Use this tag to include compiled Sass, Skin, JS, and other CSS and JS assets:

{% asset type="skin|style|script", "path/to/file" %}

Example:

>>>template
<head>
  {# Sass first #}
  {% asset type="style", "dist/sass.css" %}
  {# Skin #}
  {% asset type="skin", "dist/skin.css" %}
</head>
<body>
  ...

  {# JS #}
  {% asset type="script", "dist/js.js" %}
</body>
>>>endtemplate

Manual tag_start and tag_end:

{%
  asset
    tag_start="<b:if cond='!data:view.isLayoutMode'>\n<style>",
    "path/to/file.css",
    tag_end="</style>\n</b:if>"
%}

{%
  asset
    tag_start="<script>\n//<![CDATA[",
    "path/to/file.js",
    tag_end="//]]>\n</script>"
%}

Block tag:

{% asset %}
  <b:if cond='!data:view.isLayoutMode'>
  <style>
  .element {
    display: block;
  }
  </style>
  </b:if>
{% endasset %}

{% asset %}
  <script>
  //<![CDATA[
  console.log('Hello');
  //]]>
  </script>
{% endasset %}

Block tag with files:

Use {? asset ?} tag.

{% asset %}
  <b:if cond='!data:view.isLayoutMode'>
  <style>
  {? asset "path/to/file1.css" ?}
  {? asset "path/to/file2.css" ?}
  </style>
  </b:if>
{% endasset %}

{% asset %}
  <script>
  //<![CDATA[
  {? asset "path/to/file1.js" ?}
  {? asset "path/to/file2.js" ?}
  //]]>
  </script>
{% endasset %}

Extending template

Use Nunjucks {% extends %} tag. See Nunjucks template inheritance.

src/layout.njk:

>>>template
<header>
  {% block header %}{% endblock %}
</header>

<main>
  {% block main %}{% endblock %}
</main>

<footer>
  {% block footer %}{% endblock %}
</footer>
>>>endtemplate

src/index.njk:

>>>template
{% extends "layout.njk" %}

{% block header %}
This is header content.
{% endblock %}

{% block main %}
This is main content.
{% endblock %}

{% block footer %}
This is footer content.
{% endblock %}
>>>endtemplate

Template example

See template example.

Sass

Write your styles with Sass. You can also import Sass package from node modules.

Partialize

Do not write styles in src/sass/index.scss directly. Add a new file (e.g., _my-component.scss) within src/sass/ and than import the file to src/sass/index.scss.

@import "my-component";

Sass-in-Template

You can write CSS for specific template in the template file directly using >>>sass->>>endsass tag.

>>>template
<h1 class='example'>Example</h1>
>>>endtemplate

>>>sass
$heading-color: #fff !default;

.example {
  color: $heading-color;
}
>>>endsass

The styles within the tag would be automatically extracted to src/sass/_auto-extract.scss.

Sass example

See sass example.

Skin

Skin is CSS that support Blogger's skin variables to allow your theme to be able to customize through the Blogger theme designer.

Partialize

Do not write styles in src/skin/index.css directly. Add a new file (e.g., my-component.css) within src/skin/ and than import the file to src/skin/index.css.

@import "my-component";

Skin-in-Template

You can write skin CSS for specific template in the template file directly using >>>skin->>>endskin tag.

>>>template
<h1 class='example'>Example</h1>
>>>endtemplate

>>>skin
/*
<Variable name="heading.color"
    description="Heading color"
    type="color"
    default="#ffffff"
    value="#ffffff"/>
*/

.example {
  color: $(heading.color);
}
>>>endskin

The styles within the tag would be automatically extracted to src/skin/auto-extract.css.

Skin example

See skin example.

JS

The JavaScript. You can write your script with ES6+ and you can also import package from node modules.

Partialize

Do not write scripts in src/js/index.js directly. Add a new file (e.g., util.js) within src/js/ and than import the file to src/js/index.js.

import './util';

JS-in-Template

You can write JavaScript for specific template in the template file directly using >>>js->>>endjs tag.

>>>template
<h1 class='example' id='example'>Example</h1>
>>>endtemplate

>>>js
var example = document.getElementById('example');
>>>endjs

The JavaScript within the tag would be automatically extracted to src/js/auto-extract.js.

JS example

See js example.

Changelog

See CHANGELOG.

License

Licensed under MIT.

bloggerpack / bloggerpack

Join GitHub today

Launching GitHub Desktop

Launching GitHub Desktop

Launching Xcode

Launching Visual Studio

Latest commit

Git stats

Files

README.md

Bloggerpack

Getting started

Features

Usage

Folder structure

Concepts

Config files

.browserslistrc

package.json

src/config/data.json

src/config/banner.txt

src/config/.stylelintrc

src/config/.eslintrc.json

Template

Template tag

Including template

Including template from node modules

Including assets

Extending template

Template example

Sass

Partialize

Sass-in-Template

Sass example

Skin

Partialize

Skin-in-Template

Skin example

JS

Partialize

JS-in-Template

JS example

Changelog

License

About

Topics

Resources

License

Releases

Packages 0

Contributors 2

Languages

Essential cookies

Always active

Analytics cookies

Packages