Hexo博客主题优化

短命女 2021-09-17 22:24 468阅读 0赞

![标题图][1240]

> `Hexo`博客主题优化

## 添加背景图 ##

在 `themes/*/source/css/_custom/custom.styl` 中添加如下代码：

body{
        background:url(/images/bg.jpg);
        background-size:cover;
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-position:center;
    }

## 修改Logo字体 ##

在 `themes/*/source/css/_custom/custom.styl` 中添加如下代码：

@font-face {
        font-family: Zitiming;
        src: url('/fonts/##.ttf.ttf');
    }
    .site-title {
        font-size: 40px !important;
    	font-family: '##' !important;
    }

文件在 `themes/next/source/fonts` 目录下，保留字体文件。

## 本地文章优化 ##

npm install hexo-generator-sitemap --save
    npm install hexo-generator-baidu-sitemap --save

站点配置文件`_config.yml`中添加以下代码

sitemap:
    path: sitemap.xml
    baidusitemap:
    path: baidusitemap.xml

站点配置文件`_config.yml`

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

## 添加文章书写样式 ##

![效果][1240 1]

打开`themes/next/source/css/_custom` 下的 `custom.styl` 文件

// 黄
    span#inline-yellow {
    display:inline;
    padding:.2em .6em .3em;
    font-size:80%;
    font-weight:bold;
    line-height:1;
    color:#fff;
    text-align:center;
    white-space:nowrap;
    vertical-align:baseline;
    border-radius:0;
    background-color: #f0ad4e;
    }
    
    // 绿
    span#inline-green {
    display:inline;
    padding:.2em .6em .3em;
    font-size:80%;
    font-weight:bold;
    line-height:1;
    color:#fff;
    text-align:center;
    white-space:nowrap;
    vertical-align:baseline;
    border-radius:0;
    background-color: #5cb85c;
    }
    
    // 蓝
    span#inline-blue {
    display:inline;
    padding:.2em .6em .3em;
    font-size:80%;
    font-weight:bold;
    line-height:1;
    color:#fff;
    text-align:center;
    white-space:nowrap;
    vertical-align:baseline;
    border-radius:0;
    background-color: #2780e3;
    }
    
    // 紫
    span#inline-purple {
    display:inline;
    padding:.2em .6em .3em;
    font-size:80%;
    font-weight:bold;
    line-height:1;
    color:#fff;
    text-align:center;
    white-space:nowrap;
    vertical-align:baseline;
    border-radius:0;
    background-color: #9954bb;
    }

编辑的文章地方

<span id="inline-yellow"> 站点配置文件 </span>
    <span id="inline-blue"> 站点配置文件 </span>
    <span id="inline-green"> 主题配置文件 </span>
    <span id="inline-purple"> 主题配置文件 </span>

## 头像改成圆形 ##

`themes/next/source/css/_common/components/sidebar/sidebar-author.styl`中`.site-author-image`定义

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

## `robots.txt`文件 ##

`hexo`站点的`source`文件，在`source`文件夹中新建文件`robots.txt`

User-agent: * Allow: /
    Allow: /archives/
    Disallow: /vendors/
    Disallow: /categories/
    
    Sitemap: http://www../sitemap.xml
    Sitemap: http://www../baidusitemap.xml

# hexo robots.txt
    User-agent: *
    Allow: /
    Allow: /archives/
    
    Disallow: /vendors/
    Disallow: /js/
    Disallow: /css/
    Disallow: /fonts/
    Disallow: /vendors/
    Disallow: /fancybox/
    
    Sitemap: http://www..com/sitemap.xml
    Sitemap: http://www..com/baidusitemap.xml

## 修改内容的宽度 ##

`source/css/_variables/custom.styl` 文件

// 修改成你期望的宽度
    $content-desktop = 700px
    
    // 当视窗超过 1600px 后的宽度
    $content-desktop-large = 900px

## 文章加密 ##

`themes/*/layout/_partials/head.swig`文件

文章上

---
    
    password: 123456
    ---

## 添加头像 ##

`themes/next`下的`_config.yml`文件

avatar: http://example.com/avatar.png

或者使用本地图片，图片把放入`themes/next/source/images`下

avatar: /images/vator.png

## 头像旋转 ##

.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%;
      // 设置旋转
      transition: 1.4s all;
    }
    
    // 可旋转的圆形头像
    .site-author-image:hover {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -transform: rotate(360deg);
    }

## 点击出现桃心效果 ##

`/themes/*/source/js/src`下新建文件`click.js`

`\themes\*\layout\_layout.swig`文件末尾添加

<script type="text/javascript" src="/js/src/clicklove.js"></script>

## 修改访问URL路径 ##

`Hexo` 站点下的 `_config.yml` 文件

permalink: :category/:title/

## 创建标签目录 ##

$ cd you-site
    $ hexo new page tags

创建后，打开`you-site/source/tags`的`index.md`

---
    title:  #页面主题
    date:  #当前创建文件时间
    type: "tags" # 设置页面类型
    ---

## RSS ##

$ npm install hexo-generator-feed --save

`Hexo` 站点下的`_config.yml`

# feed
    # Dependencies: https://github.com/hexojs/hexo-generator-feed
    feed:
      type: atom
      path: atom.xml
      limit: 20
      hub:
      content:

## 文章添加边框阴影 ##

打开 `themes/*/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);
    }

## 显示当前浏览进度 ##

`themes/*/_config.yml`

# Back to top in sidebar
    b2t: true
    
    # Scroll percent label in b2t button
    scrollpercent: true

## 修改文章间分割线 ##

`themes/next/source/css/_common/components/post/`下的`post-eof.styl`

.posts-expand {
      .post-eof {
        display: block;
      //  margin: $post-eof-margin-top auto $post-eof-margin-bottom;  
        width: 0%; //分割线长度
        height: 0px; // 分割线高度
        background: $grey-light;
        text-align: center;
      }
    }

主题配置文件下

# Declare license on posts
    post_copyright:
      enable: true
      license: CC BY-NC-SA 3.0
      license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

## 带\#号的标签 ##

`themes/next/layout/_macro/`下的`post.swig`文件

<div class="post-tags">
        {% for tag in post.tags %}
           <a href="{
       { url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {
       { tag.name }}</a>
        {% endfor %}
    </div>

## 文章字数统计，阅读时长 ##

$ npm i --save hexo-wordcount

`themes/next`下的`_config.yml`

# Dependencies: https://github.com/willin/hexo-wordcount
    post_wordcount:
      item_text: true
      #字数统计
      wordcount: true
      #预览时间
      min2read: true
      #总字数
      totalcount: false
      separated_meta: true

## 连接样式 ##

`themes/next/source/css/_custom/`下的`custom.styl`

.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;
      }
    }

## 添加广告 ##

[百度SSP][SSP]和[谷歌Adsense][Adsense]

在 `theme/*/layout/post.swig`添加：

{% include '_custom/google_ad.swig' %}

{% block content %}
      <div id="posts" class="posts-expand">
        {
       { post_template.render(page) }}
        {% include '_custom/google_ad.swig' %}
      </div>
    {% endblock %}

## 顶部加载条 ##

`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-flash

## 添加复制功能 ##

下载插件[clipboard.js][]

在`themes/next/source/lib/`,下新建`clipboard`文件夹

把`src`文件夹下的文件拖动到`clipboard`文件夹

`themes/next/source/js/src/`,建立`custom.js`

`themes/next/layout/_custom/`建立`custom.swig`

`themes/next/layout/_layout.swig`,标签在`</body>`上面

{% include '_custom/custom.swig' %}

或者

*  [clipboard.min.js][] **推荐**

保存在下面这个目录  
`.\themes\next\source\js\src`目录下，创建`clipboard-use.js`

/*页面载入完成后，创建复制按钮*/
    !function (e, t, a) { 
      /* code */
      var initCopyCode = function(){
        var copyHtml = '';
        copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
        copyHtml += '  <i class="fa fa-globe"></i><span>copy</span>';
        copyHtml += '</button>';
        $(".highlight .code pre").before(copyHtml);
        new ClipboardJS('.btn-copy', {
            target: function(trigger) {
                return trigger.nextElementSibling;
            }
        });
      }
      initCopyCode();
    }(window, document);

`.\themes\next\source\css\_custom\custom.styl`样式

//代码块复制按钮
    .highlight{
      //方便copy代码按钮（btn-copy）的定位
      position: relative;
    }
    .btn-copy {
        display: inline-block;
        cursor: pointer;
        background-color: #eee;
        background-image: linear-gradient(#fcfcfc,#eee);
        border: 1px solid #d5d5d5;
        border-radius: 3px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-appearance: none;
        font-size: 13px;
        font-weight: 700;
        line-height: 20px;
        color: #333;
        -webkit-transition: opacity .3s ease-in-out;
        -o-transition: opacity .3s ease-in-out;
        transition: opacity .3s ease-in-out;
        padding: 2px 6px;
        position: absolute;
        right: 5px;
        top: 5px;
        opacity: 0;
    }
    .btn-copy span {
        margin-left: 5px;
    }
    .highlight:hover .btn-copy{
      opacity: 1;
    }

在`.\themes\next\layout\_layout.swig`文件中，添加引用

<script type="text/javascript" src="/js/src/clipboard.min.js"></script>  
      <script type="text/javascript" src="/js/src/clipboard-use.js"></script>

## 我的博客 ##

个人博客?：[个人博客][Link 1]

如果看了觉得不错

点赞！转发！

> 达叔小生：往后余生，唯独有你  
> You and me, we are family !  
> 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通  
> 简书博客： 达叔小生  
> [https://www.jianshu.com/u/c785ece603d1][https_www.jianshu.com_u_c785ece603d1]

## 结语 ##

*  下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
 *  小礼物走一走 or 点赞

[1240]: /images/20210724/adf98532ab094c6db473928580d5bbc8.png
[1240 1]: /images/20210724/5cf286305eb34bfe99342872415ba550.png
[SSP]: https://ssp.baidu.com/static/register.html
[Adsense]: https://www.google.com/adsense/start/#/?modal_active=none
[clipboard.js]: https://link.jianshu.com/?t=https://github.com/zenorocha/clipboard.js
[clipboard.min.js]: https://raw.githubusercontent.com/zenorocha/clipboard.js/master/dist/clipboard.min.js
[Link 1]: http://huangguangda.cn/
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1