hexo博客-next主题美化、配置

最新推荐文章于 2024-03-09 17:21:50 发布

楠丶

最新推荐文章于 2024-03-09 17:21:50 发布

阅读量358

点赞数

分类专栏： hexo 文章标签：经验分享

本文链接：https://blog.csdn.net/weixin_43026567/article/details/104897983

版权

hexo 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

修改标签样式

实现方法：

修改模板/themes/next/layout/_macro/post.swig,搜索rel="tag"，将后面的#换成<i class="fa fa-tag"></i>。效果图：
在这里插入图片描述

文章结束标志

效果图：
在这里插入图片描述
实现方法：

在\themes\next\layout\_macro中新建 passage-end-tag.swig 文件,并添加以下内容：

<div>
  {% if not is_index %}
    <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
  {% endif %}
</div>

接着打开\themes\next\layout\_macro\post.swig文件，在post-body 之后, post-footer 之前添加如代码：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

然后打开主题配置文件_config.yml,在末尾添加

# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

添加版权信息

效果图：
在这里插入图片描述
实现方法：

打开themes/next/_config.yml 文件，搜索 post_copyright关键字,把enable改为true即可

post_copyright:
  enable: false
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

文章永久链接修改

效果图：
在这里插入图片描述
实现方法：

blog根目录配置文件_config.yml,搜索关键字permalink，做如下修改

permalink: :year/:month/:day/:category/:id/

然后进入_posts文件夹，在文章开头添加id这个属性并填写,如上图文章中我的id填的就是core-dom

title: 核心DOM与HTML DOM的区别与联系
date: 2020-03-18 15:28:54
tags: ["Dom"]
categories:
- Dom
id: core-dom

当然也可以修改一下文章生成模板，这样就不用每篇文章都得手动添加了，文章生成模板是博客根目录/scaffolds/post.md，在里面添加属性

---
title: {{ title }}
date: {{ date }}
tags:
categories:
id:
---

为了让中文分组名在网址中显示为英文，可以在博客根目录_config.yml中搜索关键字category_map, 创建分组名映射,例如:

category_map:
  前端: web 
  工具: kits
  数据库: database

首页只展示部分文章，并显示阅读全文按钮

效果图：
在这里插入图片描述
实现方法：

打开 themes/next/_config.yml ，搜索关键字auto_excerpt ,设置enable 为true即可

auto_excerpt:
  enable: true
  length: 150

链接样式修改

效果图：
在这里插入图片描述
实现方法：

打开themes\next\source\css\_common\components\post\post.styl,在最后添加以下css样式，颜色可自定义

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

图片懒加载

实现方法：

命令行进入blog根目录，执行以下命令

$ npm install hexo-lazyload-image --save

然后打开blog根目录的 _config.yml,添加配置

# 图片懒加载
lazyload:
  enable: true
  onlypost: false
  loadingImg:

onlypost:是否仅文章中的图片做懒加载, 如果为 false, 则其他图片也会做懒加载, 如首页的头像, logo 等
loadingImg:图片未加载时的代替图。不填写使用默认加载图片,如需使用网络图片,添加图片地址即可；如使用本地图片，需把图片添加到主题目录下.。Next 主题需将图片放到~\themes\next\source\images目录下,然后引用时:loadingImg: /images/图片文件名

用gulp插件进行博文压缩

用Hexo生成的博客文件中存在大量空格和空行，会造成很多不必要的内存消耗，压缩后在一定程度上会提升网页的加载速度。

实现方法：

命令行进入根目录执行以下命令

$ npm install gulp -g
$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

然后在blog根目录下新建gulpfile.js文件，并添加以下代码：

var gulp = require('gulp');
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'
]);

网站底部文章字数统计

效果图：
在这里插入图片描述
实现方法：

命令行进入根目录执行以下命令

$ npm install hexo-wordcount --save

然后在/themes/next/layout/_partials/footer.swig文件最后添加以下代码

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

实现统计功能

效果图：
在这里插入图片描述
实现方法：

打开 themes/next/_config.yml ，搜索关键字post_wordcount：

post_wordcount:
  item_text: true
  #字数统计
  wordcount: true
  #预览时间
  min2read: true
  #总字数,显示在页面底部
  totalcount: true
  separated_meta: true

修改``单行代码块样式

效果图：
在这里插入图片描述
实现方法：

打开\themes\next\source\css\_custom\custom.styl,添加以下代码，颜色可自定义

code {
  color: #ff7600;
  background: #fbf7f8;
  margin: 2px;
}

添加头像以及设置头像边框为圆形

效果图：
在这里插入图片描述
添加头像：

打开themes/next/_config.yml文件，搜索 Sidebar Avatar 关键字，去掉avatar 前面的#,使用网络图片

# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site  directory(source/uploads): /uploads/avatar.jpg
avatar: http://example.com/avatar.png

或者使用本地图片,把图片放入 themes/next/source/images 下,修改文件路径：

avatar: /images/avatar.gif

设置头像边框为圆形

打开themes/next/source/css/_common/components/sidebar/sidebar-author.syl文件,在.site-author-image后添加最后三行代码：

.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: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

浏览文章的时候显示进度

效果图：
在这里插入图片描述
实现方法：

打开 themes/next/_config.yml ,搜索关键字 scrollpercent ,把 false 改为true

  # Scroll percent label in b2t button
  scrollpercent: true

然后打开themes/next/_config.yml ,搜索关键字b2t ,把false 改为true

 # Back to top in sidebar
  b2t: true

这个其实就是在top按钮上加上了进度显示，如果想让top按钮显示在底部，把b2t属性该为false即可

主页文章添加边框阴影

效果图：
在这里插入图片描述
实现方法：

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

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

添加站内搜索

效果图：
在这里插入图片描述
实现方法：

命令行进入blog根目录，执行以下命令

npm install hexo-generator-searchdb --save

打开blog根目录的 _config.yml,添加配置

# 站内搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

打开themes/next/_config.yml,搜索关键字local_search ,把enable设置为true即可

local_search:
  enable: true

文章顶部显示更新时间

效果图：
在这里插入图片描述
实现方法：

打开主题配置文件_config.yml,搜索关键字updated_at设置为 true即可

post_meta:
  item_text: true
  created_at: true
  updated_at: true
  categories: true

设置文章目录全部展开

效果图：
在这里插入图片描述
实现方法：

打开~/themes/next/source/css/_common/components/sidebar/sidebar-toc.styl,做如下修改即可

.post-toc .nav .nav-child { display: block; }

去掉文章重图片边框

实现方法：

打开/themes/next/source/css/_common/components/post/post-expand.styl,找到img，把border改为none

img {
  box-sizing: border-box;
  margin: auto;
  padding: 3px;
  border: none;
}

楠丶

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
hexo博客-next主题美化、配置

修改标签样式实现方法：修改模板/themes/next/layout/_macro/post.swig,搜索rel="tag"，将后面的#换成<i class="fa fa-tag"></i>。效果图：文章结束标志效果图：实现方法：在\themes\next\layout\_macro中新建 passage-end-tag.swig 文件,并添加以下内容：...
复制链接

扫一扫