Next主题(Hexo)

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


    Paste_Image.png

设置语言

修改后网站图标都变成了中文字体

Paste_Image.png

编辑站点配置文件
English en language: en
简体中文 zh-Hans language: zh-Hans
如:

Paste_Image.png

作者昵称,站点描述

均为编辑站点配置文件

Paste_Image.png
Paste_Image.png

next还有主题可以设置

Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
Mist - Muse 的紧凑版本,整洁有序的单栏外观
Pisces - 双栏 Scheme,小家碧玉似的清新

Scheme 的切换通过更改 主题配置文件

#scheme: Muse
#scheme: Mist
scheme: Pisces

设置 下面 侧栏 的位置

通过修改 主题配置文件 中的 sidebar
字段来控制侧栏的行为

Paste_Image.png

注意 目前仅 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步骤都会用到 也就是键

设置社交链接

Paste_Image.png
Paste_Image.png

和设置Menu类似
因为仅仅配置了一个 Github链接,故仅仅显示一个

建立页面

直接在根目录的source路径下,新建一个404.html文件,就可以了
直接在根目录的source路径下,新建一个404.html文件,就可以了
然后可以配置 menu 映射下就可以在 上面显示

love: /404.html

Paste_Image.png

当然 通过
hexo new page "love"
会在source目录下生成一个文件夹
source/love/index.md
这也是建立页面的一种方式

添加Menu时候映射
love: /love 即可(localhost:4000/love 实际上访问是localhost:4000/love/index.html)

友情链接

Paste_Image.png
# 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
测试...

小问题

Paste_Image.png

此列表的多少与 文章编写时候添加的标签和分类有关,自动添加
无需我们操心

文章中添加标签或分类
在文章中点击或者标签或分类跳转没问题
但是自己配置显示menu的分类和标签跳转找不到路径的问题

注意点

布局(Layout)
Hexo 有三种默认布局:post、page 和 draft,
它们分别对应不同的路径,而您自定义的其他布局和post
相同,都将储存到 source/_posts
文件夹。

模版(Scaffold)
在新建文章时,Hexo 会根据 scaffolds
文件夹内相对应的文件来建立文件,例如:
$ hexo new photo "My Gallery

在执行这行指令时,Hexo 会尝试在 scaffolds
文件夹中寻找 photo.md,并根据其内容建立文章

以下是您可以在模版中使用的变量:

Paste_Image.png

添加 类别和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

图片资源的使用

Paste_Image.png

source 文件夹下面的文件在执行 hexo g 后 会把source下的所有文件放在public 文件夹下面。
public相等于网站根目录 \

Paste_Image.png

至于本地图片如何使用,如下所示

---
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

Paste_Image.png

如何删除Hexo博客底部页脚

如:

Paste_Image.png

找到/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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,817评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,329评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,354评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,498评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,600评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,829评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,979评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,722评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,189评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,519评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,654评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,940评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,762评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,993评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,382评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,543评论 2 349

推荐阅读更多精彩内容