🌹🌹🌹 正在加载今日诗词....

yilia 基本使用总结

阅读数：次
🔤字数统计: 1.9k字   |   📖阅读时长≈ 10分

本片文章记录一些 yilia 初学使用的一些基本用方法和技巧，我会持续更新，学到啥写啥，慢慢来吧。

1.为文章添加多个标签

1
2
3
4
5
tags:
    - 标签1
    - 标签2
    - ...
    ...

2.设置hexo首页只显示部分摘要（不显示全文）

  • 在文章中需要截断的地方加入<!--more-->，显示部分为截断的上面。
    1
    2
    3
    ... 显示内容
    <!--more-->  #截断
    ... 不显示内容

3.头像上背景修改为图片

  • 修改 themes\yilia\layout_partial\left-col.ejs 文件
    1
    2
    3
    <div class="overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>"></div>    
    改为    
    <div class="overlay" style="background: url('https://w.wallhaven.cc/full/k9/wallhaven-k9zqjd.png') no-repeat center bottom;background-size: cover;"></div>

    4.实现旋转头像效果

  • 新建 themes\yilia\source\avatarrotation.css 文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    # avatarrotation.css

    .left-col #header .profilepic img {
    	/* 控制旋转速度时间*/
      -webkit-transition: -webkit-transform 1.0s ease-out;
      -moz-transition: -moz-transform 1.0s ease-out;
      transition: transform 1.0s ease-out;
    }
    .left-col #header .profilepic img:hover {
    	/* 鼠标经过360% */
      -webkit-transform: rotateZ(360deg);
      -moz-transform: rotateZ(360deg);
      transform: rotateZ(360deg);
    }
  • 修改 themes\yilia\layout_partial\head.ejs 文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # head.ejs

      <%- partial('css') %>

    <!-- 旋转头像效果-->
      <% if (theme.avatarrotation){ %>
    	<link rel="stylesheet" type="text/css" href="/./avatarrotation.css">
      <% } %>
    <!-- 添加完成 -->

      <style type="text/css">
  • themes\yilia_config.yml 文件添加
    1
    2
    #头像是否旋转(如果不要旋转取false)
    avatarrotation: true

5.添加 valine 评论系统

注册完以后需要创建一个应用，名字可以随便起，然后 进入应用->设置->应用key
获取你的appid 和 appkey

  • 修改 themes/yilia/_config.yml 添加valine 评论系统：
    1
    2
    3
    4
    5
    6
    7
    8
    # Valine https://valine.js.org
    valine: 
     appid:  #Leancloud应用的appId
     appkey:  #Leancloud应用的appKey
     verify: false #验证码
     notify: false #评论回复提醒
     avatar: mm #评论列表头像样式：''/mm/identicon/monsterid/wavatar/retro/hide
     placeholder: Just go go #评论框占位符
  • 打开 themes\yilia\layout_partial\article.ejs 文件，末尾添加
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    # article.ejs

    <% if (theme.valine && theme.valine.appid && theme.valine.appkey && !index){ %>
      <section id="comments" class="comments">
        <style>
          .comments{margin:30px;padding:10px;background:#fff}
          @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
        </style>
        <%- partial('post/valine', {
          key: post.slug,
          title: post.title,
          url: config.url+url_for(post.path)
          }) %>
      </section>
    <% } %>
  • 打开 hexo\themes\yilia\layout_partial\post 文件夹，新建 valine.ejs 文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    #valine.ejs

    <div id="vcomment" class="comment"></div>
    <script src="//cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/leancloud-storage/dist/av-min.js"></script>
    <script src='//cdn.jsdelivr.net/npm/valine/dist/Valine.min.js'></script>
    <script>
       var notify = '<%= theme.valine.notify %>' == true ? true : false;
       var verify = '<%= theme.valine.verify %>' == true ? true : false;
       new Valine({
                av: AV,
                el: '#vcomment',
                notify: notify,
                verify: verify,
                app_id: "<%= theme.valine.appid %>",
                app_key: "<%= theme.valine.appkey %>",
                placeholder: "<%= theme.valine.placeholder %>",
                avatar: "<%= theme.valine.avatar %>",
                avatar_cdn: "<%= theme.valine.avatar_cdn %>",
                pageSize: <%= theme.valine.pageSize %>
        });
        if(window.location.hash){
            var checkExist = setInterval(function() {
               if ($(window.location.hash).length) {
                  $('html, body').animate({scrollTop: $(window.location.hash).offset().top-90}, 1000);
                  clearInterval(checkExist);
               }
            }, 100);
        }
    </script>

6.点击桃心效果

  • 创建 themes\yilia\source\js\src\love.js 文件，如果找不到文件夹，就新建对应的文件夹。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    # love.js

    ! function(e, t, a) {
      function n() {
        c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r()
      }

      function r() {
        for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
        requestAnimationFrame(r)
      }

      function o() {
        var t = "function" == typeof e.onclick && e.onclick;
        e.onclick = function(e) {
          t && t(), i(e)
        }
      }

      function i(e) {
        var a = t.createElement("div");
        a.className = "heart", d.push({
          el: a,
          x: e.clientX - 5,
          y: e.clientY - 5,
          scale: 1,
          alpha: 1,
          color: s()
        }), t.body.appendChild(a)
      }

      function c(e) {
        var a = t.createElement("style");
        a.type = "text/css";
        try {
          a.appendChild(t.createTextNode(e))
        } catch (t) {
          a.styleSheet.cssText = e
        }
        t.getElementsByTagName("head")[0].appendChild(a)
      }

      function s() {
        return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
      }
      var d = [];
      e.requestAnimationFrame = function() {
        return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function(e) {
          setTimeout(e, 1e3 / 60)
        }
      }(), n()
    }(window, document);
  • 打开 themes\yilia\layout\layout.ejs 文件, 最末尾添加
    1
    <script type="text/javascript" src="/js/src/love.js"></script>

7.文章末尾添加“本文结束”标记

  • 打开 themes\yilia\layout_partial\article.ejs 文件。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    # article.ejs

    ......
                          <span class="reward-type">微信</span>
                        </div>
                        <% } %>
                      </div>
                    </span>
                  </span>
                </span>
              </div>
              </a>
            </div>
          <% } %>
        </div>

    <!-- 添加本文结束标记-->
    <% if ( !index ){ %>
    <div style="text-align:center;color: #00BFFF;font-size:14px;">
         -------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------
         </div>
    <% } %>
    <!-- 添加完成 -->

        <div class="article-info article-info-index">
          <%if(post.top){%>
            <div class="article-pop-out tagcloud">
              <i class="icon-tuding"></i>
              <a class="article-tag-list-link color3">置顶</a>
            </div>
          <% } %>
    ......

8.侧边栏背景修改为图片

  • 修改 themes\yilia\layout\layout.ejs 文件
    1
    2
    3
    <div class="left-col" q-class="show:isShow"> 
    改为
    <div class="left-col" q-class="show:isShow" style="background: url('https://i.loli.net/2020/05/23/Ygxmpn4zwrSEJGy.png') no-repeat center bottom;background-size: cover;" >
  • 修改 themes\yilia_config.yml 文件
    1
    2
    3
    4
    # 样式定制 - 一般不需要修改，除非有很强的定制欲望…
    style:
      # 头像上面的背景颜色
      header: 'rgba(0,0,0,0)'

9.Hexo添加Live2D看板娘

  • 第一步在Hexo文件下安装依赖：
    1
    npm install --save hexo-helper-live2d
  • 第二步安装模型依赖
    1
    npm install live2d-widget-model-模型
    模型可以在这里查看自己喜欢的https://huaji8.top/post/live2d-plugin-2.0/

我现在用的是 z16

z161.jpg

  • 第三步向 hexo 的 _config.yml 添加如下的配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false #标签模式下为true
  debug: false
  log: false # Whether to show logs in console
  model:
    use: live2d-widget-model-z16    #选择的模型  koharu
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
  react:
    opacity: 0.7 #透明度
    opacityDefault: 0.7
    opacityOnHover: 0.2
  display:
    superSample: 2
    width: 150
    height: 300
    position: right #位置
    hOffset: 0
    vOffset: -20
  mobile:
    show: true
    scale: 0.5
    motion: true

注意：use后面 改为你想用的live2d模型

  • 第四步正常发布后就可以看到了
    1
    hexo g -d
赏

谢谢你请我喝咖啡

支付宝
微信
-------------本文结束感谢您的阅读-------------

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

一只在互联网公司深耕的crud程序狗，内卷重度患者！<br>徜徉在知识的海洋中inginging~~~<br>奋斗的路上永不停歇!<br>学习一直在继续<br><br>fighting!!!