hexo主题美化

详细介绍 hexo主题美化的方法。

修改博客的标题，语言及描述信息

vim /hexo/_config.yml

改成如下内容：

# Site
title: 我爱吃甜食
subtitle: 与凤凰齐飞必是俊鸟，与虎狼同行必是猛兽！
description: 不断的提升自己,才能享受更高品质的生活!
keywords: blog
author: 我爱吃甜食
language: zh-Hans
timezone:

设置网站的URL及永久链接样式

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'

url: http://blog.xujianhui.cn
root: /
permalink: :year-:month-:day-:title.html
permalink_defaults:

指定deploy地址

vim /hexo/_config.yml

改成github或者coding的仓库地址

deploy:
  type: git
  repo:
      vpsgit: git@blog.xujianhui.cn:/home/git/blogdata/blog.git
      coding: git@git.coding.net:xu_jh/my_Blog.git
  branch: master
  message: blog update {{ now('YYYY-MM-DD HH:mm:ss') }}

更换主题

下载Next主题

cd /hexo/

git clone https://github.com/iissnan/hexo-theme-next themes/next

官方推荐通过git下载最新版，但也可通过Next releases 下载稳定版本，然后将下载好的主题放在/hexo/themes目录下即可。

启用Next主题

vim /hexo/_config.yml

改成如下内容：

theme: next

设置网站的图标Favicon

vim /hexo/themes/next/_config.yml

添加:

favicon:
  small: http://image.echoxu.cn/logo.png
  medium: http://image.echoxu.cn/logo.png
  apple_touch_icon: http://image.echoxu.cn/logo.png
  safari_pinned_tab: http://image.echoxu.cn/logo.png

去除底部版权信息

vim /hexo/themes/next/_config.yml

添加:

footer:
  copyright: 我爱吃甜食
  powered: false
  theme:
    enable: false
    version: false

添加菜单

vim /hexo/themes/next/_config.yml

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

# Enable/Disable menu icons.
menu_icons:
  enable: true

修改主题布局

vim /hexo/themes/next/_config.yml

添加:

scheme: Gemini

侧边栏社交链接

vim /hexo/themes/next/_config.yml

social:
  GitHub: https://github.com/MyXujianhui || github
  E-Mail: mailto:jerrysuu@163.com || envelope

social_icons:
  enable: true
  icons_only: false
  transition: false
  #微博: weibo

添加友情链接

vim /hexo/themes/next/_config.yml

links_icon: link
links_title: 友情链接
links_layout: block
#links_layout: inline
links:
  本站孪生站(coding托管): https://www.xujianhui.cn

设置代码高亮主题

vim /hexo/themes/next/_config.yml

添加:

highlight_theme: night eighties

添加顶部加载条

vim /hexo/themes/next/_config.yml

pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal

设置背景动画

vim /hexo/themes/next/_config.yml

添加:

canvas_nest: true

关闭所有动画效果

vim /hexo/themes/next/_config.yml

motion:
  enable: false

canvas_nest: false

添加「分类」页面

  • 新建分类页面 hexo new page categories
  • 设置页面类型 在 source/categories 目录的 index.md 中修改:
---
title: 分类
date: 2018-04-25 21:02:21
type: "categories"
comments: false
---
  • 在菜单中添加链接 在主题的_config.yml 中取消注释:

categories: /categories 在要分类的文章中加入 category 属性:

category: “hexo” # 分类为 hexo

添加「标签」页面

  • 新建页面 hexo new page tags

设置页面类型

在 source/tags目录的index.md 中修改:

---
title: 标签
date: 2018-04-25 21:02:04
type: "tags"
comments: false
---
  • 在菜单中添加链接

在主题的_config.yml中取消注释:

menu:
  home: /
  archives: /archives
  tags: /tags

添加关于页面

hexo n page about

修改/about/index.md

添加

---
title: 关于
date: 2018-04-25 23:55:20
---
# 爱喝茶,爱Linux.
# 座右铭:与凤凰齐飞必是俊鸟,与虎狼同行必是猛兽.

修改作者图像并转动

  • 添加作者图像

avatar: http://image.echoxu.cn/avatar.jpg

  • 图像转动

vim /themes/next/source/css/_common/components/sidebar/sidebar-author.styl

在里面添加如下代码：

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/


  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}

img:hover {
  /* 鼠标经过停止头像旋转
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}
  • 站点头像改成圆形

在themes/next/source/css/_common/components/sidebar/sidebar-author.styl中.site-author-image定义中增加：

border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;

修改文章底部的那个带#号的标签

vim /themes/next/layout/_macro/post.swig，搜索rel=”tag”>#， 将

<font color=#fff>\#换成<i class="fa fa-tag"></i></font>

更改内容区域的宽度

vim themes/next/source/css/_variables/custom.styl

$main-desktop                   = 1200px
$content-desktop                = 950px

参考链接

主页文章开启“阅读全文”

auto_excerpt:
  enable: true
  length: 150

但我更喜欢在写文章时在适当的位置添加<!--more-->来实现“阅读全文”的功能

博文压缩

在站点的根目录下执行以下命令：

sudo npm install gulp -g

sudo npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

sudo ln -s /home/xujh/software/nodejs/bin/gulp /usr/bin/gulp

在如下图所示，新建 gulpfile.js ，并填入以下内容

var gulp = require('gulp');

    //Plugins模块获取
    var minifycss = require('gulp-minify-css');
    var uglify = require('gulp-uglify');
    var htmlmin = require('gulp-htmlmin');
    var htmlclean = require('gulp-htmlclean');

    // 压缩 public 目录 css文件
    gulp.task('minify-css', function() {
        return gulp.src('./public/**/*.css')
            .pipe(minifycss())
            .pipe(gulp.dest('./public'));
    });

    // 压缩 public 目录 html文件
    gulp.task('minify-html', function() {
      return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
             removeComments: true,
             minifyJS: true,
             minifyCSS: true,
             minifyURLs: true,
        }))
        .pipe(gulp.dest('./public'))
    });

    // 压缩 public/js 目录 js文件
    gulp.task('minify-js', function() {
        return gulp.src('./public/**/*.js')
            .pipe(uglify())
            .pipe(gulp.dest('./public'));
    });

    // 执行 gulp 命令时执行的任务
    gulp.task('default', [
        'minify-html','minify-css','minify-js'
    ]);
  • gulp

要运行gulp任务，只需切换到存放gulpfile.js文件的目录，然后在终端中执行gulp命令就行了，gulp后面可以加上要执行的任务名，例如gulp task1，如果没有指定任务名，则会执行任务名为default的默认任务。

添加百度/谷歌/本地 自定义站点内容搜索

安装 hexo-generator-searchdb，在站点的根目录下执行以下命令：

npm install hexo-generator-searchdb --save

编辑 站点配置文件，新增以下内容到任意位置：

search:
      path: search.xml
      field: post
      format: html
      limit: 10000

编辑 主题配置文件，启用本地搜索功能：

# Local search
local_search:
      enable: true

主页文章添加阴影效果

vim /themes/next/source/css/_custom/custom.styl向里面加入：

// 主页文章添加阴影效果
 .post {
   margin-top: 10px;
   margin-bottom: 10px;
   padding: 5px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }

实现点击出现桃心效果

打开love.js

然后将里面的代码copy一下，新建love.js文件并且将代码复制进去，然后保存。 将love.js文件放到路径/themes/next/source/js/src里面,然后打开

vim /themes/next/layout/_layout.swig,在前面添加以下代码：

<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

修改文章内链接文本样式

vim themes/next/source/css/_common/components/post/post.styl，在末尾添加如下css样式，：

// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  &:hover {
    color: #fc6423;
    border-bottom: none;
  }
}

其中选择.post-body是为了不影响标题，选择p是为了不影响首页“阅读全文”的显示样式,颜色可以自己定义。

右上角添加github

去github style挑选自己喜欢的样式，并复制代码。 然后粘贴刚才复制的代码到 themes/next/layout/_layout.swig文件中,放在<div class="headband"></div>的下面， 并把href改为你的github地址

<a href="https://your-url" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#64CEAA; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

添加看板娘

npm install --save hexo-helper-live2d

npm install live2d-widget-model-tororo

添加下面的代码到Hexo的 _config.yml文件或主题的 _config.yml文件中添加配置.

#live2d:
#enable: true
#model:
#use: live2d-widget-model-tororo
#display:
#position: right
#width: 60
#height: 100
#mobile:
#show: true
#scale: 0.5

看板娘传送门

开启看板娘后在手机上看博客发热严重，所以把她卸载掉……

卸载看板娘

npm uninstall hexo-helper-live2d

npm uninstall live2d-widget-model-tororo

加入作者版权信息

找到/themes/next/layout/_macro/post.swig，再找到其中的微信订阅部分，如下所示：

{#####################}
    {### END POST BODY ###}
    {#####################}

然后直接在其上面添加如下代码段：

<div align="center">
  {% if not is_index %}
    <div class="copyright">
    <p><span>
    <b>本文地址：</b><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a><br /><b>转载请注明出处，谢谢！</b>
    </span></p>
    </div>
  {% endif %}
</div>

上传README.md到github或者coding

在Hexo目录下的source根目录下添加一个README.md。 修改Hexo目录下的_config.yml。将skip_render参数的值设置上。

skip_render: README.md

保存退出即可。使用hexo d 命令就不会在渲染 README.md 这个文件了

git到coding仓库

  • 生成ssh公钥并存放到coding里

账户 SSH 公钥

账户 SSH 公钥是跟用户账户关联的公钥，一旦设置，就拥有账户下所有项目仓库的读写权限。

  • 生成公钥

打开命令行终端输入 ssh-keygen -t rsa -C “your_email@example.com“( 你的邮箱)，连续点击 Enter 键即可。

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
# Creates a new ssh key, using the provided email as a label
# Generating public/private rsa key pair.
Enter file in which to save the key (/Users/you/.ssh/id_rsa): [Press enter]  // 推荐使用默认地址
Enter passphrase (empty for no passphrase):   //此处点击 Enter 键即可，也可以填写密码，填写密码后每次使用 SSH 方式推送代码时都会要求输入密码，由于这个 Key 也不是用于军事目的，所以也无需设置密码。
成功之后显示如下信息：
Your identification has been saved in /Users/you/.ssh/id_rsa.
# Your public key has been saved in /Users/you/.ssh/id_rsa.pub.
# The key fingerprint is:
# 01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db your_email@example.com
  • 添加公钥

在终端输入open ~/.ssh，用文本编辑器打开『id_rsa.pub』文件，复制全部内容

登录 Coding.net，进入『SSH 公钥』页面，点击『新增公钥』

将第一步中复制的内容填写到『公钥内容』一栏，公钥名称可随意填写

设定公钥有效期，可选择具体日期或设置永久有效

hexo添加git配置

在hexo/_config.yml中添加

deploy:
  type: git
  repo: git@git.coding.net:xu_jh/my_Blog.git
  branch: master
  message: blog update {{ now('YYYY-MM-DD HH:mm:ss') }}

hexo d发布

npm install hexo-deployer-git --save

git config --global user.email "jerrysuu@163.com"

git config --global user.name "xujh"

hexo clean

hexo g

gulp

hexo d

上次更新:
贡献者: iEchoxu