-
Notifications
You must be signed in to change notification settings - Fork 6
Mill themes
We have bring the theme manager for the Mill Blog.You can easily switch different themes only few lines. And you can also write your own theme in a easy way.
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="https://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.
};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.
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. :)