![]() If you want to develop a theme, you should work with this project, This would result in the ejs template not being rendered. and modify the _config.yml.īut, 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. What I need is copy may theme into its themes folder. Which is actually a sample blog with every type of post. I finally found a project called hexo-theme-unit-test. But I don’t care.Īfter I almost complete the styles and layout development and began to convert html to ejs template. even with IE9 but If you want to be compatible with the older browser, You may consider a javascript version. This technology has very good browser compatibility. Transform: translate3d(-100px, 0, 0) // we move the drawer out of screen when initialized. you can make any styles what you want your drawer toggle button to be. Which make it possible to use the :checked pseudo class to define a different styles for the drawer and backdrop element based on the checkbox state. Which is far more easy to create a navigator drawer and with no javascript need! The mystery is you can make a invisible checkbox (whether make it opacity=0 or move it out of screen)Īnd then attach one or more labels with it, these labels are clickable and styleable.Īnother key technology is general sibling selectors Then I found a method called checkbox hack I want to make a drawer navigator which may be very similar to the drawer of Android app.Īt first, I made this very jquery, write some code and debug, this was time waste. To make the navigation bar more accessible on mobile devices. Then I add this meta tag then everything looks good. But when I previewed with that,Īll of my fonts became very big (almost scaled 3 times bigger) and the content were out of screen on mobile devices.ĭebug this wasted a lot of time until I found I missed a meta tag to declare the viewport and initial-scale factor. Luckly, Chrome has a emulator can provide different device screen size to preview the result. ![]() so I’ll have to develop with both desktop and mobile screen. This theme is design with Adobe Edge Reflow CC, this means I’ll to make a responsive design at very first. It is worth to talk about the interesting things when developing this theme, Some of these may have someone to not make a mistake. In fact, it’s not a good practice to develop a hexo theme. So this theme is designed with Adobe Edge Reflow CC, made with less, ejs and a little jquery.Īlso, I use grunt to build a early preview version to check the design and some css styles. To save time, I made a decision that I would use the technology which I already handled of. Almost everything, I have to learn from hexo official site, where its document is not very detailed. So I decided to develop an brief and clear theme. Until now, I decide to make this blog a pure programming and technology oriented. 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |