zoukankan      html  css  js  c++  java
  • 女朋友看了我的博客,说太LOW了,于是我搞了一天~

    持续原创输出,点击上方蓝字关注我

    原创博客+1,点击左下角阅读原文进入

    目录

    • 前言
    • 如何下载?
    • 配置文件的分类
    • 基本信息配置
    • 修改主题
    • Next主题样式设置
    • 添加动态背景
    • 修改链接的样式
    • 添加文章搜索功能
    • 修改文章底部标签的#的样式
    • 修改作者头像并旋转
    • 修改``的样式
    • 添加全文阅读的按钮
    • 添加站点访问人数计数
    • 去掉文章目录标题的自动编号
    • 主页文章添加阴影卡片效果
    • 网站底部字数统计
    • 设置网站的图标Favicon
    • 添加文章字数统计功能
    • 添加顶部动态加载条
    • 文章设置置顶
    • 文章加密访问
    • 总结

    前言

    陈某的独立博客搭建已经有三年多时间了,使用Hexo+Git,一直使用的主题是jacman,前几天女票看到说太LOW了,这哪能忍,必须换一个逼格高点的。

    其实的三年前看到jacman这个主题还是挺喜欢的,但是现在的看看确实不怎地,哎,老了....

    今天这篇文章来介绍下一款简洁的主题NEXT以及配置方式。先来上一张个人的博客的截图,如下:

    如何下载?

    NEXT这款主题源码都直接托管在GitHub上,可以直接搜索,下载地址:https://github.com/theme-next/hexo-theme-next.git

    下载源码之后,直接解压到博客的themes的目录下,比如我的主题目录就是G:hexo hemes ext

    配置文件的分类

    hexo搭建的博客有两个yml配置文件,一个称之为站点配置文件,是根目录下的_config.yml,另一个是主题配置文件,是主题目录下的_config.yml文件。

    基本信息配置

    基本信息包括:博客标题、作者、描述、语言等等。这些基本信息的配置都在站点配置文件中。如下:

    title: 标题
    subtitle: 副标题
    description: 描述
    author: 作者
    language: 语言(简体中文是zh-Hans)
    timezone: 网站时区(Hexo 默认使用您电脑的时区,不用写)
    

    比如我的站点配置文件以上的配置如下:

    # Site
    title: 不才陈某技术博客
    subtitle: 微信公众号:码猿技术专栏
    description: 本站是不才陈某的技术分享博客。内容涵盖Java后端技术、Spring Boot、微服务架构、系统安全、前端、系统监控等相关的研究与知识分享。
    author: 不才陈某
    language: zh-Hans
    timezone:
    

    修改主题

    hexo博客的主题很多,想要切换也是很简单,直接在站点配置文件中设置即可,如下:

    # 切换next主题
    theme: next
    

    Next主题样式设置

    Next主题提供了4种风格供我们选择,分别为MuseMistPiscesGemini

    以上4种风格大同小异,作者博客的风格是Gemini,大家可以根据自己的喜好任意切换,在主题配置文件中找到Scheme Settings,如下:

    # 设置自己喜欢的风格
    scheme: Gemini
    

    添加动态背景

    动态背景能瞬间提升博客的逼格,实现的效果如下:

    配置起来也是很简单,在主题配置文件中,修改如下:

    # 设置为true
    canvas_nest: true
    

    修改链接的样式

    默认的超链接的样式是灰色的,可以修改成如下效果:

    修改文件 themes extsourcecss\_commoncomponentspostpost.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;
      }
    }
    

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

    添加文章搜索功能

    搜索这个功能是很非常重要的,文章很多的情况下怎样才能快速筛选想要的文章呢?搜索的功能是少不了的。实现的效果如下:

    Next主题添加搜索的功能很简单,首先安装搜索插件:

    npm install hexo-generator-searchdb --save
    

    插件安装完成之后在站点配置文件中找到Extensions,在其下面添加如下内容:

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

    搜索功能很强大,但是第一次加载可能有点慢,大概十几秒的时间才能出来搜索框,没办法,毕竟是静态的。

    修改文章底部标签的#的样式

    默认的文章标签的样式是带有#这个符号的,比如#Spring Boot,但是可以将#修改成标签的icon,效果如下:

    5
    5

    实现方法很简单,修改模板/themes/next/layout/_macro/post.swig,搜索rel="tag">#,将#换成<i class="fa fa-tag"></i>

    修改作者头像并旋转

    修改头像很简单,找一张尺寸合适、自己喜欢的图片,放在themes extsourceimages下,随后修改主题配置文件,将头像重新设置即可,配置如下:

    # 设置自己的头像
    avatar: /images/header.jpg
    

    头像默认是不带旋转的,想要实现鼠标放在头像上方会自动旋转,只需要在 hemes extsourcecss\_commoncomponentssidebarsidebar-author.styl文件下添加如下一段代码:

    .site-author-image {
      display: block;
      margin: 0 auto;
      padding: $site-author-image-padding;
      max- $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);
      }
    }
    

    以上配置完成之后,将鼠标悬停在头像上方将会自动旋转起来。

    修改``的样式

    Next默认的主题样式是灰色的,不太显眼,颜色也不太好看,可以将其设置成自己喜欢的颜色,效果如下:

    配置起来也是很简单,只需要在 hemes extsourcecss\_customcustom.styl文件中添加如下代码:

    // Custom styles.
    code {
        color: #ff7600;
        background: #fbf7f8;
        margin: 2px;
    }
    // 大代码块的自定义样式
    .highlight, pre {
        margin: 5px 0;
        padding: 5px;
        border-radius: 3px;
    }
    .highlight, code, pre {
        border: 1px solid #d6d6d6;
    }
    

    以上的颜色可以配置自己喜欢的,比如效果图中的颜色是我个人比较喜欢的。

    添加全文阅读的按钮

    Next主题默认是没有全文阅读按钮的,文章是全部展开形式的,但是可以设置成如下效果:

    共有两种配置方法,分别如下:

    1. md文件中需要折叠的地方添加<!--more-->,则在其下方的内容都将会折叠起来,只有点击阅读全文按钮才会显示出来。
    2. 主题配置文件中找到auto_excerpt,这个属性可以设置为自动折叠,比如设置成只显示300个字,这样的后面的内容就会折叠起来,配置如下:
    auto_excerpt:
      enable: true
      length: 300
    

    添加站点访问人数计数

    站点访问计数有名的就是不蒜子,使用起来非常方便,安装步骤也是很简单。

    将如下的代码添加到themes/next/layout/_partial/footer.swig文件中:

    <div>
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span id="busuanzi_container_site_pv" style='display:none'>
        本站总访问量 <span id="busuanzi_value_site_pv"></span>    <span class="post-meta-divider">|</span>
    </span>
    <span id="busuanzi_container_site_uv" style='display:none'>
    <span id="busuanzi_value_site_uv"></span>人看过我的博客啦
    </span>
    </div>
    

    添加的位置如下图,可自行根据个人喜好更换位置:

    以上设置完毕后只是显示整个站点的次数,并没有显示每篇文章的访问次数,效果如下图:

    如果想要显示每篇文章的访问次数,在themes/next/layout/_macro/post.swig文件第一行增加is_pv字段,如下:

    {% macro render(post, is_index, is_pv, post_extra_class) %}
    

    然后将这段代码插入到其中:

    {% if is_pv %}
      <span class="post-meta-divider">|</span>
      <span id="busuanzi_value_page_pv"></span>次阅读
    {% endif %}
    

    插入的位置如下图:

    然后再打开 themes/next/layout/post.swig,这个文件是文章的模板,给render方法传入参数(对应刚才添加的is_pv字段),如下图:

    最后再打开themes/next/layout/index.swig,这个文件是首页的模板,给render方法传入参数(对应刚才添加的is_pv字段),如下图:

    至此即可配置成功,效果如下图:

    去掉文章目录标题的自动编号

    我们自己写文章的时候一般都会自己带上标题编号,但是默认的主题会给我们带上编号,很是别扭,如何去掉呢?

    主题配置文件中找到toc属性,将其中的number属性设置成false,如下:

    toc:
      enable: true
      number: false
      wrap: false
    

    最终实现的效果如下图:

    主页文章添加阴影卡片效果

    添加阴影卡片效果的效果图如下:

    实现方法只需要在 hemes extsourcecss\_customcustom.styl文件中添加如下内容即可:

    // 主页文章添加阴影效果
     .post {
       margin-top: 60px;
       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);
      }
    

    网站底部字数统计

    实现的效果如下图:

    首先切换到根目录,安装插件,命令如下:

    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>
    

    设置网站的图标Favicon

    Next会有一个默认的网站图标,但是的我们可以替换成自己喜欢的,效果如下图:

    实现方法很简单,自己设计一张喜欢的logo,并将图标名称改为favicon.ico,然后把图标放在/themes/next/source/images里,并且修改主题配置文件

    # Put your favicon.ico into `hexo-site/source/` directory.
    favicon: /favicon.ico
    

    添加文章字数统计功能

    该功能能够为每篇文章计算字数以及阅读大致需要的时间,效果如下:

    在根目录下安装hexo-wordcount,执行命令如下:

    npm install hexo-wordcount --save
    

    安装完成后在主题配置文件中的配置参数如下:

    # Post wordcount display settings
    # Dependencies: https://github.com/willin/hexo-wordcount
    post_wordcount:
      item_text: true
      wordcount: true
      min2read: true
    

    添加顶部动态加载条

    实现的效果如下图:

    配置很简单,只需要在主题配置文件中修改pace属性为true,如下:

    pace: true
    

    文章设置置顶

    修改hero-generator-index 插件,把文件:node_modules/hexo-generator-index/lib/generator.js 内的代码替换为:

    'use strict';
    var pagination = require('hexo-pagination');
    module.exports = function(locals){
      var config = this.config;
      var posts = locals.posts;
        posts.data = posts.data.sort(function(a, b) {
            if(a.top && b.top) { // 两篇文章top都有定义
                if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
                else return b.top - a.top; // 否则按照top值降序排
            }
            else if(a.top && !b.top) { // 以下是只有一篇文章top有定义,那么将有top的排在前面(这里用异或操作居然不行233)
                return -1;
            }
            else if(!a.top && b.top) {
                return 1;
            }
            else return b.date - a.date; // 都没定义按照文章日期降序排
        });
      var paginationDir = config.pagination_dir || 'page';
      return pagination('', posts, {
        perPage: config.index_generator.per_page,
        layout: ['index', 'archive'],
        format: paginationDir + '/%d/',
        data: {
          __index: true
        }
      });
    };
    

    在文章中添加 top 值,数值越大文章越靠前,如:

    ---
    title: Spring Boot 与多数据源的那点事儿~
    date: 2020-05-22 22:45:48
    tags: Spring Boot进阶
    categories: Spring Boot
    top: 100
    ---
    

    文章加密访问

    有些文章涉及到隐私可能需要密码才能访问,此时就可以设置加密,效果如下图:

    themes->next->layout->_partials->head.swig文件中的<meta>标签之后插入以下代码:

    <script>
        (function () {
            if ('{{ page.password }}') {
                if (prompt('请输入文章密码') !== '{{ page.password }}') {
                    alert('密码错误!');
                    if (history.length === 1) {
                        location.replace("https://chenjiabing666.github.io/"); // 这里替换成你的首页
                    } else {
                        history.back();
                    }
                }
            }
        })();
    </script>
    

    然后在文章的的MD文件上方添加一个password,如下:

    ---
    title: Spring Boot 与多数据源的那点事儿~
    date: 2020-05-22 22:45:48
    tags: Spring Boot进阶
    categories: Spring Boot
    top: 100
    password: 123456
    ---
    

    全部配置完成后,这篇文章必须输入密码123456才能访问。

    总结

    本文主要介绍了Next主题美化的一些方法,关于Hexo博客搭建的教程网上很多,有不会的可以去网上搜搜教程。

    作者的博客并没有设置单独的域名,完全是搭建的在Github上的,个人觉得没必要一个单独的域名,完全是自己的学习以及工作心得,因此没搞这些,不喜勿喷,哈哈.........

    如果觉得作者写的好,有所收获的话,点个关注,推荐一波,文章首发于公众号!!!
  • 相关阅读:
    颜色透明度16进制对照表
    爬取代理IP
    Python中匹配IP的正则表达式
    IP地址正则表达式的写法
    每日一练 11.23
    每日一练 11.22
    每日一练
    pycharm使用教程
    周总结博客16
    周总结博客15
  • 原文地址:https://www.cnblogs.com/Chenjiabing/p/13878059.html
Copyright © 2011-2022 走看看