hexo theme lite
v1.4.1
차분하고 가볍게 쓰기를 유지하세요.
Vue , Vuex , ElementUI 등을 사용하는 가벼운 단일 페이지 블로그 애플리케이션 테마입니다.
Vue , Vuex 및 ElementUI 기반으로 구축된 가벼운 단일 페이지 블로그 테마
데모 | 온라인 데모
Hexo 루트 디렉터리로 들어갑니다. 루트 디렉터리에는 themes , node_modules , source 등이 포함되어야 합니다. 먼저 Hexo 루트 디렉터리에 들어가세요. 이 디렉터리에 themes , node_modules , source 및 기타 파일이 있는지 확인하세요.
cd my-hexo
ls
# output:
# _config.yml node_modules package.json public scaffolds source themesgit clone 사용하여 최신 릴리스를 다운로드하세요. git clone 명령을 사용하여 최신 릴리스 버전을 다운로드하세요.
git clone https://github.com/HeskeyBaozi/hexo-theme-lite themes/lite git clone 후 결과는 다음과 같습니다.
명령을 사용한 후 결과는 다음과 같습니다.
__config.yml 을 편집합니다. 필드 theme lite 로 수정합니다.
루트 디렉터리에서 __config.yml 파일을 열고 theme 필드를 lite 로 설정합니다.
# Extensions
theme : litehexo gHexo 서버 실행 hexo s
# output:
# INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.테마를 사용자 정의하려면 lite/__config.yml 파일을 편집하세요.
테마를 사용자 정의하려면 lite/__config.yml 파일을 편집하세요.
avatar :
enable : true
url : /static/images/kamuyi.jpg # mapping to '<blog root>/source/static/images/kamuyi.jpg' 평소와 같이 / 테마의 static 폴더가 아닌 <blog root>/source 에 매핑됩니다. 일반적으로 이 경로는 테마의 static 폴더가 아닌 블로그 루트 디렉터리의 /source 폴더를 나타냅니다.
여기서 가우스 반경을 설정할 수 있습니다.
여기서 가우시안 흐림 반경을 설정할 수 있으며 효과는 다음과 같습니다.
blur :
background_color : ' #ffffff '
# 'true' corresponding to css style 'overflow: hidden'
# 设置为'true'则对应模糊容器'overflow'选项
hide_overflow : true
# Alpha Value of the background color
# 背景颜色透明值, 启用会导致高斯模糊失效
opacity :
enable : false # switch to 'true' will make the gaussian blur lose efficacy
opacity_value : 0.4
gaussian_radius : # 高斯模糊程度，数值越大越模糊
top_navigator : 50 # 40+ preferred
header : 30 # 5 ~ 50 preferred
footer : 40 # 5 ~ 100 preferred
font :
color : ' #ffffff ' font.color 는 흐림 영역의 글꼴 색상에만 영향을 미칩니다.
여기서의 font.color 은 흐린 영역의 글꼴 색상에만 영향을 미칩니다.
background :
background_color : ' #ffffff '
# Custom Background Picture
enable_picture : true
url : /static/images/miku.jpg
css_size : cover
css_position : 50%
# Gradient color
gradient_color :
enable : false # switch to 'true' will make custom background picture lose efficacy
css_value : ' linear-gradient(to right, rgb(74, 135, 193), rgb(179, 177, 251)) ' 그라데이션 색상을 사용할 수 있으며 CSS background-image 수정하여 작동하므로 사용자 정의 배경 그림의 효율성이 떨어집니다.
여기서 그라데이션 배경을 설정할 수 있습니다. 실제로 내부 구현은 CSS의 background-image 수정하는 것이므로 그라데이션 색상을 활성화하면 사용자 정의 배경 이미지가 무효화됩니다.
예:
background :
gradient_color :
enable : true
css_value : ' linear-gradient(to right, rgb(74, 135, 193), rgb(179, 177, 251)) ' # options
blur :
opacity :
enable : true # switch to 'true' will make the gaussian blur lose efficacy
opacity_value : 0.4 원시 마크다운 게시물에 <!-- more --> 를 삽입하세요. 수동으로 자르려면 게시물 마크다운에 <!-- more --> 삽입하세요.
menu :
# Basic Menu
Home : true
Archives : true
Categories : false
Tags : false
# Custom Menu
# 'About' link to the 'About' page if there exists '/about/index.md' in your 'source' dir.
# 这里是一个导航到'关于我'的页面，前提是你需要在你的'source'文件夹有'/about/index.md'文件
About : /pages/about/index theme_layout :
dependent_footer : true dependent_footer 본문이 바닥글과 밀접하게 연결되어 있음을 의미합니다. false 로 설정하면 바닥글이 "전체 배경, 패딩된 콘텐츠"가 됩니다.
dependent_footer 테마의 하단 정보 표시줄이 서로 연결되어 있음을 나타냅니다. false 로 설정하면 하단 정보 표시줄에 "전체 배경, 고정 너비 콘텐츠"가 표시됩니다.
social :
github : https://github.com/heskeybaozi
weibo : http://weibo.com/52hezhiyu
# Email link
email : mailto:[email protected]
social_icons :
enable : true
# icon name docs: http://fontawesome.io/icons/
github : fa-github-alt
weibo : fa-weibo
email : fa-envelope
wechat : fa-weixin
qq : fa-qq powered_by :
text : Hexo Theme Lite
url : https://github.com/HeskeyBaozi/hexo-theme-lite/ # or false to disable link
자신의 .ico 파일( 32px * 32px 권장)을 사용하여 /themes/lite/source/static/ 디렉토리 아래의 원본 favicon.ico 대체할 수 있습니다.
/themes/lite/source/static/ 디렉토리에 있는 favicon.ico 파일을 사용자 고유의 아이콘 파일(바람직하게는 32px * 32px 크기)로 바꿀 수 있습니다.
page_404 :
# enable to use custom 404 page
enable : false
# filename of .md file path in your source dir
source_path : 404/index.md 우리는 댓글 시스템으로 Gitment 사용합니다.
Gitment무엇입니까?
Gitment는 GitHub Issues를 기반으로 하는 댓글 시스템으로, 서버측 구현 없이 프런트엔드에서 사용할 수 있습니다.
Gitment는 Github Issues 페이지를 사용하여 댓글을 저장하는 '서버 측' 무료 댓글 달기 시스템입니다.
OAuth 애플리케이션을 등록하려면 여기를 클릭하세요. 그러면 client id 와 client secret 제공됩니다. 콜백 URL이 올바른지 확인하세요. 일반적으로 https://heskeybaozi.github.io/ 와 같은 사이트의 출처입니다.
여기를 클릭하여 Github OAuth 애플리케이션을 생성하면 client id 와 client secret 얻을 수 있습니다. 콜백 URL이 https://heskeybaozi.github.io/ 와 같은 기본 도메인 이름으로 반환되는지 확인하세요.
# https://github.com/imsun/gitment#customize
gitment :
enable : false
github_id : # your github id
repository_name : # your repository name
# client_id & secret will generated after register an OAuth App
# reference: https://github.com/settings/applications/new
client_id :
client_secret :
per_page : 8 # comments per page
max_comment_height : 250 # default 250px google_analytics :
enable : false # remember to switch to 'true' when using google analytics
# replace to your track_id. It starts with 'UA-'.
# 这里替换为你的跟踪ID，记得打开`enable: true`
track_id : UA-XXXXXX-X hexo-pagination 설치했는지 확인하세요 hexo-pagination npm install --save hexo-pagination # or yarn add hexo-pagination 루트 __config.yml 에서 highlight 플러그인을 설정했는지 확인하세요.
루트 디렉터리의 __config.yml 파일에 highlight 플러그인이 켜져 있는지 확인하세요.
# example
highlight :
enable : true
line_number : true
auto_detect : true
tab_replace :루트 hexo 디렉터리에서 명령을 실행하세요.
루트 디렉터리에서 다음 명령을 실행하세요.
cd themes/lite
git pull 테마 폴더를 다시 삭제하고 다시 설치하면 __config.yml 파일을 저장하는 것을 기억하세요.
테마 __config.yml 파일을 저장하세요.
/themes/lite 디렉토리 삭제
hexo 루트 디렉토리를 입력하세요
명령을 실행
git clone https://github.com/HeskeyBaozi/hexo-theme-lite themes/lite__config.yml 사용하여 테마 구성 파일을 교체하세요. 개발 서버 | 개발자가 디버깅을 위해 사용하는 서버
