Blogger Theme built with Vue and Vuetify
- Changing comments title element's color variable to body.font.color from sidebar.font.color
- Added close button for closing sidebar for non-desktop view
- Changed body font color
- Fixed bug on header.
- Removed pointless animation on multiple posts page
- Added body background color variables
- Now title get smaller for non-desktop view
https://vuetilog.blogspot.com/
https://github.com/opdev1004/vuetilog/releases/
- Development with Vue and Vuetify
- Responsive Web design
- SEO
- Better label control
- Apply Contempo theme to your blog.
- Restore theme with vuetilog.xml or copy and paste vuetilog theme in HTML edit.
- Edit any settings in your needs.
<pre><code></code></pre>
| Section | Description |
|---|---|
| Nav Top | You can add any sidebar widgets here. |
| Label Section | You can only add labels. |
| Nav Bottom | You can add any sidebar widgets here. |
| Main Content Top | You can add any main content widgets here. eg. ads |
| Main Content Bottom | You can add any main content widgets here. eg. ads |
| Components | This is for the theme developers. Specially for the widgets that is going to be modified a lot as a vue component. |
| Bottom Section | You can add any footer widgets here. |
You are welcome to improve Vuetilog. You can contribute by opening a pull request in this repository.
- Blogger Template System Generates HTML file from vuetilog theme
- Webbrowser loads the blog page
- Loads Vue, Vuetify, CSS and many other things from the head tag
- Go through id='init-wrapper' div tag where majority of elements that will be componentized later
- Go through Vue App Template
- Creates loading overlay with Vue from the top of body tag
- Componentizes the elements from id='init-wrapper' div tag
- Create Vue app with components and data
- Removes init-wrapper div tag
- Removes loading overlay
As long as your tags are part of components and vue app template, they are going to be loaded.
| Components | Location | Description |
|---|---|---|
| nav-top | Left Navigation Drawer | This component is for any sidebar widgets. |
| label-section | Left Navigation Drawer | This component is designed to contains only label widgets. |
| nav-bottom | Left Navigation Drawer | This component is for any sidebar widgets. |
| main-content-top | Main Page | This component is for any widgets for main page. eg. ads |
| main-content-bottom | Main Page | This component is for any widgets for main page. eg. ads |
| pagination | Main Page | This component is for placing pagination. |
| posts | Main Page | This component is for placing blog posts and pages. |
| comments | Main Page | This component is for placing comments. |
| post-feeds | Main Page | This component is for placing post feeds link. |
| bottom-section | Main Page | This component is designed for footer of blog. |
MIT, See LICENSE.