Hexo官方landscape主题解析

landscape

抱着想要弄出一个属于自己主题的想法,我打算先研究一下官方的landscape主题的源码。
一切对我来说都是新的,慢慢来吧,希望有一天能够实现,希望不要半途而废。
做此纪录,供大家相互学习。

Hexo官方landscape主题解析

Gruntfile.js

https://www.gruntjs.net/getting-started

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
37
38
39
40
41
42
43
44
45
46
47
48
49
module.exports = function(grunt){
// 任务配置和目标 https://www.gruntjs.net/api/grunt.config#grunt.config.init
grunt.initConfig({
gitclone: {
fontawesome: {
options: {
repository: 'https://github.com/FortAwesome/Font-Awesome.git',
directory: 'tmp/fontawesome'
},
},
fancybox: {
options: {
repository: 'https://github.com/fancyapps/fancyBox.git',
directory: 'tmp/fancybox'
}
}
},
copy: {
fontawesome: {
expand: true,
cwd: 'tmp/fontawesome/fonts/',
src: ['**'],
dest: 'source/css/fonts/'
},
fancybox: {
expand: true,
cwd: 'tmp/fancybox/source/',
src: ['**'],
dest: 'source/fancybox/'
}
},
_clean: {
tmp: ['tmp'],
fontawesome: ['source/css/fonts'],
fancybox: ['source/fancybox']
}
});

require('load-grunt-tasks')(grunt);

// 重命名任务 https://www.gruntjs.net/api/grunt.task#grunt.task.renametask
grunt.renameTask('clean', '_clean');

// 创建任务 https://www.gruntjs.net/api/grunt.task#grunt.task.registertask
grunt.registerTask('fontawesome', ['gitclone:fontawesome', 'copy:fontawesome', '_clean:tmp']);
grunt.registerTask('fancybox', ['gitclone:fancybox', 'copy:fancybox', '_clean:tmp']);
grunt.registerTask('default', ['gitclone', 'copy', '_clean:tmp']);
grunt.registerTask('clean', ['_clean']);
};

LICENSE

版权申明

README.md

文档说明

_config.yml

主题配置文件

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
37
# Header 页眉导航栏
menu: # 导航菜单
Home: / # 主页
Archives: /archives # 归档页
rss: /atom.xml # RSS文件

# Content 主体内容
excerpt_link: Read More # “Read More” 链接. 设置为false可以隐藏
fancybox: true # 不知道怎么用

# Sidebar 侧边栏
sidebar: right # 侧边栏样式. 可以选择 left, right, bottom or false 进行设置.
widgets: # 侧边栏显示的部件
- category
- tag
- tagcloud
- archive
- recent_posts

# display widgets at the bottom of index pages (pagination == 2)
index_widgets:
# - category
# - tagcloud
# - archive

# widget behavior 部件设置
archive_type: 'monthly' # 按月
show_count: true # 显示归档分类下的post数量

# Miscellaneous
google_analytics: # Google Analytics ID
gauges_analytics:
favicon: /favicon.png # Favicon 路径
twitter: # Twiiter ID
google_plus: # Google+ ID
fb_admins:
fb_app_id:

languages

1
2
3
4
5
6
7
8
9
10
11
12
13
|-- languages   语言包
| |-- de.yml
| |-- default.yml
| |-- es.yml
| |-- fr.yml
| |-- ja.yml
| |-- ko.yml
| |-- nl.yml
| |-- no.yml
| |-- pt.yml
| |-- ru.yml
| |-- zh-CN.yml 中文简体
| |-- zh-TW.yml 中文繁体

layout

使用EJS模板语言组织页面结构

入门: https://ejs.bootcss.com/

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
|-- layout      布局模板目录
| |-- _partial 局部模板目录
| | |-- after-footer.ejs
| | |-- archive-post.ejs
| | |-- archive.ejs 归档模板
| | |-- article.ejs 文章模板
| | |-- footer.ejs 页脚模板
| | |-- gauges-analytics.ejs gauges流量统计
| | |-- google-analytics.ejs google流量统计
| | |-- head.ejs head标签模板
| | |-- header.ejs header页眉模板
| | |-- mobile-nav.ejs 手机导航栏模板
| | |-- post 文章模板目录
| | | |-- category.ejs 分类模板
| | | |-- date.ejs 日期模板
| | | |-- gallery.ejs 相册模板
| | | |-- nav.ejs 导航栏模板
| | | |-- tag.ejs 标签模板
| | | |-- title.ejs 标题模板
| | |-- sidebar.ejs 侧边栏模板
| |-- _widget 小工具模板
| | |-- archive.ejs 归档工具模板
| | |-- category.ejs 分类工具模板
| | |-- recent_posts.ejs 最近文章工具模板
| | |-- tag.ejs 标签工具模板
| | |-- tagcloud.ejs 标签云工具模板
| |-- archive.ejs 归档页模板
| |-- category.ejs 分类页模板
| |-- index.ejs 主页模板
| |-- layout.ejs
| |-- page.ejs 页面模板
| |-- post.ejs 文章目标
| |-- tag.ejs 标签也模板

scripts

1
2
|-- scripts
| |-- fancybox.js

fancybox.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var rUrl = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[.\!\/\\w]*))?)/;

/**
* Fancybox tag
*
* Syntax:
* {% fancybox /path/to/image [/path/to/thumbnail] [title] %}
*/

hexo.extend.tag.register('fancybox', function(args){
var original = args.shift(),
thumbnail = '';

if (args.length && rUrl.test(args[0])){
thumbnail = args.shift();
}

var title = args.join(' ');

return '<a class="fancybox" href="' + original + '" title="' + title + '">' +
'<img src="' + (thumbnail || original) + '" alt="' + title + '">'
'</a>' +
(title ? '<span class="caption">' + title + '</span>' : '');
});

source

主题目录树

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
.
|-- Gruntfile.js 用来配置或定义任务(task)并加载Grunt插件的。
|-- LICENSE
|-- README.md 文档说明
|-- _config.yml 主题配置文件
|-- languages 语言包
| |-- de.yml
| |-- default.yml
| |-- es.yml
| |-- fr.yml
| |-- ja.yml
| |-- ko.yml
| |-- nl.yml
| |-- no.yml
| |-- pt.yml
| |-- ru.yml
| |-- zh-CN.yml 中文简体
| |-- zh-TW.yml 中文繁体
|-- layout 布局模板
| |-- _partial 局部布局模板
| | |-- after-footer.ejs
| | |-- archive-post.ejs
| | |-- archive.ejs 归档模板
| | |-- article.ejs 文章模板
| | |-- footer.ejs 页脚模板
| | |-- gauges-analytics.ejs gauges流量统计
| | |-- google-analytics.ejs google流量统计
| | |-- head.ejs head标签模板
| | |-- header.ejs header
| | |-- mobile-nav.ejs
| | |-- post
| | | |-- category.ejs
| | | |-- date.ejs
| | | |-- gallery.ejs
| | | |-- nav.ejs
| | | |-- tag.ejs
| | | |-- title.ejs
| | |-- sidebar.ejs
| |-- _widget 小工具模板
| | |-- archive.ejs 归档工具模板
| | |-- category.ejs 分类工具模板
| | |-- recent_posts.ejs 最近文章工具模板
| | |-- tag.ejs 标签工具模板
| | |-- tagcloud.ejs 标签云工具模板
| |-- archive.ejs 归档页模板
| |-- category.ejs 分类页模板
| |-- index.ejs 主页模板
| |-- layout.ejs
| |-- page.ejs 页面模板
| |-- post.ejs 文章目标
| |-- tag.ejs 标签也模板
|-- package.json
|-- scripts
| |-- fancybox.js
|-- source
|-- css
| |-- _extend.styl
| |-- _partial
| | |-- archive.styl
| | |-- article.styl
| | |-- comment.styl
| | |-- footer.styl
| | |-- header.styl
| | |-- highlight.styl
| | |-- mobile.styl
| | |-- sidebar-aside.styl
| | |-- sidebar-bottom.styl
| | |-- sidebar.styl
| |-- _util
| | |-- grid.styl
| | |-- mixin.styl
| |-- _variables.styl
| |-- fonts
| | |-- FontAwesome.otf
| | |-- fontawesome-webfont.eot
| | |-- fontawesome-webfont.svg
| | |-- fontawesome-webfont.ttf
| | |-- fontawesome-webfont.woff
| |-- images
| | |-- banner.jpg
| |-- style.styl
|-- fancybox
| |-- blank.gif
| |-- fancybox_loading.gif
| |-- fancybox_loading@2x.gif
| |-- fancybox_overlay.png
| |-- fancybox_sprite.png
| |-- fancybox_sprite@2x.png
| |-- helpers
| | |-- fancybox_buttons.png
| | |-- jquery.fancybox-buttons.css
| | |-- jquery.fancybox-buttons.js
| | |-- jquery.fancybox-media.js
| | |-- jquery.fancybox-thumbs.css
| | |-- jquery.fancybox-thumbs.js
| |-- jquery.fancybox.css
| |-- jquery.fancybox.js
| |-- jquery.fancybox.pack.js
|-- js
|-- script.js
文章作者: XIAO
文章链接: http://yoursite.com/2019/10/13/Hexo官方landscape主题解析/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 XIAO
微信打赏
支付宝打赏