Hexo 主题Light修改教程

感谢

首先感谢zipperary的教程,我这儿把我修改了的部分发上来做一个备份用。
官方主题下载地点

接下来发布我部署了的两个网址:gitcafe部署点
gitcafe我的博客,绑定域名http://snljzz.tk还是把gitcafe做为我的主站吧
github我的博客,绑定域名http://lxy361.tkgithub有时有点不稳定
两个地方是同步的

添加“多说”评论与“页面导航”

  1. 多说 进行注册,我用的是我的QQ号,获取通用代码。

  2. 将通用代码粘贴到 themes\light\layout\_partial\comment.ejs 里边,
    其中var duoshuoQuery = {short_name:"szcx"}里的szcx是我的账号。

如下:

<% 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>

<!-- 多说评论框 start -->
 <div class="ds-thread" data-thread-key="<%- config.root %><%- item.path%>" data-title="<%- item.title %>" data-url="<%- item.permalink %>"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<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>
<!-- 多说公共JS代码 end -->
<section id="comment">
</section>
<% } %>

添加小图标

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图标文件放在source目录下。

添加分类、标签云widget

很简单,在themes/light/_config.yml中,添加如下:

widgets:
- category
- tagcloud

添加友情链接widget

themes/light/layout/_widget中新建名为blogroll.ejs的文件,编辑内容如下:

<div class="widget tag">
<h3 class="title">友情链接</h3>
<ul class="entry">
<li><a href="http://szcx.pw/" title="蓝江老涌的博客">遂州创信</a></li>
<li><a href="http://lxy361.tk/" title="Hexo博客">Hexo博客</a></li>
</ul>
</div>

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

  1. 新浪微博开放平台设置和生成微博秀代码。我用的139邮箱注册新浪。
  2. themes/light/layout/_widget中新建名为weibo.ejs的文件,将刚才的代码直接保存到这里。
  3. themes/light/_config.yml中,添加如下:
     widgets:  #站点右边栏,暂时默认,后面介绍修改和添加
      - search
     - category
     - tagcloud  #标签云
     - intro
     - weibo    #新浪微博秀
     - blogroll    #友情链接
    

主页文章显示摘要

编辑md文件的时候,在要作为摘要的文字后面添加``即可。

修改背景图片、文字颜色等

  • 找到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区块中的属性,就可以改变网站不同元素的颜色了。

重头戏来了,我修改的themes\light\_config.yml文件

menu: #站点右上角导航栏,暂时默认
  首页: /
  归档: /archives
  关于: /about

widgets:  #站点右边栏
- search
- category
- tagcloud  #标签云
- intro
- weibo    #新浪微博秀
- blogroll    #友情链接

excerpt_link: 阅读全文 #替换为中文

plugins: 
- hexo-generator-feed

twitter: #右边栏要显示twitter展示的话,需要在此设置
  username: 
  show_replies: false
  tweet_count: 5

addthis: #SNS分享,身在天朝,当然用“百度分享”,暂时默认
  enable: true
  pubid:
  facebook: true
  twitter: true
  google: true
  pinterest: true

fancybox: true #图片效果,默认
google_analytics: #要使用google_analytics进行统计的话,这里需要配置ID
rss: /atom.xml #生成RSS,需要配置路径

根目录下的_config.yml文件设置

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

# Site
title: 遂州创信
subtitle: 蓝江老涌的博客
description: 学习总结 思考感悟 知识管理 # 网站描述
author: 蓝江老涌
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 文章布局、写作格式的定义,不修改
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 #每页5篇文章
pagination_dir: page

# Disqus #社会化评论disqus,我使用多说,在主题中配置
disqus_shortname:

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

#  Deployment 站点部署到github要配置,上一节中已经讲过
## 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的生成插件,需要手动安装和设置。步骤如下:

  • 安装RSS插件到本地:npm install hexo-generator-feed
  • 开启RSS功能:编辑hexo/_config.yml,添加如下代码:
    plugins:
    - hexo-generator-feed
    
  • 在站点添加链接:
    themes/light/_config.yml中,编辑 rss: /atom.xml
    themes/light/layout/_partial/header.ejs中,<ul></ul>之间,添加一样代码
    <li> <a href="/atom.xml">RSS</a> </li>

文章中插入图片

  • 使用markdown写文章,插入图片的格式为![图片名称](链接地址),这里要说的是链接地址怎么写。对于hexo,有两种方式:
  • 使用本地路径:在hexo/source目录下新建一个img文件夹,将图片放入该文件夹下,插入图片时链接即为/img/图片名称
  • 使用七牛,有图片的链接地址。格式为![图片名称](链接地址)我用的是139邮箱注册的七牛。

加入左上角「fork me on github」

这里有 github 给出的教程,把代码插入到任意一个全局的模板文件中就行,比如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 href="https://github.com/szcx" 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>

接下来发布我部署了的两个网址:
github
gitcafe

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 148,827评论 1 317
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 63,511评论 1 266
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 99,318评论 0 218
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,108评论 0 189
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,112评论 1 266
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,387评论 1 185
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,905评论 2 283
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,657评论 0 177
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,144评论 0 223
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,744评论 2 225
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,100评论 1 236
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,565评论 2 222
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,041评论 3 216
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,769评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,301评论 0 178
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,173评论 2 239
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,313评论 2 242

推荐阅读更多精彩内容

  • 1. 设置主题风格 打开 themes/next/_config.yml 文件,搜索 scheme 关键字,将你...
    迟道阅读 21,013评论 10 47
  • 看到有些next主题的网站很炫酷,那么是怎么配置的呢?接下来我会讲一讲如何实现一些炫酷的效果 主要有以下32种: ...
    Moorez阅读 57,966评论 118 284
  • 摘要:这是一篇很详尽的独立博客搭建教程,里面介绍了域名注册、DNS设置、github和Hexo设置等过程,这是我写...
    lishan3333阅读 8,313评论 20 95
  • 王者荣耀是一部手游,也是个多人游戏。有着团体的意思:赵云、刘备、关羽、张飞、宫本五藏、吕布、李白、孙悟空…… 召唤...
    篮球手阅读 169评论 0 1
  • 字符串 字符串型: NSString :OC不可变字符串 NSMutableString :可变字符串 字符串的创...
    dliys阅读 559评论 1 5