hexo主題配置

繼續叨叨叨

以前介紹了hexo的安裝和部署(還沒部署的小夥伴點這裏),這篇我們接着介紹怎麼應用主題。css

conci主題

這裏主要是配置的是conci主題 效果點這裏
同時支持pc端和移動端html

下載conci

hexo的主題都存放在themes文件夾下,在themes文件夾下右鍵Git bash Here,輸入:git

$ git clone https://github.com/cspp01/concise.git

而後在主_config.yml文件中找到theme字段改成concise。github

安裝scss預編譯插件

因爲我是用的是scss寫的css代碼,因此先安裝sass插件。在主根目錄下右鍵Git bash Here,輸入npm

npm install hexo-renderer-sass --save

安裝自定義頁面的插件

在主根目錄下右鍵Git bash Here,輸入sass

npm install hexo-generator-mypage --save

而後在主_config.yml中添加以下bash

mypage:
 tags/index.html: tags
 categories/index.html: categories
 about.html: about

基本條件已經OK,能夠預覽了。輸入:微信

$ hexo clean
$ hexo s -debug

在本地預覽調試看看是否應用成功。hexo

conci基本配置

設置頭像

在主題配置文件中找到my_img字段.dom

my_img: http://ooa3lxrpg.bkt.clouddn.com/b.jpg?imageView2/1/w/120/h/120/q/75 //地址(雲存儲對應頭像的地址)也可放在本地,不過推薦放雲端存儲。

添加logo

在主題配置文件中找到logo字段

logo: conci #<img src="./logo.png">//能夠是字符也能夠是圖片如(<img src="你的logo地址">)

添加favicon

把主題source文件夾下的favicon.ico替換或者在主題配置文件中找到favicon字段把地址換成你的地址

favicon: /favicon.ico

配置展現信息

找到inf字段來對應設置你要展現的信息

inf:
  name: conci.theme
  superscript: hexo//上標字段
  describe:
    one: conci version 1.0.0//第一行信息
    two: Simple and practical hexo personal blog theme.//第2行信息
    three: The freedom to choose//第3行信息

配置社交帳號地址

找到my_social字段來對應設置你要展現的信息

my_social:
  github: https://github.com/cspp01
  twitter: /
  weibo: http://weibo.com/5262373626/profile?topnav=1&wvr=6&is_all=1
  豆瓣: http://douban.com/people/160374034/
  知乎: http://www.zhihu.com/people/cc-chen-4-85

配置友情連接

找到my_links字段來按格式設置,要設置幾個友情連接就設置幾個

my_links:
  ccblog1://友情連接名字
    href: //友情連接地址
    img: http://ooa3lxrpg.bkt.clouddn.com/timg.jpg//友情連接頭像地址
  ccblog2://友情連接名字
    href: //友情連接地址
    img: http://ooa3lxrpg.bkt.clouddn.com/timg.jpg//友情連接頭像地址

配置首頁文章簡介字符數

找到index_pagelength字段設置

index_pagelength: 200//字符數

開啓打賞功能

找到reward字段設置

reward:
  open: true//[true(開啓)|false(關閉)]
  weixing: http://ooa3lxrpg.bkt.clouddn.com/wx.jpg?imageView2/2/w/180 #你的微信收錢二維碼圖片地址
  alipay: http://ooa3lxrpg.bkt.clouddn.com/zfb.jpg?imageView2/2/w/180 #你的支付寶收錢二維碼圖片地址

自定義側邊欄位置

找到sidebar字段設置,注意兩個屬性的值必須相反

sidebar:
  content: left//內容位置[left|right]
  my: right//側邊欄位置[left|right]

文章配置

在source _posts下的文章中在兩個- - -之間添加

---
title: hexo的next主題配置和優化
date: 2017-03-14 08:15:23
tags: ['hexo','next','css'] //hexo和next就是標籤,你能夠寫任何關於你文章名字的標籤
categories: hexo博客搭建 //分類
pho: http://ooa3lxrpg.bkt.clouddn.com/11.jpg //首頁展現圖片地址,未配置的話會顯示默認圖片
---

下一篇介紹怎麼開啓conci主題的評論,搜索,分享,rss,閱讀數統計等。
本篇博文首發於本人我的博客查看更多點這裏

相關文章
相關標籤/搜索