Hexo 主題Light修改教程

感謝

首先感謝zipperary的教程,我這兒把我修改了的部分發(fā)上來(lái)做一個(gè)備份用。
官方主題下載地點(diǎn)

接下來(lái)發(fā)布我部署了的兩個(gè)網(wǎng)址:gitcafe部署點(diǎn)
gitcafe我的博客,綁定域名http://snljzz.tk還是把gitcafe做為我的主站吧
github我的博客,綁定域名http://lxy361.tkgithub有時(shí)有點(diǎn)不穩(wěn)定
兩個(gè)地方是同步的

添加“多說(shuō)”評(píng)論與“頁(yè)面導(dǎo)航”

  1. 多說(shuō) 進(jìn)行注冊(cè),我用的是我的QQ號(hào),獲取通用代碼。

  2. 將通用代碼粘貼到 themes\light\layout\_partial\comment.ejs 里邊,
    其中var duoshuoQuery = {short_name:"szcx"}里的szcx是我的賬號(hào)。

如下:

<% if (page.comments){ %>


<nav id="pagination" >
    <% if (page.prev) { %>
    <a href="<%- config.root %><%- page.prev.path %>" class="alignleft prev" ><%= __('prev') %></a>
    <% } %>
    <% if (page.next) { %>
    <a href="<%- config.root %><%- page.next.path %>" class="alignright next" ><%= __('next') %></a>
    <% } %>
    <div class="clearfix"></div>
</nav>

<!-- 多說(shuō)評(píng)論框 start -->
 <div class="ds-thread" data-thread-key="<%- config.root %><%- item.path%>" data-title="<%- item.title %>" data-url="<%- item.permalink %>"></div>
<!-- 多說(shuō)評(píng)論框 end -->
<!-- 多說(shuō)公共JS代碼 start (一個(gè)網(wǎng)頁(yè)只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"szcx"};
  (function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0] 
     || document.getElementsByTagName('body')[0]).appendChild(ds);
  })();
  </script>
<!-- 多說(shuō)公共JS代碼 end -->
<section id="comment">
</section>
<% } %>

添加小圖標(biāo)

themes/light/layout/_partial/head.ejs里將<link href="<%- config.root %>favicon.png" rel="icon">
替換為<link href="<%- config.root %>favicon.ico" rel="icon" type="image/x-ico">將favicon.ico圖標(biāo)文件放在source目錄下。

添加分類(lèi)、標(biāo)簽云widget

很簡(jiǎn)單,在themes/light/_config.yml中,添加如下:

widgets:
- category
- tagcloud

添加友情鏈接widget

themes/light/layout/_widget中新建名為blogroll.ejs的文件,編輯內(nèi)容如下:

<div class="widget tag">
<h3 class="title">友情鏈接</h3>
<ul class="entry">
<li><a  title="藍(lán)江老涌的博客">遂州創(chuàng)信</a></li>
<li><a  title="Hexo博客">Hexo博客</a></li>
</ul>
</div>

添加新浪微博widget(微博秀)

  1. 新浪微博開(kāi)放平臺(tái)設(shè)置和生成微博秀代碼。我用的139郵箱注冊(cè)新浪。
  2. themes/light/layout/_widget中新建名為weibo.ejs的文件,將剛才的代碼直接保存到這里。
  3. themes/light/_config.yml中,添加如下:
     widgets:  #站點(diǎn)右邊欄,暫時(shí)默認(rèn),后面介紹修改和添加
      - search
     - category
     - tagcloud  #標(biāo)簽云
     - intro
     - weibo    #新浪微博秀
     - blogroll    #友情鏈接
    

主頁(yè)文章顯示摘要

編輯md文件的時(shí)候,在要作為摘要的文字后面添加``即可。

修改背景圖片、文字顏色等

  • 找到hexo\themes\light\source\css\_base\layout.styl,在body下面增加一條background-image url('/imgs/noise.png')
  • 至于背景圖片\themes\light\source\imgs\bozhu.png,用自己喜歡的即可。
  • 然后在hexo\themes\light\source\css\_base\variable.styl中修改color區(qū)塊中的屬性,就可以改變網(wǎng)站不同元素的顏色了。

重頭戲來(lái)了,我修改的themes\light\_config.yml文件

menu: #站點(diǎn)右上角導(dǎo)航欄,暫時(shí)默認(rèn)
  首頁(yè): /
  歸檔: /archives
  關(guān)于: /about

widgets:  #站點(diǎn)右邊欄
- search
- category
- tagcloud  #標(biāo)簽云
- intro
- weibo    #新浪微博秀
- blogroll    #友情鏈接

excerpt_link: 閱讀全文 #替換為中文

plugins: 
- hexo-generator-feed

twitter: #右邊欄要顯示twitter展示的話,需要在此設(shè)置
  username: 
  show_replies: false
  tweet_count: 5

addthis: #SNS分享,身在天朝,當(dāng)然用“百度分享”,暫時(shí)默認(rèn)
  enable: true
  pubid:
  facebook: true
  twitter: true
  google: true
  pinterest: true

fancybox: true #圖片效果,默認(rèn)
google_analytics: #要使用google_analytics進(jìn)行統(tǒng)計(jì)的話,這里需要配置ID
rss: /atom.xml #生成RSS,需要配置路徑

根目錄下的_config.yml文件設(shè)置

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 遂州創(chuàng)信
subtitle: 藍(lán)江老涌的博客
description: 學(xué)習(xí)總結(jié) 思考感悟 知識(shí)管理 # 網(wǎng)站描述
author: 藍(lán)江老涌
email: szcxgg@gmail.com
language: zh-CN

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://szcx.github.io
root: /
permalink: :year/:month/:day/:title/
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
permalink_defaults:

# Directory
source_dir: source
public_dir: public

# Writing 文章布局、寫(xiě)作格式的定義,不修改
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
highlight:
  enable: true
  line_number: true
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Archives
## 2: Enable pagination
## 1: Disable pagination
## 0: Fully Disable
archive: 1
category: 1
tag: 1

# Server
## Hexo uses Connect as a server
## You can customize the logger format as defined in
## http://www.senchalabs.org/connect/logger.html
port: 4000
server_ip: localhost
logger: false
logger_format: dev

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-D
time_format: H:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 5 #每頁(yè)5篇文章
pagination_dir: page

# Disqus #社會(huì)化評(píng)論disqus,我使用多說(shuō),在主題中配置
disqus_shortname:

# Extensions
## Plugins: https://github.com/hexojs/hexo/wiki/Plugins
## Themes: https://github.com/hexojs/hexo/wiki/Themes
theme: light
exclude_generator:

#  Deployment 站點(diǎn)部署到github要配置,上一節(jié)中已經(jīng)講過(guò)
## Docs: http://zespia.tw/hexo/docs/deploy.html
deploy:
  type: github
  repository: git@github.com:szcx/szcx.github.io.git
  branch: master

添加RSS

hexo提供了RSS的生成插件,需要手動(dòng)安裝和設(shè)置。步驟如下:

  • 安裝RSS插件到本地:npm install hexo-generator-feed
  • 開(kāi)啟RSS功能:編輯hexo/_config.yml,添加如下代碼:
    plugins:
    - hexo-generator-feed
    
  • 在站點(diǎn)添加鏈接:
    themes/light/_config.yml中,編輯 rss: /atom.xml
    themes/light/layout/_partial/header.ejs中,<ul></ul>之間,添加一樣代碼
    <li> <a href="/atom.xml">RSS</a> </li>

文章中插入圖片

  • 使用markdown寫(xiě)文章,插入圖片的格式為![圖片名稱](鏈接地址),這里要說(shuō)的是鏈接地址怎么寫(xiě)。對(duì)于hexo,有兩種方式:
  • 使用本地路徑:在hexo/source目錄下新建一個(gè)img文件夾,將圖片放入該文件夾下,插入圖片時(shí)鏈接即為/img/圖片名稱
  • 使用七牛,有圖片的鏈接地址。格式為![圖片名稱](鏈接地址)我用的是139郵箱注冊(cè)的七牛。

加入左上角「fork me on github」

這里有 github 給出的教程,把代碼插入到任意一個(gè)全局的模板文件中就行,比如layout.ejs的末尾。
我的themes\light\layout\layout.ejs文件如下:

<%
if(page.layout !== 'false'){
%>

<%- partial('_partial/head') %>

<body>
  <header id="header" class="inner"><%- partial('_partial/header') %></header>
  <div id="content" class="inner">
    <div id="main-col" class="alignleft"><div id="wrapper"><%- body %></div></div>
    <aside id="sidebar" class="alignright"><%- partial('_partial/sidebar') %></aside>
    <div class="clearfix"></div>
  </div>
  <footer id="footer" class="inner"><%- partial('_partial/footer') %></footer>
  <%- partial('_partial/after_footer') %>
</body>
</html>

<%}else{ %>

<%- page.content %>
<%};%>
<a  target="_blank"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_white_ffffff.png" alt="Fork me on GitHub"></a>

接下來(lái)發(fā)布我部署了的兩個(gè)網(wǎng)址:
github
gitcafe

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容