Next主题(Hexo)

作者: ldsea 分类: 程序生活发布时间: 2017-01-03 23:23

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

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

和设置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>

文／编程之乐（简书作者）
原文链接：http://www.jianshu.com/p/5d5931289c09
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。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

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

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

建立页面

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

绚丽的图片文章

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的分类和标签跳转找不到路径的问题

注意点

模版（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>

文／编程之乐（简书作者）
原文链接：http://www.jianshu.com/p/5d5931289c09
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

一条评论

发表新评论

940015461

2020年8月13日 13:17

回复TA

大佬，救命一波啊，我博客底部现在author的地方咋显示为object object，我查了footer.swig中的属性 {{ theme.footer.copyright or author }}，还去对比了github上的内容，实在找不到啥原因了，www.zllwsy.com，

海蓝博客

Next主题(Hexo)

设置语言

作者昵称，站点描述

next还有主题可以设置

设置下面侧栏的位置

设置菜单(重点)

一菜单映射的链接

二菜单显示文本

三设置菜单的图标

设置社交链接

建立页面

友情链接

绚丽的图片文章

小问题

注意点

添加类别和tags列表 (wen)

图片资源的使用

如何删除Hexo博客底部页脚

设置语言

作者昵称，站点描述

next还有主题可以设置

设置下面侧栏的位置

设置菜单(重点)

一菜单映射的链接

二菜单显示文本

三设置菜单的图标

设置社交链接

建立页面

友情链接

绚丽的图片文章

小问题

注意点

添加类别和tags列表 (wen)

图片资源的使用

如何删除Hexo博客底部页脚

发表回复取消回复

Next主题(Hexo)

设置语言

作者昵称，站点描述

next还有主题可以设置

设置 下面 侧栏 的位置

设置 菜单(重点)

一 菜单映射的链接

二 菜单显示文本

三 设置菜单的图标

设置社交链接

建立页面

友情链接

绚丽的图片文章

小问题

注意点

添加 类别和tags列表 (wen)

图片资源的使用

如何删除Hexo博客底部页脚

设置语言

作者昵称，站点描述

next还有主题可以设置

设置 下面 侧栏 的位置

设置 菜单(重点)

一 菜单映射的链接

二 菜单显示文本

三 设置菜单的图标

设置社交链接

建立页面

友情链接

绚丽的图片文章

小问题

注意点

添加 类别和tags列表 (wen)

图片资源的使用

如何删除Hexo博客底部页脚

发表回复 取消回复

设置下面侧栏的位置

设置菜单(重点)

一菜单映射的链接

二菜单显示文本

三设置菜单的图标

添加类别和tags列表 (wen)

设置下面侧栏的位置

设置菜单(重点)

一菜单映射的链接

二菜单显示文本

三设置菜单的图标

添加类别和tags列表 (wen)

发表回复取消回复