For long time, I have to use the default theme
landscape, because I always want to make a very magnificence theme which may require far more out of my toolbox and ability.
Until now, I decide to make this blog a pure programming and technology oriented. So I decided to develop an brief and clear theme. That is the theme
This theme is made from ground. Almost everything, I have to learn from hexo official site, where its document is not very detailed. To save time, I made a decision that I would use the technology which I already handled of. So this theme is designed with Adobe Edge Reflow CC, made with less, ejs and a little jquery. Also, I use grunt to build a early preview version to check the design and some css styles. In fact, it’s not a good practice to develop a hexo theme.
It is worth to talk about the interesting things when developing this theme, Some of these may have someone to not make a mistake.
This theme is design with Adobe Edge Reflow CC, this means I’ll to make a responsive design at very first. so I’ll have to develop with both desktop and mobile screen.
Luckly, Chrome has a emulator can provide different device screen size to preview the result. But when I previewed with that,
All of my fonts became very big (almost scaled 3 times bigger) and the content were out of screen on mobile devices.
Debug this wasted a lot of time until I found I missed a meta tag to declare the
Then I add this meta tag then everything looks good.
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
it is almost like this:
<input type="checkbox" id="drawer-toggle">
<label for="drawer-toggle" class="drawer-label">Drawer Button</label>
<label for="drawer-toggle" class="backdrop"></label>
After I almost complete the styles and layout development and began to convert html to ejs template. I finally found a project called hexo-theme-unit-test.
Which is actually a sample blog with every type of post. What I need is copy may theme into its themes folder. and modify the _config.yml.
But, when I run the command
hexo server it didn’t work! After tried serveral times, I found this unit-test project lack some dependency declarations in its package.json.
This would result in the ejs template not being rendered. after installed the dependencies. it works well. If you want to develop a theme, you should work with this project,
no need to config a grunt task. and write a pure html file.
This hexo theme is still in development, some pages and functions are not available, the styles need to be tweaked, I’ll continue work with this.