使用Next主题

  • 在这里Downloads Next主题代码
  • 将下载的代码放在myBlog/theme/next目录下
  • 设置站点myBlog/_config.yml的theme字段值为next
  • 生成新页面hexo g
  • 开启服务hexo s –debug
  • 发布代码hexo d

注:此时登录网站,发现是空白的,打开控制台,提示很多vendors目录下的文件404,解决办法是将next主题下即myBlog/themes/next/source下的vendors目录名改为lib,并修改myBlog/themes/next/_config.yml的_internal: vendors改为_internal: lib。

参考:iissnan的回答

主题配置

主题风格设定

通过修改next主题下的_config.yml的scheme字段,配置不同的风格。

  1. # Schemes
  2. scheme: Muse
  3. #scheme: Mist
  4. #scheme: Pisces

本站点使用的是默认的Muse,显示效果如下:

菜单设置

通过修改next主题下的_config.yml的menu字段,选定显示的菜单项。

  1. menu:
  2. home: /
  3. categories: /categories
  4. about: /about
  5. archives: /archives
  6. tags: /tags
  7. #commonweal: /404.html

其中,home代表主页,categories代表分类页,about代表关于页面,archives代表归档页,commonweal代表404页面(page not found时候显示的页面)。

菜单项文本修改是在对next主题下的language文件夹下的文件进行修改,若当前语言是简体中文,直接修改language/zh-Hans.yml里的对应字段即可。

本站点显示主页,分类页,关于页面和归档页。

头像设置

在主题下的source/images/下放置头像文件avatar.gif即可。

设置文章代码主题

Next主题总共支持5种主题,默认主题是白色的normal。通过修改next主题下的_config.yml的highlight字段,来设置代码主题。

本站点使用的是night主题。即令highlight为night。

添加标签页面

前面通过修改next主题下的_config.yml文件中的menu选项,可以在主页面的菜单栏添加标签选项,但是此时点击标签,跳转的页面会显示page not found。

添加标签页面的具体方法是:

  • 新建页面

    输入如下命令:
  1. $ cd myBlog
  2. $ hexo new page tags

输入命令后,在myBlog/source下会新生成一个新的文件夹tags,在该文件夹下会有一个index.md文件。

  • 设置页面类型

    在上步新生成的myBlog/source/tags/index.md中添加type: “tags”,index.md文件内容如下:
  1. ---
  2. title: tags
  3. date: 2016-11-15 19:10:05
  4. type: "tags"
  5. ---
  • 设置具体文章的tags

    当要为某一篇文章添加标签,只需在myBlog/source/_post目录下的具体文章的tags中添加标签即可,如:
  1. ---
  2. title: 基于HexoGithub搭建博客
  3. date: 2016-11-09
  4. tags: [npm, hexo, github]
  5. categories: 搭建博客
  6. ---

本站添加为标签后的效果如下:

添加分类页面

步骤与添加标签页面类似,具体如下:

  • 新建页面

    输入如下命令:
  1. $ cd myBlog
  2. $ hexo new page categories

输入命令后,在myBlog/source下会新生成一个新的文件夹categories,在该文件夹下会有一个index.md文件。

  • 设置页面类型

    在上步新生成的myBlog/source/categories/index.md中添加type: “categories”,index.md文件内容如下:
  1. ---
  2. title: categories
  3. date: 2016-11-15 19:11:13
  4. type: "categories"
  5. ---
  • 设置具体文章的categories

    当要为某一篇文章添加分类,只需在myBlog/source/_post目录下的具体文章的categories中添加分类即可,如:
  1. ---
  2. title: 基于HexoGithub搭建博客
  3. date: 2016-11-09
  4. tags: [npm, hexo, github]
  5. categories: 搭建博客
  6. ---

本站添加为标签后的效果如下:

添加关于我页面

步骤与添加标签页面类似,具体如下:

  • 新建页面
  1. $ cd myBlog
  2. $ hexo new page about

输入命令后,在myBlog/source下会新生成一个新的文件夹about,在该文件夹下会有一个index.md文件。

  • 修改about/index.md

    本站点index.md如下:
  1. ---
  2. title: about
  3. date: 2016-11-15 19:08:50
  4. ---
  5. ## 关于我
  6. 一只学习后端的小菜鸟,欢迎分享知识。

参考链接

Hexo下Next主题配置与优化的更多相关文章

  1. hexo的jacman主题配置

    获得更多资料欢迎进入我的网站或者 csdn或者博客园 这是在我搭建博客时用的主题,这个主题时基于pacman修改的,同时我也是借助于wuchong同时他还在一直更新.一下时我的一些基本配置: 相关文章 ...

  2. Hexo 下 Markdown 的配置与学习

    本篇 更换 Hexo 下的 Markdown 渲染插件 学习 Markdown 基本语法 ✎更换 Markdown 渲染插件 ✎原因 Hexo 内置的默认渲染插件是 hexo-renderer-mar ...

  3. Hexo的Next主题配置

    使用Next主题 在这里Downloads Next主题代码 将下载的代码放在myBlog/next目录下 设置站点myBlog/_config.yml的theme字段值为next 生成新页面hexo ...

  4. Hexo博客主题优化

    Hexo博客主题优化 添加背景图 在 themes/*/source/css/_custom/custom.styl 中添加如下代码: body{ background:url(/images/bg. ...

  5. Hexo系列(四) NexT主题配置

    Hexo 框架允许我们更换合适的主题,以便于构建不同风格的网站,这里介绍目前最常使用的一款主题之一 -- NexT 一.NexT 安装 在正式开始讲解 NexT 安装之前,我们必须明确以下几个概念: ...

  6. Hexo+NexT(三):Next主题配置详解

    阅读本篇之前,假定读者已经有了Node.js的基础,如需要补充Node.js知识的,请自行百度. Hexo是在Node.js框架下的一个项目,利用Node.js提供的强大功能,完成从Markdown到 ...

  7. Hexo+NexT(四):Hexo站点及Next主题配置详解

    采用Hexo及NexT搭建好网站以后,有些效果不是我们需要的,Hexo及NexT提供了强大的定制功能,本文章将要讲解的就是如何在对网站进行配置及调整,达到博主需要的效果. 本文章配置环境是Hexo 3 ...

  8. 【3】hexo+github搭建个人博客的主题配置

    更换博客主题 主题可参考:https://hexo.io/themes/ hexo默认主题:Landscape 示例主题:Next 下载Next主题 进入Blog所在目录,输入下载命令 #进入Blog ...

  9. 三、hexo+github搭建个人博客的主题配置

    更换博客主题 主题可参考:https://hexo.io/themes/ hexo默认主题:Landscape 示例主题:Next 下载Next主题 进入Blog所在目录,输入下载命令 #进入Blog ...

随机推荐

  1. poj 2262 Goldbach's Conjecture——筛质数(水!)

    题目:http://poj.org/problem?id=2262 大水题的筛质数. #include<iostream> #include<cstdio> #include& ...

  2. POJ3104(二分搜索)

    Drying Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 13057   Accepted: 3358 Descripti ...

  3. 机器学习:PCA(实例:MNIST数据集)

    一.数据 获取数据 import numpy as np from sklearn.datasets import fetch_mldata mnist = fetch_mldata("MN ...

  4. java.nio.ByteBuffer中flip、rewind、clear方法的区别

    对缓冲区的读写操作首先要知道缓冲区的下限.上限和当前位置.下面这些变量的值对Buffer类中的某些操作有着至关重要的作用: limit:所有对Buffer读写操作都会以limit变量的值作为上限. p ...

  5. rsync 简单使用 非默认ssh端口 分别从远程获取及推送本地的文件到远程

    rsync: did not see server greetingrsync error: error starting client-server protocol (code 5) at mai ...

  6. FFmpeg结构体:AVInputFormat

    1.描述 AVInputFormat 是类似COM 接口的数据结构,表示输入文件容器格式,着重于功能函数,一种文件容器格式对应一个AVInputFormat 结构,在程序运行时有多个实例,位于avof ...

  7. Enable SVM while booted from alternate media (ZT)

    http://www.seedsofgenius.net/uncategorized/solaris-tips-enable-svm-while-booted-from-alternate-media ...

  8. IRedisClient

    事实上,IRedisClient里面的很多方法,其实就是Redis的命令名.只要对Redis的命令熟悉一点就能够非常快速地理解和掌握这些方法,趁着现在对Redis不是特别了解,我也对着命令来了解一下这 ...

  9. Oracle 设置主键自增长__Oracle

    转自:https://yq.aliyun.com/ziliao/258074 如果想在Oracle数据库里实现数据表主键自增,我们似乎没有办法像MySql般直接定义列的属性来实现.不过对于这个数据库的 ...

  10. MXF文件结构浅析

    MXF是英文Material eXchange Format(素材交换格式)的缩语.MXF是SMPTE(美国电影与电视工程师学会)组织定义的一种专业音视频媒体文件格式.MXF主要应用于影视行业媒体制作 ...