Mill themes #3

xeodou · 2016-04-19T13:59:37Z

We have bring the theme manager for the Mill Blog. It's a static theme engine and basic on the github gh-pages. You can easily switch different themes only few lines. And you can also write your own theme in a easy way.

What's Mill themes

Mill themes are all JavaScript scripts, when you want change theme for you blog, you need include the theme script inside of the html head tag and put it at the end, like this:

  <head>
    <title>Mill Blog</title>
    <!-- The style sheet files for the basic theme -->
    <link rel="stylesheet" href="style.css" />
    <script src="./config.js"></script>
    <script src="./vendor.bundle.js"></script>
    <!-- For example here is the basic theme provider by Default.  -->
    <script src="//cdn.rawgit.com/graffie/mill-basic-theme/master/basic.js"></script>
  </head>

And then modify the config.js file like

window.MillConfig = {
  title: 'Mill',
  github: {
    owner: 'graffie',
    repo: 'mill.blog',
  },
  theme: 'basic' // Here is your theme name, we use basic as default theme here.
};

How is works

A mill theme include two files, one is stylesheet script file and another is a JavaScript script file. The original files are only htmls and bundled with tools like webpack, babeljs and some custom plugins we built ourself. For example, the Tag basic theme is like:

<p className='post-item-tags'>
  <i className='fa fa-tags'></i>
  {tags.map((t, i)=> {
      const comma = i !== tags.length - 1 ? <span>, </span> : '';
      return <Link key={i} to='/' query={{tag: t}}>{t}{comma}</Link>;
    })}
</p>

It use JSX syntax and support most of the JSX functions, but we don't support out scope function here. Like JSX you can process your data inside of {}. For some global variables like tags Link it will provider by Mill. Like tags is the tags for each of your articles, Link is a ReactRouter Link.The detail global properties will coming soon. We will compile the html to a JS script like:

module.exports = function (React, props) {
  var tags = props.tags,
      Link = props.Link;
  return React.createElement(
    'p',{ className: 'post-item-tags' },
    React.createElement('i', { className: 'fa fa-tags' }),
    tags.map(function (t, i) {
      var comma = i !== tags.length - 1 ? React.createElement('span', null, ', ') : '';
      return React.createElement(
        Link, { key: i, to: '/', query: { tag: t } }, t, comma
      );
    })
  );
};

So everything you write in JSX with ReactJS you can write in Mill themes.

How do i publish my theme

We built a webpack plugin which called webpack-mill-plugin. You can add it to you webpack configuration file, like this and give a name for you theme then build and publish it in your github repositry. Now you can include your themes with step above and 💥 you got your new theme.
Currently we only have webpack support but use webpack to build a theme is to too slow. We are thinking about provider a light tool to build the theme, make it fast.

Enjoy the themify blog and host on the github. :)

__ Mill Team

The text was updated successfully, but these errors were encountered:

xeodou added Announcement Themes labels Apr 19, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mill themes #3

Mill themes #3

xeodou commented Apr 19, 2016

Mill themes #3

Mill themes #3

Comments

xeodou commented Apr 19, 2016

What's Mill themes

How is works

How do i publish my theme