修改blog主题总结

记录修改主题的过程和坑点、分享心得

作者 xiaoyouPrince 日期 2016-05-26
总结
修改blog主题总结

前言

经过半天的折腾，终于把blog主题调整成自己较为满意的样子了，遂在此记录一下，主要目的如下：

  • 这里记录一下这个过程
  • 记录一下里面的坑点
  • 记录一下当前blog主题的现状
  • 顺便分享一下这一上午工作的心得。

【注】
此 theme 名称：Anisina —作者：Haojen Ma —原使用教程在此

修改过程

今天上午的在Hexo.io官网上找到 Themes 查询开源免费主题，找到Anisina。根据官方教程下载源代码到本地。

大致工作过程如下：

安装和最基本使用

  1. 第一步

    git clone https://github.com/Haojen/hexo-theme-Anisina.git

    然后将 clone 下的文件夹拷贝到 Hexo theme folder

  2. 修改 hexo 文件夹下 _config.yml 中
    themes 为：

    themes: Anisina

  3. 或者直接拷贝 Anisina 文件夹下的 _config.yml 替换 hexo 默认的 _config.yml

  4. 修改 hexo 文件夹下 _config.yml来开始

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: xiaoyouPrince
subtitle: 在这里你可以根据标签，快速检索文章
description: 记录技术积累之路、愿明天更美好
author: xiaoyouPrince
language: zh-CN
timezone: Asia/Shanghai
# custom Site settings
# more detail check out docs
SEOTitle: xiaoyou's blog 
header-img: //o7bkkhiex.bkt.clouddn.com/lion-blur-bg.jpg
email: xiaoyouPrince@163.com
keyword: # seo key words
favicon: http://upload-images.jianshu.io/upload_images/1256297-fafd7a5e5c553bd3.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240# your favicon png
# custom end
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://xiaoyouprince.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
# SNS settings
# RSS:
weibo_username: xiaoyouPrince
zhihu_username: xiaoyouPrince
github_username: xiaoyouPrince
twitter_username: 
facebook_username:  
linkedin_username:  
# Build settings
anchorjs: false                        # if you want to customize anchor. check out line:181 of `post.html`
# Disqus settings 
disqus_username: 
# Duoshuo settings
duoshuo_username:  # 你的多说帐号
# Share component is depend on Comment so we can NOT use share only.
duoshuo_share: true                     # set to false if you want to use Comment without Sharing
# Analytics settings
# Baidu Analytics
ba_track_id:
# Google Analytics
ga_track_id:             # Format: UA-xxxxxx-xx
ga_domain:
# Sidebar settings
sidebar: true
sidebar-about-description: 一个90后小骚年# 个人描述
sidebar-avatar: http://upload-images.jianshu.io/upload_images/1256297-d2a8d67a141f0e7a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240    # use absolute URL
# Featured Tags
featured-tags: true                     # whether or not using Feature-Tags
featured-condition-size: 1              # A tag will be featured if the size of it is more than this condition value
# friends
friends:  [
          {
            title: "xiaoyouPrince",
            href: "http://www.cnblogs.com/xiaoyouPrince/"
          }
]# 友链 -- 格式如下
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# 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: true
relative_link: false
future: true
highlight:
  enable: true
  line_number: false
  auto_detect: false
  tab_replace:
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# 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-DD
time_format: HH:mm:ss
# Pagination
## Set per_page to 0 to disable pagination
per_page: 8
pagination_dir: page
# Extensions
## Plugins: https://hexo.io/plugins/
markdown:
  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
    - markdown-it-emoji
## Themes: https://hexo.io/themes/
theme: Anisina
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/xiaoyouPrince/xiaoyouPrince.github.io.git
  branch: master
# img CDN path
cdn-url:  http://oozx6yayl.bkt.clouddn.com/  # 你的CDN地址
# Qiniu imageView2 API
# More info http://developer.qiniu.com/code/v6/api/kodo-api/image/imageview2.html
clip-content: "?imageView2/1/w/1400/h/400/interlace/1/q/90"
clip-avatar: "?imageView2/2/w/300/h/300/interlace/1/q/90"
clip-home-post-bg: "?imageView2/1/w/800/h/300/interlace/1/q/70"
# post default images
post-default-img: http://upload-images.jianshu.io/upload_images/1256297-fafd7a5e5c553bd3.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
post-default-img-mobile: http://upload-images.jianshu.io/upload_images/1256297-fafd7a5e5c553bd3.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240#移动端显示的图片
# search api , set your custom key
swiftype_key: 
# archive page title 
archive:
    title: archives
    description: 可以根据归档日期检索所有文件

cdn-Url

  1. 注册一个自己的七牛CDN，然后拷贝自己的CDN URL：
    cdn-url: http://you-cdn.com/
  2. 在七牛中创建对象存储，然后上传自己的图片
  3. 在博文的 front-matter 上指定图片名称
    header-img: some-images.png

创建一个Tags导航页面

  1. 运行命令:hexo new page "tags", 这会在博客的 source 目录下生成一个名为 tags 的文件夹, 里面会有一个 index.md 格式的页面,如果没有请手动创建.
  2. 然后打开 yourblog/source 文件夹 , 找到 tags/index.md 这个文件, 然后设置在两条的—里面, 指定一个 layout: tags值.注意 key 和 value 之间的空格
  3. 然后运行命令,重新生成博客内容: hexo clean && hexo g, 然后可以运行 hexo server 在本地查看效果

功能标签

此标签是上面_config.yml中的一小段

featured-tags: true  
featured-condition-size: 1     # A tag will be featured if the size of 	it is more than this condition value

侧边栏的个人简介

此是主题右侧个人信息部分设置

# Sidebar settings
sidebar: true
sidebar-about-description: "your description here"
sidebar-avatar: avatar-hux.jpg 
```    
### 博文
以下是博文的配置，此部分便是博文的 front-matter
```yml
---
layout: post
title: "xiaoyouPrince 2016"
subtitle: "hi, I'm xiaoyouPrince"
date: 2016-05-26 06:00
author: "xiaoyouPrince"
header-img: "img/post-default.jpg"
cdn: 'header-on'
tags:
	- Movies
	- Life
---

创建一条博文

hexo new "your-post-name"

创建一条博文的同时，也会创建一个以该博文名命名的文件夹： source/_posts

如果你喜欢古诗，你也可以使用 poetry 布局：

hexo new poetry 'your-poetry-name'
【注】诗歌布局的 front-matter 中 layout如下
layout: poetry

演示如下：

博文标题背景图片

header-img: "http://sometest.png"

如果你没有设置的话，会默认使用 _config.yml 下post-default-img指定的背景图像

cdn (V2.0 新功能)

使用 cdn 标签，切换单页面背景图片的URL(这个好像没有什么用)

cdn: 'header-off' 
header-img: "http://www.imagestest.com/god.png"

目前blog现状

目前使用本主题的现状就是安装了上面的部分，当然还有一部分功能没有加入进来，日后会根据需要加入

【已有功能：】

  1. 不同blog的背景图片（通过注册七牛cdn支持）
  2. 设置Tags分类，可以根据tag来查找blog
  3. 添加 诗歌布局 — 诗歌布局中，诗歌文字过少会排版错乱（这是个坑）
  4. 添加 友情链接

【未加入功能：】

  1. 页面的统计功能： 百度/google
  2. 评论系统：多说/disqus

体会

人人都是有惰性的，当做一件事情的时候往往感觉这件事做完了会有收获，做完之后要好好记录一下这个过程，既避免日后踩坑也可帮助他人。但是做完之后就突然不想去重温当时’痛苦‘的过程。心中还会有中窃喜，并觉得就这么回事，肯定也忘不了，从而打消记录的想法，并放弃了深刻一下的机会。

这种想法和愚蠢，需要主动克制！

only one

FEATURED TAGS
总结
FRIENDS