获取中...

零、准备工作

开始之前,你应该预先理解下列标签的意义:

  1. 代码对比
1
2
3
  This is a diff block.
+ This is add!
- This is subtract!
  1. 信息提示

这是一个info提示

这是一个success提示

这是一个warning提示

这是一个danger提示

  1. 名词约定
序号 名词 说明 目录
1 站点配置文件 站点目录下的_config.yml文件 hexo/_config.yml
2 主题配置文件 主题目录下的_config.yml文件 hexo/themes/Annie/_config.yml
3 页头背景 网页页头背景 html/header(网页标签)

一、LOGO和FAVICON

编辑主题配置文件,设置faviconlogo的路径即可。当然,你可以使用文字logo或图片logo,即logo的值为空时,主题使用title的值作为logo!

1
2
3
4
5
6
7
8
# favicon & logo
# if the value of logo is false, the 'title' is optional.
-favicon: /img/favicon.ico
-logo: /img/logo.png
-title: Welcome
+favicon: /img/your-favicon.ico
+logo: /img/your-logo.png
+title: your-title

二、页头背景图片

文章详情页的页头背景图片为该文章的封面图,其他页的页头背景图片为随机图片或固定图片。原则上,使用固定图片时,应将参数mode设为normal,然后设置normal_url的路径;使用随机图片时,应将参数mode设为random,然后设置random_url的路径。

warning!
注意跨域问题,尽量不使用跨域的图片(即背景图片和网页最好托管在一起,存放于同一服务器)

  1. 使用固定图片,请确保参数mode设为normal,然后设置参数normal_url的值
1
2
3
4
5
6
7
8
9
10
# background_image
# /img/1.jpg
# https://source.unsplash.com/collection/954550/1920x1080
# https://sariay.github.io/Random-img/
# May be cause CROS bug!
background_image:
+ mode: normal #normal or random
+ normal_url: /img/1.jpg
random_max: 110
random_url: https://sariay.github.io/Random-img/
  1. 使用unplash随机图片,请确保参数mode设为normal,然后设置参数normal_url的值
1
2
3
4
5
6
7
8
9
10
# background_image
# /img/1.jpg
# https://source.unsplash.com/collection/954550/1920x1080
# https://sariay.github.io/Random-img/
# May be cause CROS bug!
background_image:
+ mode: normal #normal or random
+ normal_url: https://source.unsplash.com/collection/954550/1920x1080
random_max: 110
random_url: https://sariay.github.io/Random-img/
  1. 使用自定义随机图片,请确保参数mode设为random,然后设置参数random_maxrandom_url的值
  • 第一步、fork 随机图片集
  • 第二步、开启你所fork的仓库的page服务;
  • 第三步、获取相对地址;
  • 第四步、设置random_url为获得的相对地址。
1
2
3
4
5
6
7
8
9
10
# background_image
# /img/01.jpg
# https://source.unsplash.com/collection/954550/1920x1080
# https://sariay.github.io/Random-img/
# May be cause CROS bug!
background_image:
+ mode: random #normal or random
normal_url: https://source.unsplash.com/collection/954550/1920x1080
+ random_max: 110
+ random_url: https://sariay.github.io/Random-img/

你可以将随机图片集上传到图床(腾讯云、七牛云等),然后获取https://....../Random-img/格式的地址,最后将random_url的值设置为该地址。

你也可以在主题目录下的img文件夹中新建Random-img文件夹,将0.jpg1.jpg2.jpg3.jpg……110.jpg命名格式的图片放入其中,然后将random_url的值设置为/img/Random-img/

warning!

图片的命名使用连续的整数,random_max的值小于等于(0、1、2、3…..110)的最大整数。(ps:如你偏爱访问速度🙃,尽可能使用固定图片)

三、随机名言与当地时间

每次刷新网页,网页页头展示一条随机名言,获取并展示该时区的标准时间。

1
2
3
4
5
6
7
8
# show motto
motto:
enable: true

# show current time
+ #This is only a demo, please go to "https://time.is" to set your city time!
timejs:
enable: true

四、预加载遮罩

预加载遮罩的作用为,确保背景图片加载完成和背景构造完成。当背景加载并构造完成时,主题立即移除遮罩。预加载行为的超时时间默认设为10s,即最多10s左右后,不管背景是否加载并构造完成,主題都移除遮罩。你可以决定是否使用:

1
2
3
4
5
# 02-PROLOADER
# animation: spinner, transition or cyclic
preloader:
enable: true
animation: transition

五、首页的使用

首页文章展示有两种模式:图文模式cart和纯净模式pure。默认图文模式(cart),你只需编辑主题配置文件,设置index-style的参数,即可使用或扩展指定的主页文章展示模式。

1
2
3
4
5
6
# 03-INDEX
# index-style: pure, cart or poem
+index_style: cart

# index_cart_cover
cover: /img/cart_cover.jpg

5.1文章封面图

1
2
3
4
5
title: Annie主题使用说明
date: 2018-08-27 20:16:19
+cover: /img/post-cover/74.jpg
categories: HEXO博客
tags: 说明

cover参数值即为图片路径,路径可为相对路径或绝对路径。

5.2首页的分页

hexo博客默认首页分页,编辑站点配置文件,置参数per_page为1、2、3…..以达到分页目的,0则不分页。

1
2
3
4
5
6
7
8
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
+index_generator:
path: ''
+ per_page: 5
order_by: -date

5.3文字的截断

1
2
3
4
# post_excerpt for index page
excerpt_cart: 80
excerpt_pure: 300
excerpt_link: true

excerpt_cart为图文模式的截取字数,推荐小于等于100。excerpt_pure为纯净模式的截取字数,推荐字数为300。excerpt_link阅读更多按钮展示与否的开关。

六、归档页的使用

Annie主题的归档页按年归档,不分页。当然,可以置参数archive_generator.per_page站点配置文件)为1、2、3…..以达到分页目的。

warning!

Annie主题中无效,分页是对该页面[主页、归档页、标签页、分类页]的文章进行分页,即每次(每页)展示指定数量的文章

1
2
3
4
5
6
7
8
9
10
11
12
archive: 1
category: 1
tag: 1

archive_generator:
per_page: 10

tag_generator:
per_page: 0

category_generator:
per_page: 0

七、分类页的使用

执行命令,创建分类页

1
$ hexo new page categories

然后编辑站点目录下的source/categories/index.md,添加如下Front-matter

1
2
3
4
title: categories
date: 2019-03-30 19:25:34
+ layout: categories
+ type: categories

八、标签页的使用

执行命令,创建标签页

1
$ hexo new page tags

然后编辑站点目录下的source/tags/index.md,添加如下Front-matter

1
2
3
4
title: tags
date: 2019-03-30 19:25:34
+ layout: tags
+ type: tags

九、关于页的使用

执行命令,创建关于页

1
$ hexo new page about

然后编辑站点目录下的source/about/index.md,添加如下Front-matter

1
2
3
4
title: about
date: 2019-03-30 19:25:34
+ layout: about
+ type: about

十、相册页的使用

执行命令,创建相册页

1
$ hexo new page gallery

然后编辑站点目录下的source/gallery/index.md,添加如下Front-matter

1
2
3
4
title: gallery
date: 2019-03-30 19:25:34
+ layout: gallery
+ type: gallery

打开文件data.json(Annie/source/plugin/gallerypage/data.json), 按照json语法在数组[……]中添加gallery的图片数据,请设置合适的eWidtheHeight的值。

warning!

注意:下列注释在json文件中无效,使用时请去掉注释。(注释仅为说明)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
[
{},
{
"thumbnail": "https://img.jpg", //小图路径
"enlarged": "https://img.jpg", //大图路径(可与小图一致)
"title": "百里守约", //图片标题
"categories": [{
"id": 9, //根据id来进行分类
"title": "百里玄策",
"photo_count": 41787, //可忽略
"links": { //可忽略
"self": "https://img.jpg",
"photos": "https://img.jpg"
}
}
],
"tWidth": 800.6130030959752, //小图相对宽度
"tHeight": 500, //小图相对高度
"eWidth": 3630, //大图相对宽度
"eHeight": 2907 //大图相对高度
},
{}
]

当然,你可以将该文件data.json移至其他目录,相应地修改路径gallery_data

1
2
3
4
5
6
7
# gallery page
# gallery_format: natural | square
gallery_format: natural
# one time to load 4 rows or other count, 0 to load img automatically when scrolling.(0,1,2,3,4,5,6......)
gallery_limit: 0
# data url
+ gallery_data: plugin/gallerypage/data.json

十一、关于站内搜索

若此时仍未配置站内搜索,则执行命令,安装插件hexo-generator-search-zip

1
$ npm install hexo-generator-search-zip --save

编辑站点目录下的_config.yml,添加如下语句

1
2
3
4
5
6
search:
path: search.json
zipPath: search.zip
versionPath: searchVersion.txt
field: post
#field: post, page or all(3个可选参数)

编辑主题目录下的_config.yml,添加如下语句

1
2
3
4
5
6
7
8
9
# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
enable: true
# if auto, trigger search by changing input
# if manual, trigger search by pressing enter key or search button
trigger: auto
# show top n results per article, show all results by setting to -1
top_n_per_article: 2

十二、文章页问题

12.1分类和标签

1
2
3
4
5
6
7
title: Annie主题使用说明
date: 2018-08-27 20:16:19
cover: /img/post-cover/74.jpg
+ categories: HEXO博客
+ tags:
+ - 说明
+ - other tag

分类页的HEXO博客字段来源于文章Front-matter中的categories参数值,标签页的说明字段来源于文章Front-matter中的tags参数值。hexo博客框架只支持一个同级分类,支持多个同级标签。

12.2相关的文章

文章页将展示与当前文章具有相同分类、相同标签的系列文章,排序规则:分类>标签>时间>不相关文章。你可以决定是否使用该模块,posts_limit为显示的文章篇数,posts_excerpt为每篇文章的文字截取数量。

1
2
3
4
5
6
# 04-POST
# post_relate
relate:
enable: true
posts_limit: 10
posts_excerpt: 120

info!

只有全站博客文章篇数大于1且relate.enable为真时,该模块有效。

12.3阅读量计数

对于leancloud_count,你必须设置appid、appkey;对于busuanzi_count,你只需要开启它即可。

  1. leancloud计数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# post_count
leancloud_count:
+ enable: true
+ appid: 'dXz'
+ appkey: 'wzG'
like_post:
enable: true
+ visit_post:
enable: true
topN_post:
enable: true #param1 for topN_post
limit: 10 #param2 for topN_post
busuanzi_count:
enable: true

如果你使用过Valine评论插件,那么leancloud_count的使用十分简单。如果你没有使用过,请参考文章Hexo博客next主题添加文章阅读量统计功能创建leancloud应用,创建counter类,并获取其appid、appkey,且设置上面的appid、appkey为相应的值,最后开启visit_post

  1. 卜蒜子计数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# post_count
leancloud_count:
enable: false
appid: 'dX--'
appkey: 'dX--'
like_post:
enable: true
visit_post:
enable: true
topN_post:
enable: true #param1 for topN_post
limit: 10 #param2 for topN_post

busuanzi_count:
+ enable: true

该模块放置于页脚,文章页面只显示文章的阅读量,其他页面只显示总访问量访客数等待完善

12.4文章点赞

如果你完成了12.3阅读量计数leancloud计数的设置,那么只需要开启like_post

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# post_count
leancloud_count:
enable: false
appid: 'dX--'
appkey: 'dX--'
+ like_post:
+ enable: true
visit_post:
enable: true
topN_post:
enable: true #param1 for topN_post
limit: 10 #param2 for topN_post

busuanzi_count:
enable: true

12.5 文章排行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# post_count
leancloud_count:
enable: false
appid: 'dX--'
appkey: 'dX--'
like_post:
enable: true
visit_post:
enable: true
+ topN_post:
+ enable: true #param1 for topN_post
+ limit: 10 #param2 for topN_post

busuanzi_count:
enable: true

如果你完成了12.3阅读量计数leancloud计数的设置,那么只需要开启topN_post。(文章阅读排行依赖于12.3阅读量计数

info!

该模块放置于搜索页面,你可按需定制

12.6文章目录

若一篇文章的正文存在h1、h2、h3等标题,则文章页展示目录按钮。点击目录按钮,页面左侧展示文章目录。当屏幕宽度小于1024px或页面滚动高度大于文章正文高度时,页面隐藏文章目录。

1
2
3
4
# post_toc
post_toc:
enable: true
katelog: true

12.7数学公式

请先设置主题配置文件mathjax参数,再于文章的Front-matter中添加mathjax: true

1
2
3
# post_mathJax
mathjax:
+ enable: true
1
2
3
4
5
6
7
8
title: Annie主题使用说明
date: 2018-08-27 20:16:19
cover: /img/post-cover/74.jpg
+ mathjax: true
categories: HEXO博客
tags:
- 说明
- other tag

12.8代码块高亮

综合考虑hexo自身的代码高亮插件和hexo-pism-plugin高亮插件的特性及代码块解析规则,2019-04-27日更新后,主题弃用hexo-prism-plugin插件,参考&使用了next主题的代码高亮风格。

  1. 编辑主题配置文件,选择并设置highlight_theme的值
1
2
3
4
5
# post_code
# highlight_theme: normal | night | night blue | night bright | night eighties
+ highlight_theme: night bright
code_copy:
enable: true
  1. 编辑站点配置文件,设置highlight的值
_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 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: true
auto_detect: false
tab_replace:

warning!

请尽可能地指定相应代码块语言类型(html、js、c++、java……),以使高亮风格有效。

12.9代码块复制

只有theme.code_copy.enable为真且config.highlight.enable为真时,代码块的复制功能才有效。

1
2
3
4
5
# post_code
# highlight_theme: normal | night | night blue | night bright | night eighties
highlight_theme: night bright
code_copy:
+ enable: true

12.10文章评论功能

Hexo-theme-Annie主题集成了gitalk、DesertsP版的valine、livere评论插件。

序号 评论插件 使用方法
1 gitalk 正式文档Annie主题使用Gitalk
2 valine 正式文档加个Valine评论系统
3 livere 为Hexo博客添加LiveRe评论系统

warning!

对于gitalk,你必须设置clientID、clientSecret;对于Valine,你必须设置appid、appkey;对于livere,你必须设置livere_uid。

12.11文章分享功能

Hexo-theme-Annie主题集成了addThis、baiduShare、shareThis、socialShare分享插件。

序号 分享插件 使用方法
1 addThis 登录addThis获取应用的账户id
2 baiduShare 直接使用
3 shareThis 登录shareThis获取应用的账户id
4 socialShare 直接使用

info!

使用addThis、shareThis时,应注意关闭浏览器的内容拦截插件。

十三、站点分析

序号 分析插件 使用方法
1 卜算子分析 直接使用
2 baidu_analytics 需获取账户id
3 cnzz_analytics 需获取账户id
4 google_analytics 需获取账户id
5 tencent_analytics 需获取账户id

十四、其他的问题

14.1社交链接

直接增加相应的社交图标、社交链接即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# social
social:
github:
url: http://github.com/
icon: fa fa-github
weibo:
url: http://github.com/
icon: fa fa-weibo
pinterest:
url: http://github.com/
icon: fa fa-pinterest
instagram:
url: http://github.com/
icon: fa fa-instagram
twitter:
url: http://github.com/
icon: fa fa-twitter
rss:
url: /atom.xml
icon: fa fa-rss
+ digg:
+ url: http://github.com/
+ icon: fa fa-digg

14.2RSS订阅

主题将使用到 hexo-generator-feed 插件来生成atom.xml 文件。执行命令安装该插件:

1
npm install hexo-generator-feed --save

编辑站点配置文件,添加相应的参数:

1
2
3
4
+feed:
+ type: atom
+ path: atom.xml
+ limit: 20

执行 hexo clean & hexo g 重新生成博客文件,你将在 hexo/public/ 目录下看到 atom.xml 文件,说明你已经安装成功了。 (rss的社交链接见于上一节:1. 社交链接

14.3版权声明

对于copyright ,since为站点建立年份,cotent_author为站点作者。

_config.yml
1
2
3
# copyright  
since: 2017
cotent_author: Sariay

14.4点击页面浮现桃心

1
2
3
4
5
6
7
# when click, emerge heart
love:
enable: true

# back to top
totop:
enable: true

对于love,若设置为true,则点击页面时,会出现随机颜色的桃心💚💛💕。对于totop,若设置为true,则启用返回顶部按钮

十五、开发定制问题

15.1主题项目结构

Anniehexo-theme-Annie
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
ANNIE
├─languages #国际化语言支持
├─layout #html页面模板
│ └─_partial
│ ├─custom
│ ├─plugin
│ │ ├─clipboard
│ │ ├─comment
│ │ ├─share
│ │ └─statistics
│ ├─post
│ └─widget
├─scripts #站点脚本
└─source #主题资源
├─css
│ └─_highlight
├─img
│ ├─post-cover
│ ├─quote
│ └─random
├─js
└─plugin
├─chinese
├─clipboard
├─comment
├─fancybox
├─gallerypage
│ └─images
├─imgLazyLoader
├─imgResize
├─love
├─motto
├─nicescroll
├─search
├─toc
└─vibrant

Annie主题基于hexo 3.8.0、ejs、styl开发而成。一般来说,如果你想修改页面的html结构,请到layout目录下添加或修改相应的ejs文件; 如果你想修改页面元素的css样式,请到source/css目录下添加或修改相应的styl文件;如果你想添加一些js代码,原则上,自定义代码片段应添加于source/js/main.js文件中,引入的js文件应放置于source/plugin目录下。

15.2主题字体问题

主题整体字体大小,修改html标签的font-size属性

_main.styl
1
2
3
4
html {
- font-size: 16px;
+ font-size: 14px;
}

主题整体字体族,修改body标签的font-family属性

_main.styl
1
2
3
4
body {
- font-family: Ovo, Georgia, STZhongsong, "Microsoft YaHei", serif;
+ font-family: "PingFang SC", "Microsoft YaHei";
}

文章详情页字体族,修改#layout-post类的font-family属性

_post.styl
1
2
3
#layout-post {
+ font-family: "Source Sans Pro", "Segoe UI";
}

你可以检索styl文件,查询相应的标签或类,进而设置相应元素的屬性。

15.3页头菜单颜色

页头菜单颜色会根据背景的主题色变化非黑即白。亦即主题色为浅色时,字体为黑;主题色为深色时,字体为白。你可以参考main.js中函数Annie_ColorExtraction(img)。(修改、完善它)


愿温柔相待与你,满杯欢喜,不逐哀城!
相关文章
评论
分享
  • Annie主题使用Hexo-Tag-Plugins

    一、块引用Block Quote tag语法 123{% blockquote [author[, source]] [link] [source_link_title] %}content{% endb...

    Annie主题使用Hexo-Tag-Plugins
  • 相册主题Dream介绍

    新的HEXO主题,主要用于建立相册博客。目前已完成主页、归档页、标签页、分类页等常用页面,主题支持搜索、点赞、浏览人数统计、评论、分享、图片打包下载、图片fancybox浏览。主题演示站点:PREVIEW

    相册主题Dream介绍
  • Annie主题使用Gitalk

    应请求,特意写了这篇文章。文章涉及到了Github仓库的创建、OAuth应用的申请、Gitalk评论插件的使用,请读者按需取用。(文章不叙述具体概念及原理) Gitalk使用方法一新建仓库 点击你的用户名,定位到github用户主页,...

    Annie主题使用Gitalk
  • Annie主题更新日志

    2019-4-27 主题优化 commit b421393 类型 模块 说明 优化 文章模块 Markdown(重写样式,优化表格、引用等样式) 新增 文章模块 color quote(info、succes...

    Annie主题更新日志
  • QiXi(七夕):一些诗句

    I thought I would be the last shadow in your eyes. 一眼认定你,余生皆是你。 Between the moon and the snow, lies the beauty of yo...

    QiXi(七夕):一些诗句
  • webpack网站开发入门

    预先准备安装node.js:项目开始之前,确保安装了nodejs工具。原则上,你应使用最新的稳定版本(LTS),点击LTS的下载按钮即可。 开发工具:Sublime Text 3,Visual Studio Code, Atom,Hb...

    webpack网站开发入门
  • 《人间失格》抄录1

    手记之三 1 竹一的两大预言,兑现了一个,落空了一个。“被女人迷恋上“这一并不光彩的预言化作了现实,而”肯定会成为一个伟大的画家“的这一祝福性的预言却归于泡影。 我仅仅当上了给粗俗杂志投稿的无名的蹩脚漫画家而已。 由于镰仓的殉情自杀事...

    《人间失格》抄录1
  • 银字笙调,奈何初冬

    文章段落荏苒岁月覆盖了过往,有很多人已经沉沦在琼壶歌月之中,也有很多人长歌倚楼。 但在那滚滚红尘中,那座断桥,那场雪;那个秋,那个染火枫林都是昙花一现。而那座桥上,那个愀然的女子更是不入年华。 瑞雪初霁,那一刻有多少凝视?立于红褐色的...

    银字笙调,奈何初冬
  • 山鬼情书之零

    匹夫说我生来骄傲, I’m proud of my husband. 不肯半分折腰, Unwilling to half split up. 亦不能半分低头。 You can not half bow. 我将送喜欢的人远走, I...

    山鬼情书之零
  • toc标题测试

    h1标题:的霍华德和很多很多和很多很多和很多很多h2标题好的话的霍华德和和和好的话的霍华德和好的话h2标题h3标题h3标题h2标题h5h6h6h1标题h2标题h3标题h4标题h1标题:的霍华德和很多很多和很多很多和很多很多h2标题好的...

    toc标题测试