Hexo框架下用NexT(v7.0+)主题美化博客

1. 前言

前文:Windows下通过GitHub+Hexo搭建个人博客的步骤;
博主的个人博客:https://hunter1023.github.io/ 按照本篇博客美化。

在 Hexo 中有2份主要的配置文件,其名称都是_config.yml。 其中,一份位于博客根目录下,主要包含 Hexo 本身的配置;另一份位于themes/next/目录下,用于配置主题相关的选项


2. 基础设置

2.1 设置站点名、作者昵称和站点描述等内容

打开根目录下的_config.yml

# Site
title: 特叔服务
subtitle: 
keywords:
author: Hunter
description: Tough times never last, but tough people do.

2.2. NexT主题的安装

顾名思义,所谓主题就是界面的展示样式。Hexo安装主题,只需要将主题文件拷贝至博客所在目录的themes目录下,修改相关配置文件即可生效。

博客所在目录下打开git bash,再通过Git clone https://github.com/theme-next/hexo-theme-next themes/next即可完成。


2.3 启用主题

打开根目录下的_config.yml,查找theme字段,将字段改为theme: next(冒号:之后要有空格分隔,否则无效) ,之后通过hexo ghexo s,再在浏览器中访问localhost:4000即可本地预览主题效果。


3. 主题设定

3.1 选择scheme

打开themes/next/下的_config.yml,查找scheme,可以看到如下四种不同的风格方案:

scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

去掉#注释,即启用对应的scheme,博主采用Muse主题,大家可以依次测试效果,选择自己喜欢的scheme。


3.2 设置语言

博客框架默认的语言是英文,前往/themes/next/languages,查看当前NexT版本简体中文对照文件的名称是zh-Hans还是zh-CN

再前往根目录下的_config.yml,查找language,设置成language: zh-Hanslanguage: zh-CN,即显示简体中文。


3.3 设置菜单及对应页面

  • 打开themes/next/下的_config.yml,查找menu

    menu:
      home: / || home
      #about: /about/ || user
      tags: /tags/ || tags
      categories: /categories/ || th
      archives: /archives/ || archive
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      #commonweal: /404/ || heartbeat
    

    去掉#注释即可显示对应的菜单项,也可自定义新的菜单项。 ||之前的值是目标链接,之后的是分类页面的图标,图标名称来自于FontAwesome icon。若没有配置图标,默认会使用问号图标。

  • 新添加的菜单需要翻译对应的中文
    打开hexo/theme/next/languages/zh-CN.yml,在menu下自定义,如:

    menu:
      resources: 资源
    
  • hexo new page "categories"
    此时在根目录的source文件夹下会生成一个categories文件,文件中有一个index.md文件,修改内容如下

    ---
    title: 分类
    date: 2017-12-14 13:05:38
    type: "categories"
    comments: false
    ---
    

    注:如果有启用评论,默认页面带有评论。需要关闭的话,添加字段comments并将值设置为false。


3.4 设定站点建立时间

打开**themes/next/下的_config.yml**,查找since

footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  #since: 2015

如果不设置,默认显示当前年份


4. 美化

4.1 设置头像

打开themes/next/下的_config.yml,查找avatar

# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: http://XXXXXXXXX

avatar的值是图片的链接地址(完整的URI 或者 站内的相对地址皆可)

地址
完整的URI http://example.com/avatar.png
站点内地址 图片放至themes/next/source/images/配置为:avatar: /images/图片名
站点内地址 图片放至根目录下source/uploads/(初始无uploads文件夹,自行创建)目录下配置为:avatar: /uploads/图片名

之后创建博文,对图片的引用 同样可以按照上述地址获取


4.2 网站图标设置

  • 图标素材网站:iconfont;easyicon
  • 下载16x16以及32x32大小的PNG格式图标,置于/themes/next/source/images/
  • 打开**themes/next/下的_config.yml**,查找favicon
    favicon:
      small: /images/favicon-16x16-next.png
      medium: /images/favicon-32x32-next.png
      apple_touch_icon: /images/apple-touch-icon-next.png
      safari_pinned_tab: /images/logo.svg
      #android_manifest: /images/manifest.json
      #ms_browserconfig: /images/browserconfig.xml
    
    修改small和medium的路径为下载的图标路径

4.3 背景动画

4.3.1 Canvas-nest风格

4.3.2 JavaScript 3D library风格

  1. 进入theme/next目录
  2. 执行命令:git clone https://github.com/theme-next/theme-next-three source/lib/three
  3. themes/next/_config.yml中查找theme-next-three,将想要的效果改为true即可:
# three_waves
three_waves: false
# canvas_lines
canvas_lines: true
# canvas_sphere
canvas_sphere: false

4.4 背景图片/顶栏、底栏图片(背景色)、侧栏背景及内部文字颜色

打开theme/next/source/css/_custom/custom.styl,添加以下代码

//背景图片
body{   
        background:url(图片链接);
        background-size:cover;
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-position:center;
}
//顶栏图片
.header {
          background:url(图片链接) none repeat scroll !important;
}
//底栏背景色
.footer {
          background:rgba(颜色rgb,透明度) none repeat scroll !important;
}
//侧栏图片及内部文字颜色修改
#sidebar {
            background:url(图片链接);
            background-size: cover;
            background-position:center;
            background-repeat:no-repeat;
            p,span,a {color: 颜色代码;}
}

其中的css样式属性都可以根据图片修改,以达到满意的效果。


4.5 侧栏置于左侧,修改控制按钮样式

默认情况下,侧栏仅在文章页面(拥有目录列表)时才显示,并放置于右侧位置。打开themes/next/下的_config.yml,查找sidebar

4.5.1 设置侧栏在左侧/右侧

  • Pisces或Gemini方案
    sidebar:
    position: left
    #position: right
    
  • Mist或Muse方案
  1. 打开next/source/js/src/motion.js,查找paddingRight,把所有(2个)PaddingRight更改为paddingLeft即可。
  2. 打开next/source/css/_custom/custom.styl,添加如下内容:
    //侧边栏置于左侧
    .sidebar {
      left: 0;
    }
    //侧栏开关置于左侧
    .sidebar-toggle {
      left: $b2t-position-right;
    }
    
  3. 打开next/source/css/_common/components/back-to-top.styl,将right: $b2t-position-right;改为left: $b2t-position-right;

4.5.2 显示侧边栏的时机

	#post - 默认行为,在文章页面(拥有目录列表)时显示
	#always - 在所有页面中都显示
	#hide - 在所有页面中都隐藏(可以手动展开)
	#remove - 完全移除
	display: post
	#display: always
	#display: hide
	#display: remove

4.5.3 侧边栏控制按钮样式修改

打开themes/next/layout/source/js/src/motion.js,找到如下代码处,更换close的内容

var sidebarToggleLine1st = new SidebarToggleLine({
    el: '.sidebar-toggle-line-first',
    status: {
      arrow: {width: '50%', rotateZ: '45deg', top: '2px', left: '6px'},
      // close: {width: '100%', rotateZ: '-45deg', top: '5px', left: '0px'} //X形
      close: {width: '50%', rotateZ: '-45deg', top: '2px', left: '0px'} //箭头形
    }
  });
  var sidebarToggleLine2nd = new SidebarToggleLine({
    el: '.sidebar-toggle-line-middle',
    status: {
      arrow: {width: '90%'},
      // close: {opacity: 0} //X形
      close: {width: '90%'} //箭头形
    }
  });
  var sidebarToggleLine3rd = new SidebarToggleLine({
    el: '.sidebar-toggle-line-last',
    status: {
      arrow: {width: '50%', rotateZ: '-45deg', top: '-2px', left: '6px'},
      // close: {width: '100%', rotateZ: '45deg', top: '-5px', left: '0px'} //X形
      close: {width: '50%', rotateZ: '45deg', top: '-2px', left: '0px'} //箭头形
    }
  });

4.6 文章底部标签显示的优化

修改/themes/next/layout/_macro/post.swig,搜索 rel="tag">#,将 # 换成

4.7 文章添加阴影、透明效果

打开theme/next/source/css/_custom/custom.styl,添加以下代码

// 主页文章添加阴影效果
.post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   background:rgba(255,255,255,0.9) none repeat scroll !important;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

4.8 Hexo添加文章时自动打开编辑器

  • 首先在Hexo目录下的scripts目录中创建一个JavaScript脚本文件。
    如果没有这个scripts目录,则新建一个。
  • scripts目录新建的JavaScript脚本文件可以任意取名。

通过这个脚本,我们用其来监听hexo new这个动作,并在检测到hexo new之后,执行编辑器打开的命令。

  • 如果你是windows平台的Hexo用户,则将下列内容写入你的脚本:
var spawn = require('child_process').exec;
hexo.on('new', function(data){
  spawn('start  "markdown编辑器绝对路径.exe" ' + data.path);
});

如果你是Mac平台Hexo用户,则将下列内容写入你的脚本:

var exec = require('child_process').exec;
hexo.on('new', function(data){
    exec('open -a "markdown编辑器绝对路径.app" ' + data.path);
});

4.9 点击侧栏头像回到首页

修改/themes/next/layout/_macro/sidebar.swig,找到如下代码:

{{ theme.author }}

在其前后加上即可,如下:


   {{ theme.author }}


4.10 修改中文字体

  1. 前往Google Fonts查看合适的字体
  2. 打开themes/next/下的_config.yml,查找font
    font:
    	enable: true
    	 # Uri of fonts host. E.g. //fonts.googleapis.com (Default). 修改为墙内镜像
    	host: https://fonts.loli.net
    	global:
    		external: true
    		family: Noto Serif SC // 挑选的字体
    		size: 16
    
    1. 修改/themes/next/source/css/_variables/base.styl
    $font-family-monospace    = consolas, Menlo, $font-family-chinese, monospace
    $font-family-monospace    = get_font_family('codes'), consolas, Menlo, $font-family-chinese, monospace if get_font_family('codes')
    
    改为
    $font-family-monospace    = consolas, Menlo, $font-family-base, monospace
    $font-family-monospace    = get_font_family('codes'), consolas, Menlo, $font-family-base, monospace if get_font_family('codes')
    

4.11 新建文章时,在相同目录下创建同名文件夹(便于图片管理)

  • 打开站点配置文件_config.yml,搜索post_asset_folder字段,设置其值为true
  • 安装hexo-asset-image:npm install hexo-asset-image --save
  • 此时hexo new "fileName"会在/source/_posts目录下创建同名的文件夹
  • 只需在 md 文件里使用 ![title](图片名.jpg) ,无需路径名就可以插入图片。

4.12 首页显示文章摘要(阅读全文)及配图(文章内不重复显示)

  1. 打开themes/next/下的_config.yml,查找excerpt
    auto_excerpt: //自动摘录
      enable: true
      length: 150 //摘录字数
    read_more_btn: true //显示全文按钮
    
  2. 打开themes\next\layout\_macro\post.swig,在{% if is_index %}{% if post.description and theme.excerpt_description %}之间添加如下内容
    {% if post.images %}
    	
    {% endif %}
  3. themes\next\source\css\_custom\custom.styl中添加如下内容
    //文章摘要配图
    //图片外部的容器方框,限制图片大小
    .out-img-topic {
      display: block;
      max-height:500px;
      margin-bottom: 24px;
      overflow: hidden;
    }
    //图片
    img.img-topic {
      display: block ;
      margin-left: .7em;
      margin-right: .7em;
      padding: 0;
      float: right;
      clear: right;
    }
    
  4. 将摘要图片储存于themes\next\source\images中,建议在此路径下单独建一个文件夹存放摘要图片,这个图片和文章中插图的存放路径不同,不是一个概念。然后在文章YAML头信息中添加images字段,将值填为/images/imagename.jpg
    images: "images/文章摘要配图/Win10桌面.png"
    

4.13 给页面、侧边栏添加背景图片

打开theme/next/source/css/_custom/custom.styl,添加以下代码:

body {
  background: url(/images/blogbk.jpg) no-repeat;
  /* 背景图垂直、水平均居中 */
  background-position: center center;
  /* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
  background-attachment: fixed;
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;
  /* 设置背景颜色,背景图加载过程中会显示背景色 */
  background-color: rgba(0, 0, 0, 0.5);
}
.sidebar {
            background:url(/images/sidebar.jpg);
            background-size: cover;
            background-position:center;
            background-repeat:no-repeat;
            p,span,a {color: rgba(255, 255, 255, 1);}
}

4.14 文字背景以及半透明的设置

打开theme/next/source/css/_custom/custom.styl,添加以下代码:

.content {
	border-radius: 20px; //文章背景设置圆角
	padding: 30px 60px 30px 60px;
	background:rgba(255, 255, 255, 0.8) none repeat scroll !important;
}

4.15 去除NexT主题Markdown分割线渲染效果

修改/source/css/_common/scaffolding/base.styl,注释或删除以下内容:

background-image: repeating-linear-gradient(
    -45deg,
    white,
    white 4px,
    transparent 4px,
    transparent 8px
  );

4.16 图片可点击放大查看,放大后可关闭

  • 打开站点配置文件_config.yml,搜索fancybox字段,设置其值为true
  • 进入到theme/text/文件夹下,打开git bash
  • git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox

4.17 博客总访问量统计

  • 打开themes/next/下的_config.yml,查找busuanzi
    busuanzi_count:
      enable: true
      total_visitors: false
      total_visitors_icon: user
      total_views: false
      total_views_icon: eye
      post_views: true
      post_views_icon: eye
    

当前版本的NexT集成的不蒜子,总访问人数和人次只是分别用icon来表示,故取消显示,自行改动

  • 打开/themes/next/layout/_partials/footer.swig,在最后添加如下内容:
    
      本站访问次数:
    
    

4.18 文章末尾添加版权声明

效果:
Hexo框架下用NexT(v7.0+)主题美化博客_第1张图片
配置:
查找主题配置文件themes/next/_config.yml中的creative_commons

creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true  # 将false改为true即可显示版权信息
  language:

4.19 本地搜索(其余搜索方案的劣势只有收费)

  • npm install hexo-generator-search
  • 查找主题配置文件themes/next/_config.yml中的local_search
    local_search:
      enable: true
    

4.20 图床和上传工具

盘点一下免费好用的图床

4.21 文章置顶

Hexo博客彻底解决置顶问题
效果:
Hexo框架下用NexT(v7.0+)主题美化博客_第2张图片
注:若有多篇文章需要置顶,排序方式为 在需要置顶的文章的Front-mattertop:填写阿拉伯数字即可,数越大,排序越靠前。

Google统计

Sitemap网站地图

提交谷歌收录本站 Google Search

文章阅读量统计



参考:

  • HEXO+NEXT主题个性化配置
  • 打造个性超赞博客Hexo+NexT+GitHubPages的超深度优化
  • [EasyHexo 专栏] #2 - 魔改 Next 不完全教程
  • 基于Hexo+Node.js+github+coding搭建个人博客——进阶篇(从入门到入土)
  • Hexo博客Next主题优化总结
  • 为NexT主题添加文章阅读量统计功能
  • 2017年最新基于hexo搭建个人免费博客——自定义页面样式一
  • Hexo添加文章时自动打开编辑器
  • next主题下点击侧边栏头像回到博客首页
  • Google Fonts 已支持思源宋体!
  • 弃暗投明-Hexo更换next主题
  • hexo博客NEXT主题美化
  • 在hexo博客中插入图片,音乐,视频

你可能感兴趣的:(搭建个人博客)