diff --git a/README.md b/README.md index b56f684..08d871a 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,81 @@ -# vuetilog +# Vuetilog Blogger Theme built with Vue and Vuetify + +## Other language: +[한국어](/lang/ko) + +## Notice +Please use the version 0.0.8 or above. It contains the updates for SEO after testing. + +## Example +[https://vuetilog.blogspot.com/](https://vuetilog.blogspot.com/) + +## Download +[https://github.com/opdev1004/vuetilog/releases/](https://github.com/opdev1004/vuetilog/releases/) + +## Features: +1. Development with Vue and Vuetify +2. Responsive Web design +3. SEO +4. Better label control + +## Installation: +1. Apply Contempo theme to your blog. +2. Restore theme with vuetilog.xml or copy and paste vuetilog theme in HTML edit. +3. Edit any settings in your needs. + +### How to use code style in the post +1. Select your code block in the editor by mouse dragging +2. Set them as normal instead of paragraph +3. Change to HTML view +4. Set class to the div element for your code with "code". eg. ```class="code"``` + +### Layout System +| 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. | + +## Contribution +You are welcome to improve Vuetilog. +You can contribute by opening a pull request in this repository. + +## License: +MIT + +## Theme Development Details +### Theme load order +1. Blogger Template System Generates HTML file from vuetilog theme +2. Webbrowser loads the blog page +3. Loads Vue, Vuetify, CSS and many other things from the head tag +4. Go through id='init-wrapper' div tag where majority of elements that will be componentized later +5. Go through Vue App Template +6. Creates loading overlay with Vue from the top of body tag +7. Componentizes the elements from id='init-wrapper' div tag +8. Create Vue app with components and data +9. Removes init-wrapper div tag +10. Removes loading overlay + +### How to use Vue and Vuetify? +As long as your tags are part of components and vue app template, they are going to be loaded. + +### Vuetilog Components +| 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. | +| popular-posts | Main Page | This component is designed to come after the blog post. | +| featured-post | Main Page | This component is designed to come after the blog post. | +| bottom-section | Main Page | This component is designed for footer of blog. | diff --git a/lang/ko/README.md b/lang/ko/README.md new file mode 100644 index 0000000..438e4dc --- /dev/null +++ b/lang/ko/README.md @@ -0,0 +1,81 @@ +# Vuetilog (뷰티로그) +Vue와 Vuetify로 만든 블로거 테마 + +## 공지 +0.0.8 버젼 이상을 사용해주세요. 테스팅 후에 적용된 SEO 관련 업데이트가 들어있습니다. + +## 다른 언어: +[English](https://github.com/opdev1004/vuetilog) + +## 예시 +[https://vuetilog.blogspot.com/](https://vuetilog.blogspot.com/) + +## 다운로드 +[https://github.com/opdev1004/vuetilog/releases/](https://github.com/opdev1004/vuetilog/releases/) + +## 기능: +1. Vue와 Vuetify로 개발 가능 +2. 반응형 웹 디자인 +3. SEO +4. 나은 라벨 컨트롤 + +## 설치: +1. Contempo 테마를 블로그에 적용 +2. vuetilog.xml로 테마를 복구하거나 HTML 수정을 통해 테마를 붙여넣고 저장 +3. 필요에 따라 설정 수정 + +### 포스트에서 코드 스타일 사용하는 방법 +1. 에디터에서 마우스로 드래그하여 코드를 선택(Select)합니다 +2. 선택된 코드들을 단락형식에서 보통으로 바꿉니다. +3. 에디터를 HTML 보기로 변경합니다 +4. 코드 div 요소의 클래스를 "code"로 설정합니다. 예시.```class="code"``` + +### 레이아웃 시스템 +| 섹션 | 설명 | +| - | - | +| Nav Top | 사이드바 전용 위젯을 추가할 수 있습니다. | +| Label Section | 라벨 위젯만 추가해주세요. | +| Nav Bottom | 사이드바 전용 위젯을 추가할 수 있습니다. | +| Main Content Top | 메인에 사용 될 수 있는 위젯을 추가 할 수 있습니다. 예시: 광고 위젯. | +| Main Content Bottom | 메인에 사용 될 수 있는 위젯을 추가 할 수 있습니다. 예시: 광고 위젯. | +| Components | 테마 개발자를 위한 섹션입니다. Vue 컴포넌트가 되기위해 많이 개조될 위젯들이 이곳에 놓여집니다. | +| Bottom Section | footer 전용 위젯을 추가할 수 있습니다. | + +## 참여하기 +Vuetilog를 발전시키는 것을 환영합니다. +이 깃헙 저장소에 Pull Request를 열어주세요. + +## 라이센스: +MIT + +## 테마 개발 디테일 +### 테마 로드 순서 +1. 블로거 시스템이 Vuetilog 테마로부터 HTML파일 생성 +2. 웹브로우저가 블로그 페이지 로드 +3. head 태그에서 Vue, Vuetify, CSS 등등을 로드 +4. 컴포넌트화 될 요소들이 담긴 id='init-wrapper' div 태그를 훑고 지나감 +5. Vue 앱 템플릿을 훑고 지나감 +6. Vue로 로딩 오버레이 생성 +7. id='init-wrapper' div 태그 안 요소들을 컴포넌트화 +8. 컴포넌트들과 데이터와 함께 Vue 앱 생성 +9. init-wrapper div 태그 제거 +10. 로딩 오버레이 제거 + +### Vue와 Vuetify 사용방법 +컴포넌트와 Vue 템플릿의 일부분이라면 정상적으로 로드됩니다. + +### Vuetilog 컴포넌트 +| 컴포넌트 | 위치 | 설명 | +| - | - | - | +| nav-top | Left Navigation Drawer | 사이드바 위젯들을 위한 컴포넌트 | +| label-section | Left Navigation Drawer | 라벨만을 보유하기 위한 컴포넌트 | +| nav-bottom | Left Navigation Drawer | 사이드바 위젯들을 위한 컴포넌트 | +| main-content-top | Main Page | 메인 위젯들을 위한 컴포넌트 | +| main-content-bottom | Main Page | 메인 위젯들을 위한 컴포넌트 | +| pagination | Main Page | 페이지 네비게이션 컴포넌트 | +| posts | Main Page | 포스트, 페이지 컴포넌트 | +| comments | Main Page | 댓글 컴포넌트 | +| post-feeds | Main Page | 피드 링크 컴포넌트 | +| popular-posts | Main Page | 포스트에 사용 되기위한 인기 포스트 컴포넌트 | +| featured-post | Main Page | 포스트에 사용 되기위한 추천 포스트 컴포넌트 | +| bottom-section | Main Page | Footer 위젯들을 위한 컴포넌트 | diff --git a/src/vuetilog.xml b/src/vuetilog.xml new file mode 100644 index 0000000..25818fe --- /dev/null +++ b/src/vuetilog.xml @@ -0,0 +1,2484 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + <data:view.title.escaped/> + + + + + + + + + + + + + + + + + + */ + html { + word-wrap: break-word; + word-break: keep-all; + } + + a { + text-decoration: none !important; + } + + img, + svg { + border: 0px; + max-width: 100%; + max-height: 100%; + width: auto; + height: auto; + } + + .code { + font-family: monaco, Consolas, "Lucida Console", Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace; + color: $(code.font.color) !important; + background-color: $(code.background.color) !important; + white-space: nowrap; + overflow-wrap: normal; + word-break: normal; + overflow-x: auto; + border: 1px solid $(code.border.color); + padding: 10px; + margin-bottom: 16px; + } + + #init-wrapper { + display: none; + } + + header { + background-color: $(header.background.color) !important; + color: $(header.font.color) !important; + } + + header #blog-title { + width: calc(100% - 48px); + } + + header #blog-title .v-app-bar-title__content, + header #blog-title .v-app-bar-title__placeholder { + width: 100% !important; + } + + header #blog-title .v-app-bar-title__content a, + header #blog-title .v-app-bar-title__placeholder a { + width: 100% !important; + } + + header .v-icon { + color: $(header.font.color) !important; + } + + header a { + color: $(header.font.color) !important; + } + + header .SearchBar .v-input { + width: calc(100vw - 80px) !important; + } + + .v-navigation-drawer { + background-color: $(sidebar.background.color) !important; + color: $(sidebar.font.color) !important; + } + + .v-navigation-drawer .theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) { + color: $(sidebar.font.color) !important; + } + + .v-navigation-drawer .widget .title, + .v-navigation-drawer .v-subheader { + color: $(sidebar.font.color) !important; + opacity: 0.6 !important; + } + + .BlogArchive ul + { + list-style: none; + padding: 0px !important; + } + + .BlogArchive .hierarchy ul + { + padding: 0px 0px 0px 16px !important; + } + + #NavTop { + padding: 8px 16px; + } + + #NavBottom { + padding: 8px 16px; + } + + #NavTop .widget .title, + #NavBottom .widget .title { + align-items: center; + display: flex; + height: 48px; + font-size: .875rem !important; + font-weight: 400; + color: rgba(0,0,0,.6); + } + + #NavTop .widget ul, + #NavBottom .widget ul, + #NavTop .widget ol, + #NavBottom .widget ol { + list-style: none; + padding-left: 0px; + } + + #NavTop .Profile ul li, + #NavBottom .Profile ul li { + margin-bottom: 10px; + } + + #NavTop .Profile .team-member img, + #NavTop .Profile .team-member span, + #NavBottom .Profile .team-member img, + #NavBottom .Profile .team-member span { + vertical-align: middle; + } + + .v-application--is-ltr .v-navigation-drawer .LabelSection .v-list-group--sub-group, + .v-application--is-ltr .v-navigation-drawer .LabelSection .v-list-group--no-action.v-list-group--sub-group>.v-list-group__items { + display: block; + } + + .v-application--is-ltr .v-navigation-drawer .LabelSection .v-list-group--sub-group .v-list-group__header { + padding-left: 16px !important; + } + + .v-application--is-ltr .v-navigation-drawer .LabelSection .v-list-group--no-action.v-list-group--sub-group>.v-list-group__items>.v-list-item { + padding-left: 16px !important; + display: block; + } + + .v-application--is-ltr .v-navigation-drawer .LabelSection .v-list-group--no-action.v-list-group--sub-group>.v-list-group__items>.v-chip { + max-width: calc(100% - 8px); + display: inline-block; + } + + .v-application--is-ltr .v-navigation-drawer .LabelSection .v-list-group--no-action.v-list-group--sub-group>.v-list-group__items>.v-chip .v-chip__content { + display: inline-block; + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + } + + main { + margin-top: 64px; + padding-top: 0px !important; + } + + main .container { + max-width: 780px; + min-height: 100vh; + } + + main .container .post iframe, + main .container .post object, + main .container .post embed + { + max-width: 756px; + max-height: 425px; + width: calc(100vw - 42px) !important; + height: calc((100vw - 42px) / 16 * 9) !important; + } + + main .container .blog-pagination { + margin: 10px 0px !important; + } + + main .container .blog-pagination .v-btn { + margin: 10px 0px !important; + } + + main .container .post-outer .post .separator a { + margin-left: 0px !important; + margin-right: 0px !important; + } + + main .container .post-outer .post .v-divider { + margin-bottom: 20px; + } + + main .container .post-outer .post-list-item-wrapper { + margin: 5px -12px; + } + + main .container .post-index-image { + border: 1px solid #CCCCCC; + } + + main .container .post-index-image svg, + main .container .post-index-image img { + vertical-align: middle + } + + main .container .post-index-image svg { + fill: #CCCCCC; + } + + /* Sharing Buttons */ + .ShareButtons + { + margin: 20px 0px; + } + + main .container .sharing li:hover, + main .container .sharing li .sharing-platform-button:hover + { + text-decoration: none; + } + + /* fill: $(header.font.color); */ + main .container .sharing svg + { + fill: #FFFFFF; + width: 25px; + height: 25px; + margin: 2px; + padding: 0px; + } + + main .container .sharing li .platform-sharing-text + { + display: none; + } + + /* Popular Posts */ + main .container #PopularPosts1 hr, + main .container #FeaturedPost1 hr{ + margin: 10px 0px; + } + + main .container #PopularPosts1 .post-title { + font-size: 1em !important; + } + + main .container .feed-links { + margin: 5px 0px; + } + + main #main-bottom { + margin-top: 200px; + } + + main #main-bottom #BottomSection { + margin-top: 20px; + } + + main #main-bottom #PageList1 ul { + list-style-type: none; + padding: 0px; + text-align: center; + } + + main #main-bottom #PageList1 ul li { + display: inline-block; + } + + main #main-bottom .row { + margin-top: 20px; + } + + main #main-bottom .blogger .svg-icon-24 { + fill: #CCCCCC; + cursor: pointer; + height: 24px; + width: 24px; + min-width: 24px; + vertical-align: bottom; + } + + /* Comments */ + main .comments { + margin-top: 30px; + } + + main .comments .title + { + margin-bottom: 10px; + } + + main .comments ol { + list-style-type: none; + } + + main .comments #top-ra { + padding: 0px; + border-top: 1px solid #CCCCCC; + } + + main .comments #top-ra>li { + border-bottom: 1px solid #CCCCCC; + margin: 10px auto 10px auto; + } + + main .comments .comment .avatar-image-container { + background-color: $(#CCCCCC); + width: 35px; + height: 35px; + display: inline-block; + vertical-align: top; + border-radius: 35px; + z-index: 1; + } + + main .comments .comment .avatar-image-container::before { + content: '?'; + line-height: 35px; + position: absolute; + height: 35px; + width: 35px; + text-align: center; + } + + main .comments .comment .avatar-image-container img { + border-radius: 35px; + position: absolute; + z-index: 2; + } + + main .comments .comment .comment-block { + width: calc(100% - 55px); + display: inline-block; + padding: 0px 10px 5px 5px; + } + + main .comments .comment .comment-block .comment-header {} + + main .comments .comment .comment-block .comment-header .user { + font-style: normal; + display: block; + } + + main .comments .comment .comment-block .comment-header .datetime { + font-size: 0.8em; + display: block; + } + + main .comments .comment .comment-block p { + margin-block-start: 5px; + margin-block-end: 5px; + margin-inline-start: 0px; + margin-inline-end: 0px; + + } + + main .comments .comment .comment-actions { + margin-bottom: 5px; + display: inline-block; + font-weight: 700; + font-size: 0.8em; + text-transform: uppercase; + cursor: pointer; + user-select: none; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + main .comments .comment .comment-actions .comment-reply { + margin-right: 8px; + } + + main .comments .comment .thread-toggle, + main .comments .comment .continue, + main .comments .comment-form #comment-post-message, + main .comments .loadmore { + display: none; + } + + main .comments .blogger-comment-from-post { + margin: 20px auto; + } + + .hidden { + display: none; + } + + ]]> + + + Style for layout page + + + + + + + + + + + +
+ + +
+
+ + + + + + + + + + +
+
+ +
+
+ + + + + + +
+
+
+ + +
+ + + +
+ + + + + + + + + + + +
+ + + + + +
+ +
+ + +
+ + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + + + + + + +
+ + +
+ +
+ +
+ + + + + + + + + + + + + + + + + +

+ + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + +
+ + + + + +
+ + + +
+ + + () + +
+ + + + + +
+ + + +
+ + + + + +
+ +
+ + + +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + +
+ + + + +
+ + + +
+ +
+
+ +

+ + + + + +

+ + +
+ +
+ +
+ + + + + true + true + 2670895679547873606 + true + true + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + +
+ +
+ + + +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + + + + + + + + + + + + + + + + +