Hexo 有三种默认布局:post , page 和 draft
它们分别对应不同的路径,而您自定义的其他布局和post
相同,都将储存到 source/_posts文件夹。
也同时只有这个会被发布到服务器
配置文件_config.yml 有两个
前者称为 站点配置文件, 后者称为 主题配置文件。
添加头像
编辑 站点配置文件, 新增字段 avatar, 值设置成头像的链接地址。其中,头像的链接地址可以是:
- 方式1
将头像放置主题目录下的 source/uploads/ (新建uploads目录若不存在)
配置为:avatar: /uploads/avatar.png
或者 放置在 source/images/ 目录下
配置为:avatar: /images/avatar.png
-
方式2
设置语言
修改后网站图标都变成了中文字体
编辑站点配置文件
English en language: en
简体中文 zh-Hans language: zh-Hans
如:
作者昵称,站点描述
均为编辑站点配置文件
next还有主题可以设置
Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
Mist - Muse 的紧凑版本,整洁有序的单栏外观
Pisces - 双栏 Scheme,小家碧玉似的清新
Scheme 的切换通过更改 主题配置文件
如
#scheme: Muse
#scheme: Mist
scheme: Pisces
设置 下面 侧栏 的位置
通过修改 主题配置文件 中的 sidebar
字段来控制侧栏的行为
注意 目前仅 Pisces Scheme 支持 position
sidebar:
# Sidebar Position, available value: left | right
#position: left //控制sideba的位置
position: right
# Sidebar Display, available value:
# - post expand on posts automatically. Default.
# - always expand for all pages automatically
# - hide expand only when click on the sidebar toggle icon.
# - remove Totally remove sidebar including sidebar toggler.
display: post //控制sidebar的显示时机
#display: always
#display: hide
#display: remove
post
- 默认行为,在文章页面(拥有目录列表)时显示
always
- 在所有页面中都显示
hide
- 在所有页面中都隐藏(可以手动展开)
remove
- 完全移除
设置 菜单(重点)
菜单配置包括两个部分,
第一是菜单项(名称和链接)
第二是菜单项的显示文本
第三是菜单项对应的图标
NexT 使用的是 Font Awesome 提供的图标
一 菜单映射的链接
修改主题配置文件
menu:
home: /
archives: /archives
#about: /about
#categories: /categories
tags: /tags
#commonweal: /404.html
二 菜单显示文本
(第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用 这个名称(如home) 查找对应的语言翻译,并提取显示文本)
这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml
({language}
为你所使用的语言)。
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
commonweal: 公益404
something: 有料
自定义菜单
以简体中文为例,若你需要添加一个菜单项,比如 something。
1. menu
something : /something
2. menu (比如主题目录下的language目录下的zh-Hans.yml)
something: 有料
3. 设置图标
那么就需要修改简体中文对应的翻译文件 languages/zh-Hans.yml,在 menu
字段下添加一项:
something: 有料
三 设置菜单的图标
此设定格式是 item name: icon name
icon name 是 Font Awesome 图标的 名字
menu_icons:
enable: true // 是否显示图标
# Icon Mapping.
home: home
about: user
categories: th
tags: tags
archives: archive
commonweal: heartbeat
item name 这3步骤都会用到 也就是键
设置社交链接
和设置Menu类似
因为仅仅配置了一个 Github链接,故仅仅显示一个
建立页面
直接在根目录的source路径下,新建一个404.html文件,就可以了
直接在根目录的source路径下,新建一个404.html文件,就可以了
然后可以配置 menu 映射下就可以在 上面显示
love: /404.html
当然 通过
hexo new page "love"
会在source目录下生成一个文件夹
source/love/index.md
这也是建立页面的一种方式
添加Menu时候映射
love: /love 即可(localhost:4000/love 实际上访问是localhost:4000/love/index.html)
友情链接
# Blogrolls
links_title: 友情链接
#links_layout: block
#links_layout: inline
links:
Java学习天地: https://wangli0.github.com
ruulai.com: https://wangli0.github.com
视听中国: https://wangli0.github.com
绚丽的图片文章
可能有人对这个
Reading页面中图片的fancybox
效果感兴趣,这个是怎么做的呢。
很简单,只需要在你的文章*.md
文件的头上添加 photos 项即可,然后一行行添加你要展示的照片:
layout: photo
title: 我的阅历
date: 2085-01-16 07:33:44
tags: [hexo]
photos:
- http://bruce.u.qiniudn.com/2013/11/27/reading/photos-0.jpg
- http://bruce.u.qiniudn.com/2013/11/27/reading/photos-1.jpg
经过测试,文件头上的layout: photo可以省略。
不想每次都手动添加怎么办?同样的,打开您的
hexo/scaffolds/photo.md
---
layout: {{ layout }}
title: {{ title }}
date: {{ date }}
tags:
photos:
---
然后每次可以执行带layout的new命令生成照片文章:
hexo new photo "photoPostName" #新建照片文章
如 :
---
layout: photo
title: girls
date: 2016-12-21 14:58:55
tags:
photos:
- http://bruce.u.qiniudn.com/2013/11/27/reading/photos-0.jpg
- http://bruce.u.qiniudn.com/2013/11/27/reading/photos-1.jpg
## girls looks well
测试...
小问题
此列表的多少与 文章编写时候添加的标签和分类有关,自动添加
无需我们操心
文章中添加标签或分类
在文章中点击或者标签或分类跳转没问题
但是自己配置显示menu的分类和标签跳转找不到路径的问题
注意点
布局(Layout)
Hexo 有三种默认布局:post、page 和 draft,
它们分别对应不同的路径,而您自定义的其他布局和post
相同,都将储存到 source/_posts
文件夹。
模版(Scaffold)
在新建文章时,Hexo 会根据 scaffolds
文件夹内相对应的文件来建立文件,例如:
$ hexo new photo "My Gallery
在执行这行指令时,Hexo 会尝试在 scaffolds
文件夹中寻找 photo.md,并根据其内容建立文章
以下是您可以在模版中使用的变量:
添加 类别和tags列表 (wen)
添加标签
hexo new page tags
确认站点配置文件里有tag_dir: tags
确认主题配置文件里有tags: /tags
编辑站点的source/tags/index.md,添加
title: tags
date: 2015-10-20 06:49:50
type: "tags"
comments: false
- 添加分类
hexo new page categories
确认站点配置文件里有category_dir: categories
确认主题配置文件里有categories: /categories
编辑站点的source/categories/index.md,添加
title: categories
date: 2015-10-20 06:49:50
type: "categories"
comments: false
问题解决:
http://www.zhihu.com/question/29017171
图片资源的使用
source 文件夹下面的文件在执行 hexo g 后 会把source下的所有文件放在public 文件夹下面。
public相等于网站根目录 \
至于本地图片如何使用,如下所示
---
layout: photo
title: girls
date: 2016-12-21 14:58:55
tags:
photos:
- http://bruce.u.qiniudn.com/2013/11/27/reading/photos-0.jpg
- http://bruce.u.qiniudn.com/2013/11/27/reading/photos-1.jpg
---
## girls looks well
如何删除Hexo博客底部页脚
如:
找到/themes/next/layout/_partials/footer.swig文件
内容如下:
<div class="copyright" >
{% set current = date(Date.now(), "YYYY") %}
© {% if theme.since and theme.since != current %} {{ theme.since }} - {% endif %}
<span itemprop="copyrightYear">{{ current }}</span>
<span class="with-love">
<i class="fa fa-heart"></i>
</span>
<span class="author" itemprop="copyrightHolder">{{ config.author }}</span>
</div>
<div class="powered-by">
{{ __('footer.powered', '<a class="theme-link" href="https://hexo.io">Hexo</a>') }}
</div>
<div class="theme-info">
{{ __('footer.theme') }} -
<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
NexT.{{ theme.scheme }}
</a>
</div>
删除class 为powered-by的div和theme-info的div即可
最终内容
<div class="copyright" >
{% set current = date(Date.now(), "YYYY") %}
© {% if theme.since and theme.since != current %} {{ theme.since }} - {% endif %}
<span itemprop="copyrightYear">{{ current }}</span>
<span class="with-love">
<i class="fa fa-heart"></i>
</span>
<span class="author" itemprop="copyrightHolder">{{ config.author }}</span>
</div>