获取中...

-

Just a minute...

零、准备工作

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

  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主题更新日志
  • 第十四封信·琼萼

    碧云之下, 一分春意, 二分意中人。 App:一言 / 作者:冰野

    第十四封信·琼萼
  • 绝色/余光中

    月色与雪色之间,你是第三种绝色。 美丽而善变的巫娘,那月亮翻译是她的特长却把世界译走了样把太阳的鎔金译成了流银把烈火译成了冰而且带点薄荷的风味凡尝过的人都说译文是全不可靠但比起原文来呢却更加神秘,更加美雪是另一位唯美的译者存心把世界译...

    绝色/余光中
  • 选调和选韵

    填 词既称倚声之学,不但它的句度长短,韵位疏密,必须与所用曲调(一般叫做词牌)的节拍恰相适应,就是歌词所要表达的喜、怒、哀、乐,起伏变化的不同情感,也得与每一曲调的声情恰相谐会,这样才能取得音乐与语言、内容与形式的紧密结合,使听者受...

    选调和选韵
  • 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