Anisina 中文使用教程

9月4号更新

作者 Haojen Ma 日期 2016-08-06
Anisina 中文使用教程

Anisina


简单 / 轻巧 / 优雅

Anisina

下个版本考虑添加的功能

  • 添加自订页面logo功能 ( 感谢 @thankuu 的建议) ☑️
  • 如果你有更多更好的建议 , 请联系我, 我的邮箱 haojen.ma@gmail.com , 或者你也可以在主题里发起 issue 给我留言 : )

V3.0 (2016.09.04) 更新 🔝

  1. 细节上增加了一些动画
  2. 修复了 HTTPS 的BUG , 但是在博文页面还是会有安全警告, 原因是嵌入的多说回复系统默认使用的是 http , 不知 disqus 是否有该问题, 用过的用户可以告之一下
  3. 支持了网页 emoji , 启用方法见 这里 😄
  4. 支持自订页面 favicon , 直接在 _config.yml 里添加 favicon: 你的favicon.png
  5. 字体样式调整
  6. 博文 toc 调整
  7. BUG 修复
  8. 性能优化

V2.0 新功能

  1. 双击顶部导航条返回顶部
  2. 支持swiftfy搜索
  3. 新增友链功能
  4. 自由切换CDN和其它外网图床链接
  5. 支持 Safari chrome 沉浸式状态栏
  6. 支持 Disqus 评论系统
  7. 支持浏览量统计

调整

  1. 微信标题将统一使用页面标题图片
  2. 主页博文间距调整
  3. 主页博文标题字体样式调整
  4. 头像的定义需要使用绝对路径,而非资源出现在CDN的名字

特别感谢

感谢 @HipHopCoderS 对主题的PR 感谢 @刘晓婉 对主题的PR

已知问题

  1. 在微信或其它国产移动浏览器中双击导航条无法返回顶部的问题(因为双击微信标题就可以回到页面顶部了,所以这个bug不太影响体验)

其它

推荐大家移动端使用 Chrome 浏览器,主题专门针对 Chrome & Safari 优化 :)

概览

  • 作者: Haojen Ma
  • 最新版本:v2.0
  • 兼容: Hexo 3 or Lanter

功能

  • 响应式
  • 支持七牛CDN
  • 支持TOC
  • 支持多说和 Disqus
  • 支持谷歌和百度统计
  • SEO
  • 移动端沉浸式状态栏
  • 搜索
  • 浏览统计

安装

  1. 第一步

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

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

  1. 修改
    themes 为:

    themes: Anisina

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

    4. 完

    ### 快速开始

    #### 配置

    You can easily get stared by modifying ```config.yml
Site settings
title: Anisina Blog             # title of your website
SEOTitle: Anisina Blog          # check out docs for more detail
description: "Cool Blog"    

SNS settings      
github_username: haojen     # modify this account to yours
weibo_username: haojen      # the footer woule be auto-updated.

cdn-url: "http://your-cdn.com/"      # images cdn path

# Qiniu imageView2 API
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-post: "?" # you can custom post width and height
clip-home-post-bg: "?imageView2/1/w/800/h/300/interlace/1/q/70"

# 博文默认图片(如果不设置这一项, 博文标题的图片默认是灰色的)
post-default-img: post-default.jpg

# 友链, 请务必按以下格式书写
friends: [
	{
		title: "your friend title",
		href: "your fiend path"
	},
	{
		title: "your friend title 2",
		href: "your friend path 2"
	}
] 

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 serve 在本地查看效果

clip-*

七牛 imageView2 API

如果你想使用 imageView2 API ,你必须使用七牛CDN 关于该API的详情,请点击这里:click here

统计

Google 统计和百度统计配置:

#Baidu Analytics**
ba_track_id: 4cc1f2d8f3067386cc5cdb626a202900

#Google Analytics
ga_track_id: 'UA-49627206-1'            # Format: UA-xxxxxx-xx
ga_domain: huangxuan.me

拷贝你自己的配置信息到上述地址。

评论系统

主题支持 Disqus 和多说评论,要想使用这两者,需要对其进行使用配置

首先,你需要注册其中任何一个评论系统的帐号,这非常简单

第二步,你可以将你注册好的配置信息,填写到以下配置项里:

duoshuo_username: _your_duoshuo_short_name_
# OR
disqus_username: _your_disqus_short_name_

功能标签

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     

<!--Mini-About-Me module display all your SNS buttons also your avatar and the description if you set sidebar-avatar and sidebar-about-description which is very useful and common for a sidebar so it is default with your sidebar.--> <!-- It is really nice-looking and well-designed. It would be hidden in a small screen seeing the sidebar would be push to bottom and there is already a footer including SNS feature which is similar. -->

博文

以下是博文配置

---
layout: post
title: "Hola 2016"
subtitle: "hi, I'm haojen ma"
date: 2016-05-26 06:00
author: "Haojen Ma"
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'

下面是个演示

poetry-demo

博文标题背景图片

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

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

cdn (V2.0 新功能)

使用 cdn 标签,切换单页面背景图片的URL

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

About

  • 如果你喜欢的话不妨给一个 star ,或者有任何建议的话可以直接在github上联系我 :)

开源协议

Apache License Version 2.0