Next主题(Hexo)

0.103字数 1489阅读 11283

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>

推荐阅读更多精彩内容