Next theme configuration

基于官方原始next主题包进行如下调整,方便记录修改。

1. 基础设定

1.1. 选择Scheme

Scheme 是 NexT 提供的一种特性,借助于 Scheme,NexT 为你提供多种不同的外观。同时,几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme,他们是:

  • Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
  • Mist - Muse 的紧凑版本,整洁有序的单栏外观
  • Pisces - 双栏 Scheme,小家碧玉似的清新
  • Germini 最新的Scheme(有点不太协调啊~~~)
    Scheme的切换通过站点配置文件

1.2. 设置语言

编辑站点配置文件, 将language设置成你所需要的语言。建议明确设置你所需要的语言,例如选用简体中文,配置如下:

language: zh-hans

1.3. 设置菜单

菜单配置包括三个部分,第一是菜单项(名称和链接),第二是菜单项的显示文本,第三是菜单项对应的图标。 NexT 使用的是Font Awesome提供的图标, Font Awesome 提供了 600+ 的图标,可以满足绝大的多数的场景,同时无须担心在 Retina 屏幕下 图标模糊的问题。
编辑主题配置文件,修改一下内容:

  • 设定菜单内容,对应的字段是menu。菜单内容的设置item name: link。其中item name是一个名称,这个名称并不直接显示在页面上,她将用于匹配图标以及翻译。||之后的是awesome图标库中图标的名称(note:这是最新版本hexo的语法格式,与之前不同)
    menu:
    home: / || home
    about: /about/ || about
    tags: /tags/ || tags
    categories: /categories/ || th
    archives: /archives/ || archive
    #schedule: /schedule/ || calendar
    #sitemap: /sitemap.xml || sitemap
    #commonweal: /404/ || heartbeat
    

附上官方原_config.yml关于Menu setting的说明:

When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive.
# Value before `||` delimeter is the target link.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.

另外,如果想改变home, about对应的汉字,可以到language/zh-Hans.yml中修改,比如可以修改关于关于我等等

2. Next主题背景个性化DIY

2.1. 介绍一个图片网站

首先,分享一个非常nice的图片网站,感觉这个国外的图片社区网站真的秒杀一众图片网站啊,不仅图片质量高,免费,而且还提供了随机拉取图片的服务API,点这里

2.2. 添加背景图片

修改themes\next\source\css\ _custom\custom.styl文件,这个是Next故意留给用户自己个性化定制一些样式的文件,添加以下代码:

body {
    background:url(https://source.unsplash.com/random/1600x900);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
}

2.3. 修改博客主体样式

如果按照上一步添加完图片之后,发现出现了另外一个大问题,整个博客背景都是透明的,只能看见图片,看不清文章文字,这样绝对不行的,办法如下,照例在上面的文件下面继续追加如下代码:

.main-inner {
    margin-top: 60px;
    padding: 60px 60px 60px 60px;
    background: #fff;
    min-height: 500px;
}

2.4. 站内搜索

2.4.1. algolia搜索服务集成

有点复杂,放上官网操作链接
note:

apiKey指的是Search-Only API Key

可以编辑node_modules/hexo-algolia/lib/command.js,添加content配置

var INDEXED_PROPERTIES = [
  'title',
  'date',
  'updated',
  'slug',
  'excerpt',
  'permalink',
  'layout',
  'content'
];

但是最新测试结果发现algolia已经对发往algolia server的内容大小做了限制,为10KB(json格式)。
另外一个algolia的packge hexo-algoliasearch测试过,发现不好用。

2.4.2. 本地搜索

  1. 安装 hexo-generator-searchdb,在站点根目录下执行以下命令:
     npm install hexo-generator-searchdb --save
    
  2. 编辑站点配置文件,新增以下内容到任意位置:
     search:
       path: search.xml
       field: post
       format: html
       limit: 10000
    
  3. 编辑主题配置文件,启用本地搜索功能:
     # Local search
     local_search:
       enable: true
    

2.5. 隐藏网页底部的powered By Hexo / 强力驱动

打开themes/next/layout/_partials/footer.swig,使用“”隐藏之间关于power代码即可,或者直接删除。

3. 修改内链文字样式

原来版本的内链样式跟默认的字体很类似,这里进行修改。将链接文本设置为蓝色,鼠标划过时文字颜色加深,并显示下划线。修改文件themes\next\source\css\_common\components\post\post.styl,添加如下css样式:

.post-body p a{
  color: #0593d3;
  border-bottom: none;

  &:hover {
    color: #0477ab;
    text-decoration: underline;
  }
}

选择.post-body是为了不影响标题,选择p是为了不影响首页“阅读全文”的显示样式。