Sakura美化

最新推荐文章于 2023-10-28 00:20:23 发布

置顶

VIP文章卢well

最新推荐文章于 2023-10-28 00:20:23 发布

阅读量3.5k

点赞数 1

分类专栏：博客 Web 文章标签： javascript css html node.js gulp

本文链接：https://blog.csdn.net/qq_36949103/article/details/105219170

版权

文章原地址在：我的博客

接上次的文章

闲着也是闲着，不如搭个免费的博客玩玩

0、前言

做hexo的美化工作，主要是：

修改布局文件(HTML模板ejs文件)，添加功能
做好CSS

还是得对HTML(结构)、CSS(表现)、Javascript(行为)有一定的了解

目录和文件分析

现在我们来分析一下thems/Sakura目录结构和文件

首先分析下目录，主要包括以下几个

languages 这个文件夹中存放的是语言文件，主要是博客中的一些字符以简体中文、繁体中文、英文显示的定义
layout 这个是布局文件夹，所有的博客页面HTML和JavaScript以ejs模板存放在这
- _partial 这里的和下面的都是公共的页面，可以引入到HTML的任意位置
- _widget
  - Search 这里存放的是页内搜索的ejs文件
source 这个文件夹和博客根目录下的source文件夹是一样的，但是为了存放主题相关的文件
- css 这里存放css文件
- fonts 字体文件
- images 图片
- js js文件

代码插入位置

再接着就是需要知道我们插入的文件和代码应该放到哪里

一般来说我们的js、css代码一般以文件形式存放到js、css文件夹中，接着再引入HTML代码中，引入位置一般在<head></head>标签中，当然啦css、js位置也不是固定的，你也可以直接放到HTML页面结构的中央和结尾，也就是<body></body>之间或者</body>之后、</html>之前

理论上放在哪个位置都无所谓

要是CSS或者JavaScript的代码很少的话，可以直接放到HTML中，不需要先存为文件再引入

具体参考：HTML中引入js、css的三种方式——行内样式、页面中样式、外部文件导入

就对应我们现在要修改的文件中的_partial目录下head.ejs——这个<html><head></head>就在这个文件中

footer.ejs是底部元素，一般个人、企业版权写在这里，因为一般大部分文件都会引入，因此js代码也可以写在这

layout.ejs这个也是所有页面需要引入的，因为</body></html>标签在这里

要是想将功能单独添加到某个页面，那你就找到那个ejs文件放到里面就醒了

好了，下面就正式开始添加功能和修改样式了

1、博客原有功能修改

博客原有功能修改主要指的是博客根目录配置文件和主题配置文件的修改

因为大部分的都已经在上次的博客搭建文章中写了

就不多说了吧

不讲了的

主要包括各种页面结构的修改：

首页轮播图
站点图标、头像、赞赏等图片的链接修改
个人化的站点标题、副标题、描述、关键词等
导航栏的修改、添加、删除等

通知的修改
startdash的图片、链接修改
社交链接的修改等

这上面这些应该都是不需要再讲了的

导航栏中的关于

主要是关于>我？这个的修改

这个要修改的文件在Sakura/source/js目录下，名字为botui.js

主要修改content后面双引号里的内容，自行修改为自己的就行

function bot_ui_ini() {
   
    var botui = new BotUI("hello-mashiro")
    botui.message.add({
   
        delay: 800,
        content: "Hi, there👋"
    }).then(function () {
   
        botui.message.add({
   
            delay: 1100,
            content: "这里是 Mashiro"
        }).then(function () {
   
            botui.message.add({
   
                delay: 1100,
                content: "一个可爱的蓝孩子~"
            }).then(function () {
   
                botui.action.button({
   
                    delay: 1600,
                    action: [{
   
                        text: "然后呢？ 😃",
                        value: "sure"
                    }, {
   
                        text: "少废话！ 🙄",
                        value: "skip"
                    }]
                }).then(function (a) {
   
                    "sure" == a.value && sure();
                    "skip" == a.value && end()
                })
            })
        })
    });
    var sure = function () {
   
            botui.message.add({
   
                delay: 600,
                content: "😘"
            }).then(function () {
   
                secondpart()
            })
        },
        end = function () {
   
            botui.message.add({
   
                delay: 600,
                content: "[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mjjv2n7p-1585626624967)(https://view.moezx.cc/images/2018/05/06/a1c4cd0452528b572af37952489372b6.md.jpg)]"
            })
        },
        secondpart = function () {
   
            botui.message.add({
   
                delay: 1500,
                content: "目前就读于上海财经大学"
            }).then(function () {
   
                botui.message.add({
   
                    delay: 1500,
                    content: "向往技术却误入商科，但后来喜欢上了经济学…"
                }).then(function () {
   
                    botui.message.add({
   
                        delay: 1200,
                        content: "因为数据分析也需要Coder嘛"
                    }).then(function () {
   
                        botui.message.add({
   
                            delay: 1500,
                            content: "主攻 R 语言和 Python，略懂 STATA，偶尔也折腾 HTML/CSS/JavaScript/PHP"
                        }).then(function () {
   
                            botui.message.add({
   
                                delay: 1500,
                                content: "研究的方向，是经济/金融方向的数据分析（data science）以及机器学习（machine learning）"
                            }).then(function () {
   
                                botui.message.add({
   
                                    delay: 1800,
                                    content: "喜欢画画，希望有一天能够被称为画师"
                                }).then(function () {
   
                                    botui.action.button({
   
                                        delay: 1100,
                                        action: [{
   
                                            text: "为什么叫Mashiro呢？ 🤔",
                                            value: "why-mashiro"
                                        }]
                                    }).then(function (a) {
   
                                        thirdpart()
                                    })
                                })
                            })
                        })
                    })
                })
            })
        },
        thirdpart = function () {
   
            botui.message.add({
   
                delay: 1E3,
                content: "Mashiro以及站名都来自一部动画，因为和主角有一样的爱好~ 如果有兴趣可以找找首页上的视频~"
            }).then(function () {
   
                botui.action.button({
   
                    delay: 1500,
                    action: [{
   
                        text: "为什么是白猫呢？ 🤔",
                        value: "why-cat"
                    }]
                }).then(function (a) {
   
                    fourthpart()
                })
            })
        },
        fourthpart = function () {
   
            botui.message.add({
   
                delay: 1E3,
                content: "因为对GitHub有种执念… "
            }).then(function () {
   
                botui.message.add({
   
                    delay: 1100,
                    content: "而且我真的是猫控！"
                }).then(function () {
   
                    botui.action.button({
   
                        delay: 1500,
                        action: [{
   
                            text: "域名有什么含意吗？(ง •_•)ง",
                            value: "why-domain"
                        }]
                    }).then(function (a) {
   
                        fifthpart()
                    })
                })
            })
        },
        fifthpart = function () {
   
            botui.message.add({
   
                delay: 1E3,
                content: "emmmm，看备案信息你就知道了=.= 本来想要zheng.xin的，但50万真买不起。。"
            }).then(function () {
   
                botui.message.add({
   
                    delay: 1600,
                    content: "那么，仔细看看我的博客吧？ ^_^"
                })
            })
        } 
}

导航栏中的客户端

这个可以使用Fusion App把你自己的博客封装成APP

然后放到蓝奏云上，生成二维码放上来

导航栏中的RSS

根目录下的配置文件中已经有了

#RSS
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

这些代码

因此我们只需要安装好插件就行了

npm install hexo-generator-feed

当然啦，如果本来就能显示内容，那么就不需要安装了

每个页面中的顶部图片

就比如关于>主题这个页面

我们进入根目录下，再进入source目录找到theme-sakura，进入该目录点击index.md，修改photos后面的内容，改为你想要的图片链接

---
title: theme-sakura
comments: false
date: 2019-01-04 22:53:25
keywords: Hexo 主题 Sakura 🌸
description:
photos: https://static.2heng.xin/wp-content/uploads//2018/05/sakura2.jpeg
---
Hexo主题Sakura修改自WordPress主题[Sakura](https://github.com/mashirozx/Sakura/)，感谢原作者[Mashiro](https://2heng.xin/)

文章上面和首页文章列表的图片

也是修改的你新建的文章中的photos后面的图片链接

这些都是这个主题支持的内容，在上篇文章中写过的文章模板

---
title: 文章标题
author: 作者名
avatar: 作者头像链接
authorLink: hojun.cn  #作者的域名
authorAbout: 一个好奇的人  #关于
authorDesc: 一个好奇的人  #作者描述
categories: 分类
date: 2018-12-12 22:16:01 #时间，这个一般都自动创建
comments: true  # 是否需要留言
tags:        # 下面可以写多个标签
 - web
 - 悦读
keywords: Sakura   # 文章关键词
description: hexo-sakura主题使用教程   #文章描述
photos: https://static.2heng.xin/wp-content/uploads//2019/02/wallhaven-672007-1-1024x576.png
---

清单下的番组

这个是在source下bangumi下的index.md中修改的

---
layout: bangumi
title: bangumi
comments: false
date: 2019-02-10 21:32:48
keywords:
description:
bangumis:
  - img: https://lain.bgm.tv/pic/cover/l/0e/1e/218971_2y351.jpg # 番的图片
    title: 朝花夕誓——于离别之朝束起约定之花  # 番的中文标题
    status: 已追完  # 追番状态
    progress: 100   # 追番进度
    jp: さよならの朝に約束の花をかざろう   # 日文标题
    time: 2018-02-24 SUN.  # 这个是出版的时间
    desc: 这里是你追的番的描述
---

清单下的歌单和左下角悬浮歌单

主要是修改你的id，歌单id的获取方式：

进入网易云网页版登录账号，选择一个歌单打开

浏览器的链接将会显示id，就最后一个字段，把那些数字复制到下面就行

https://music.163.com/?from=infinity#/playlist?id=2162711186

清单下的歌单文件是source/music/index.md

---
title: music
date: 2018-12-20 23:14:28
keywords: 喜欢的音乐
description: 
comments: false
photos: https://cdn.jsdelivr.net/gh/honjun/[email protected]/img/banner/music.jpg
---
{% raw %}
<meting-js
  server="netease"
  type="playlist"
  id="2731690811"
  mutex="true">
</meting-js>

<meting-js
  server="netease"
  type="playlist"
  id="419239189"
  mutex="true">
</meting-js>
{% endraw %}

悬浮音乐的代码在主题配置文件中

aplayer: 
  id: 2660651585
  server: netease
  type: playlist
  fixed: true
  autoplay: false
  loop: all
  order: random
  preload: auto
  volume: 0.7
  mutex: true

友链添加

友链修改文件在source/links/index.md

---
layout: links
title: links
date: 2018-12-19 23:11:06
keywords: 友人帐
description: 
comments: true
photos: https://cdn.jsdelivr.net/gh/honjun/[email protected]/img/banner/links.jpg
links:
  - group: 个人项目
    desc: 充分说明这家伙是条咸鱼 < (￣︶￣)>
    items:
    - url: https://shino.cc/fgvf
      img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg
      name: Google
      desc: Google 镜像
    - url: https://shino.cc/fgvf
      img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg
      name: Google
      desc: Google 镜像
  - group: 小伙伴们
    desc: 欢迎交换友链 ꉂ(ˊᗜˋ)
    items:  ## 友链添加主要是在这里
    - url: https://shino.cc/fgvf # 他的链接
      img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg # 他的头像
      name: Google # 他的博客名
      desc: Google 镜像 # 博客描述
    - url: https://shino.cc/fgvf
      img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg
      name: Google
      desc: Google 镜像
---

不需要修改layout目录下文件的应该就这些了

接下来就直接按点添加功能和美化了

记得先引入jQuery

https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js

2、添加标题恶搞

默认的是离开时候还是现实自己的文字标题

添加之后离开和回到这个页面时显示

挺多的js都直接集合到我的cdn中了，大部分都是网上到处搜查的

为了达到上述效果,我们可以在head.ejs或者footer.ejs中加入代码

<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/hititle.js"></script>

例如加入到head.ejs的该位置

加入之后刷新就能生效了

3、添加鼠标单击特效

单击特效有很多种，这里给出三个吧

现在我们把这个代码放到layout.ejs的</body>标签前

<!-- 点击出现社会主义彩色文字 -->
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/shehuizhuyi.js"></script>
<!-- 点击出现爱心 -->
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/love.js"></script>
<!-- 点击出现彩色气球爆炸效果 -->
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/clickBom.js"></script>

可以分别添加一种，也可以多种混合，但是三种一起使用感觉效果不太好

下面是前两者结合的效果：

最后一种：

4、鼠标滑过的特效

这个有很多个，这里展示一个

把代码插入到layout.ejs中

<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/xuehua.js"></script>

效果如下：

5、背景显示飘动的彩带

在需要的页面添加，我们还是在所有页面都加上，layout.ejs中加入代码

<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/piao.js"></script>

6、背景添加动态线条，随鼠标动

仍是layout.ejs中

<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/canvas-nest.min.js"></script>

在这里插入图片描述

7、樱花飘落或雪花飘落

还是layout.ejs中

樱花飘落：

<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/sakura.js"></script>

雪花飘落：

<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/xuehuapiaoluo.js"></script>
或者
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/snow.js"></script>

选择一个就行了

8、禁用一些按键

为了阻止某些使用F12、Ctrl+Alt+I调用开发者选项的用户

还有禁用了鼠标右键，可以开启禁用鼠标左键拖动选择文字

<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/noSomeKey.js"></script>

9、添加画板娘

这次不用插件来添加，直接引入js代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"> <!-- 这条在sakura中已有，可不添加 -->
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

仓库链接在这：live2d-widget

10、添加前往GitHub的彩带

前往GitHub Ribbons

挑选样式之后，复制相应的代码，粘贴到合适的地方

11、加入预加载

sakura主题集成了图片懒加载，可是页面放到GitHub加载还是很慢，matery主题就加入了预加载，从那里得到灵感，因此我们加入预加载

还是在layout.ejs中添加

<script src="//instant.page/3.0.0" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>

官网在这：预加载

12、添加计数

主要使用的是不蒜子和LeanCloud

LeanCloud我使用起来并不理想，因此不讲，想要了解自己去官网看

不蒜子的：

<script src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

再进入不蒜子官网查看访问量pv、用户访问量uv使用

13、添加一言API、诗词

今日诗词提供了诗词的API

我们将这个诗词放到以前的描述那里，社交图标的上方

修改headertop.ejs，找到下面的代码

<div class="header-info">  <!-- 找到这个位置 -->
        <!-- <p><%= theme.description %></p> -->  把这句注释掉
        <p id="jinrishici-sentence">正在加载今日诗词....</p>
        <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
  <!-- 添加上面的两句 -->
        <div class="top-social_v2">

一言API的可以前往这个网址查看使用：

一言开发者中心

正好通知也没有啥用，把他换掉

进入index.ejs，查找<%= theme.notice%>，将其替换为下面的

      <span id="hitokoto" style="margin-left:5px;"> :D 获取中...</span>
      <p align="right" id="afrom"></p>
      <script src="https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/fetch.min.js"></script>
      <script>
        fetch('https://v1.hitokoto.cn/?c=h')
          .then(function (res){
            return res.json();
          })
          .then(function (data) {
            var hitokoto = document.getElementById('hitokoto');
            var afrom = document.getElementById('afrom');
            hitokoto.innerText = data.hitokoto;
            afrom.innerText =  '——【' + data.from + ' ' + data.from_who + '】';
          })
          .catch(function (err) {
            console.error(err);
          })
      </script>

14、添加底部的网站运行时间

在footer.ejs选择合适位置添加代码

<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
  var now = new Date(); 
  function createtime() {
     
    var grt= new Date("03/08/2020 16:44:00");//此处修改你的建站时间或者网站上线时间 
    now.setTime(now.getTime()+250); 
    days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
    hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
    if(String(hnum).length ==1 ){
    hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
    mnum = Math.floor(minutes); if(String(mnum).length ==1 ){
    mnum = "0" + mnum;} 
    seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
    snum = Math.round(seconds); if(String(snum).length ==1 ){
    snum = "0" + snum;} 
    document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 "; 
    document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; 
  } 
  setInterval("createtime()",250);
</script>

15、添加底部动态滚动文字

<div id="binft"></div>
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/textScroll.js"></script>

16、加入天气插件

前往

中国天气

这个网址查看详情

可以选用小视图，添加到link.ejs中

17、顶部加载条

这个sakura有，但是想记录一下

可以搜索pace选用样式

head中加入

<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
<style>
  .pace .pace-progress {
    
  background: #1E92FB; /*进度条颜色*/
  height: 3px;
  }
  .pace .pace-progress-inner {
    
  box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*阴影颜色*/
  }
  .pace .pace-activity {
    
  border-top-color: #1E92FB;    /*上边框颜色*/
  border-left-color: #1E92FB;    /*左边框颜色*/
  }
</style>

18、修改鼠标样式

在style.css中添加,sakura已有，可不管，当然啦，也可以去找一下其他好看的图标

// 鼠标样式
  * {
      cursor: url("https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/img/cursor/normal.cur"),auto!important
  }
  :active {
      cursor: url("https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/img/cursor/No_Disponible.cur"),auto!important
  }

19、评论系统

sakura自带的系统为valine，我们可以自行替换成其他的

就比如来必力，前往

来必力官网

注册登录后，点击菜单栏的【安装】，出现这个界面，直接点击【现在安装】

前往管理页，点击左边的【代码管理】

你将会看到这样的代码

data-uid后面的双引号中的内容剪切出来

然后到主题配置文件下修改，找到最下面的valine

将valine改成false，添加最后两行

# Valine
valine: false
v_appId: Cu2IPPUW8BnkmwzFa8WrS9VC-gzGzoHsz
v_appKey: kgcNfaHXq91mfCaAIcbjGChl
# livere
livere: true
  data_uid: 刚刚复制的uid

接着把下面的代码复制到comment.ejs中

<% if (theme.livere && post.comments) { %>
<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="<%= theme.livere.data_uid %>">
<script type="text/javascript">
   (function(d, s) {
    
       var j, e = d.getElementsByTagName(s)[0];

       if (typeof LivereTower === 'function') {
     return; }

       j = d.createElement(s);
       j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
       j.async = true;

       e.parentNode.insertBefore(j, e);
   })(document, 'script');
</script>
<noscript>为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->
<% } %>

20、在线联系

DaoVoice 在线联系

前往网站

DaoVoice

可以使用GitHub或者微信登录，也可以前往

这里注册

邀请码填：da070d64

进入之后点击应用设置，再点击安装到网站

再将第一个代码复制到</head>之前，将下面两个复制到layout.ejs

21、添加优美的标签页

这个标签页和分类页提取自matery，不得不说matery真的很漂亮

首先我们要创建几个文件，文件所在目录如下

layout

tags.ejs
- _widget
  
  tag-cloud.ejs
  
  tag-wordcloud.ejs

也就是tags.ejs放在layout根目录下，下面两个文件放在layout子目录_widget下

tags.ejs

<%- partial('_partial/header') %>

<main class="content">

    <%- partial('_widget/tag-cloud') %>

    <%- partial('_widget/tag-wordcloud') %>

</main>

_widget/tag-cloud.ejs

<%
var colorArr = ['#F9EBEA', '#F5EEF8', '#D5F5E3', '#E8F8F5', '#FEF9E7',
    '#F8F9F9', '#82E0AA', '#D7BDE2', '#A3E4D7', '#85C1E9', '#F8C471', '#F9E79F', '#FFF'];
var colorCount = colorArr.length;
var hashCode = function (str) {
    if (!str && str.length === 0) {
        return 0;
    }

    var hash = 0;
    for (var i = 0, len = str.length; i < len; i++) {
        hash = ((hash << 5) - hash) + str.charCodeAt(i);
        hash |= 0;
    }
    return hash;
};
var i = 0;
var isTag = is_tag();
%>

<div id="tags" class="container chip-container">
    <div class="card">
        <div class="card-content">
            <div class="tag-title center-align">
                <i class="fa fa-tags"></i>&nbsp;&nbsp;文章标签
            </div>
            <div class="tag-chips">
                <% site.tags.map(function(tag) { %>
                <%
                    i++;
                    var color = i >= colorCount ? colorArr[Math.abs(hashCode(tag.name) % colorCount)]
                            : colorArr[i - 1];
                %>
                <a href="<%- url_for(tag.path) %>" title="<%- tag.name %>: <%- tag.length %>">
                    <span class="chip center-align waves-effect waves-light
                            <% if (isTag && tag.name == page.tag) { %> chip-active <% } else { %> chip-default <% } %>"
                            data-tagname="<%- tag.name %>" style="background-color: <%- color %>;"><%- tag.name %>
                        <span class="tag-length"><%- tag.length %></span>
                    </span>
                </a>
                <% }); %>
            </div>
        </div>
    </div>
</div>

_widget/tag-wordcloud.ejs

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/wallleap/cdn/css/jqcloud.css">
<style type="text/css">
    #tag-wordcloud {
        width: 100%;
        height: 300px;
    }
</style>

<div class="container" data-aos="fade-up">
    <div class="card">
        <div id="tag-wordcloud" class="card-content"></div>
    </div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/jqcloud-1.0.4.js"></script>
<script type="text/javascript">
    <%
    let tagWordArr = [];
    site.tags.map(function(tag) {
        tagWordArr.push({'text': tag.name, 'weight': tag.length, 'link': tag.permalink});
    });

    let tagWords = JSON.stringify(tagWordArr);
    %>

    $('#tag-wordcloud').jQCloud(<%- tagWords %>, {
        autoResize: true
    });
</script>

将这段代码复制到style.css末尾

.chip-container {
   
    margin-top: 60px;
}

.chip-container .tag-title {
   
    margin-bottom: 10px;
    color: #3C4858;
    font-size: 1.75rem;
    font-weight: 400;
}

.chip-container .tag-chips {
   
    margin: 1rem auto 0.5rem;
    max-width: 850px;
    text-align: center;
}

.chip-container .tags-posts {
   
    margin-top: 20px;
}

.chip-container .chip-default {
   
    color: #34495e;
}

.chip-container .chip-active {
   
    color: #FFF !important;
    background: linear-gradient(to bottom right, #FF5E3A 0%, #FF2A68 100%) !important;
    box-shadow: 2px 5px 10px #aaa !important;
}

.chip-container .chip {
   
    margin: 10px 10px;
    padding: 19px 14px;
    display: inline-flex;
    line-height: 0;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .12);
}

.chip-container .chip:hover {
   
    color: #fff;
    background: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%) !important;
}

.chip .tag-length {
   
    margin-left: 5px;
    margin-right: -2px;
    font-size: 0.5rem;
}

.chip-default .tag-length {
   
    color: #e91e63;
    margin-top: 1px;
}

.chip-active .tag-length {
   
    color: #fff;
}

.tag-title.center-align{
   
    margin-top: 100px;
    text-align : center;
}

使用命令hexo new page "tags"，修改博客根目录下source/tags/index.md

---
title: tags
date: 2020-03-09 13:50:05
layout: tags
---

在http://localhost:4000/tags查看页面

22、添加优美的分类页

接着创建几个文件，文件所在目录如下

layout

categories.ejs
- _widget
  
  category-cloud.ejs
  
  category-radar.ejs

也就是categories.ejs放在layout根目录下，下面两个文件放在layout子目录_widget下

添加代码

categories.ejs

<%- partial('_partial/header') %>
<main class="content">

    <%- partial('_widget/category-cloud') %>

    <% if (site.categories && site.categories.length > 0) { %>
    <%- partial('_widget/category-radar') %>
    <% } %>

</main>

category-cloud.ejs

<%
var colorArr = ['#F9EBEA', '#F5EEF8', '#D5F5E3', '#E8F8F5', '#FEF9E7',
    '#F8F9F9', '#82E0AA', '#D7BDE2', '#A3E4D7', '#85C1E9', '#F8C471', '#F9E79F', '#FFF'];
var colorCount = colorArr.length;
var hashCode = function (str) {
    if (!str && str.length === 0) {
        return 0;
    }

    var hash = 0;
    for (var i = 0, len = str.length; i < len; i++) {
        hash = ((hash << 5) - hash) + str.charCodeAt(i);
        hash |= 0;
    }
    return hash;
};
var i = 0;
var isCategory = is_category();
%>

<div id="category-cloud" class="container chip-container">
    <div class="card">
        <div class="card-content">
            <div class="tag-title center-align">
                <i class="fa fa-bookmark"></i>&nbsp;&nbsp;文章分类
            </div>
            <div class="tag-chips">
                <% if (site.categories && site.categories.length > 0) { %>
                <% site.categories.map(function(category) { %>
                <%
                    i++;
                    var color = i >= colorCount ? colorArr[Math.abs(hashCode(category.name) % colorCount)]
                            : colorArr[i - 1];
                %>
                <a href="<%- url_for(category.path) %>" title="<%- category.name %>: <%- category.length %>">
                    <span class="chip center-align waves-effect waves-light
                            <% if (isCategory && category.name == page.category) { %> chip-active <% } else { %> chip-default <% } %>"
                            style="background-color: <%- color %>;"><%- category.name %>
                        <span class="tag-length"><%- category.length %></span>
                    </span>
                </a>
                <% }); %>
                <% } else { %>
                <%= __('categoryEmptyTip') %>
                <% } %>
            </div>
        </div>
    </div>
</div>

category-radar.ejs

<style type="text/css">
    #category-radar {
        margin-top: 50px;
        width: 100%;
        height: 360px;
    }
</style>

<div class="container" data-aos="fade-up">
    <div class="card">
        <div id="category-radar" class="card-content"></div>
    </div>
</div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/echarts.min.js"></script>
<script type="text/javascript">
    let radarChart = echarts.init(document.getElementById('category-radar'));

    <%
        var categories = site.categories;

        // Find the maximum and average values of the post categories.
        var radarValueArr = [];
        categories.some(function(category) {
            radarValueArr.push(category.length);
        });

        var max = Math.max.apply(null, radarValueArr) + Math.min.apply(null, radarValueArr);

        // Calculate the data needed for the radar chart.
        var indicatorArr = [];
        categories.map(function(category) {
            indicatorArr.push({'name': category.name, 'max': max});
        });

        var indicatorData = JSON.stringify(indicatorArr);
        var radarValueData = JSON.stringify(radarValueArr);
    %>

    let option = {
        title: {
            left: 'center',
            text: '文章分类雷达图',
            textStyle: {
                fontWeight: 500,
                fontSize: 22
            }
        },
        tooltip: {},
        radar: {
            name: {
                textStyle: {
                    color: '#3C4858'
                }
            },
            indicator: <%- indicatorData %>,
            nameGap: 5,
            center: ['50%','55%'],
            radius: '66%'
        },
        series: [{
            type: 'radar',
            color: ['#3ecf8e'],
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data : [
                {
                    value : <%- radarValueData %>,
                    name : '文章分类数量'
                }
            ]
        }]
    };

    radarChart.setOption(option);
</script>

接着用命令hexo new page "categories"创建分类页

修改博客根目录下source/categories/index.md

---
title: categories
date: 2020-03-09 13:50:05
layout: categories
---

http://localhost:4000/categories

查看

接着就是把这两个页面放到导航栏上面去

修改主题配置文件，将这两行代码放到留言板之前

	标签: {
   path: /tags/, fa: fa-tag }
  分类: {
   path: /categories/, fa: fa-bookmark }

23、已经集成的一些插件

emoji表情：

hexo-filter-github-emojis

正常插件安装版画板娘：

hexo-helper-live2d

图片懒加载(sakura已经有了，但不是这种方式)：

hexo-lazyload-image

hexo-lazyload-image-enhance

字数统计(好像没装)：

hexo-wordcount

fancybox：

hexo-tag-fancybox_img

bilibili：

hexo-tag-bili

24、文章末尾版权信息添加

首先我们在_partial目录下新建文件article_copyright.ejs

<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  
  <!-- JS库 sweetalert 可修改路径 -->
  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <p><span>本文标题:</span><%= post.title %></p>
  <p><span>文章字数:</span><span class="post-count"><%=wordcount(post.content) %></span></p>
  <p><span>文章作者:</span><a  title="<%=config.author%>"><%=config.author%></a></p>
  <p><span>发布时间:</span><%= post.date.format("YYYY-MM-DD, HH:mm:ss") %></p>
  <p><span>最后更新:</span><%= post.updated.format("YYYY-MM-DD, HH:mm:ss") %></p>
  <p><span>原始链接:</span></span><a class="post-url" href="<%- url_for(post.path) %>" title="<%= post.title %>"><%= post.permalink %></a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{
  { page.permalink }}"  aria-label="复制成功！"></i></span>
  </p>
  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '复制成功',
          icon: "success", 
          showConfirmButton: true
          });
	});
    });  
</script>

需要文章字数的，一定要先安装字数统计插件，上面列出了，不用就把那行注释掉

接着将下面的代码

        <% if (post.copyright) { %>
          <%- partial('../_partial/article_copyright') %>
        <% } %>

复制到common-article.ejs的这个位置

将CSS代码复制到style.css中

.my_post_copyright {
   
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{
   margin:0;}
.my_post_copyright span {
   
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
   
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
   
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
   
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
   
  color: #000;
}
.my_post_copyright .post-url:hover {
   
  font-weight: normal;
}
.my_post_copyright .copy-path {
   
  margin-left: 1em;
  width: 1em;
  +mobile(){
   display:none;}
}
.my_post_copyright .copy-path:hover {
   
  color: #808080;
  cursor: pointer;
}

25、添加404页面

在博客根目录的source目录下新建404.html

随便找个模板，在开头加入代码

---
layout: false
---

例如

---
layout: false
---
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>404</title>
<style>html, body{
    height:95%;}body{
    background: #0f3854;background: -webkit-radial-gradient(center ellipse, #0a2e38 0%, #000000 70%);background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);background-size: 100%;}p{
    margin:0;padding:0;}#clock{
    font-family: 'Share Tech Mono', monospace;color: #ffffff;text-align: center;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);color: #daf6ff;text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);}#clock .time{
    letter-spacing: 0.05em;font-size: 60px;padding: 5px 0;}#clock .date{
    letter-spacing:0.1em;font-size:15px;}#clock .text{
    letter-spacing: 0.1em;font-size:12px;padding:20px 0 0;}</style>
<script type="text/javascript">
!function(e,t){
    "object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.Vue=t()}(this,function(){
    "use strict";function e(e){
    return void 0===e||null===e}function t(e){
    return void 0!==e&&null!==e}function n(e){
    return!0===e}function r(e){
    return!1===e}function i(e){
    return"string"==typeof e||"number"==typeof e}function o(e){
    return null!==e&&"object"==typeof e}function a(e){
    return"[object Object]"===Ti.call(e)}function s(e){
    return"[object RegExp]"===Ti.call(e)}function c(e){
    return null==e?"":"object"==typeof e?JSON.stringify(e,null,2):String(e)}function u(e){
    var t=parseFloat(e);return isNaN(t)?e:t}function l(e,t){
    for(var n=Object.create(null),r=e.split(","),i=0;i<r.length;i++)n[r[i]]=!0;return t?function(e){
    return n[e.toLowerCase()]}:function(e){
    return n[e]}}function f(e,t){
    if(e.length){
    var n=e.indexOf(t);if(n>-1)return e.splice(n,1)}}function p(e,t){
    return ji.call(e,t)}function d(e){
    var t=Object.create(null);return function(n){
    return t[n]||(t[n]=e(n))}}function v(e,t){
    function n(n){
    var r=arguments.length;return r?r>1?e.apply(t,arguments):e.call(t,n):e.call(t)}return n._length=e.length,n}function h(e,t){
    t=t||0;for(var n=e.length-t,r=new Array(n);n--;)r[n]=e[n+t];return r}function m(e,t){
    for(var n in t)e[n]=t[n];return e}function g(e){
    for(var t={
    },n=0;n<e.length;n++)e[n]&&m(t,e[n]);return t}function y(){
    }function _(e,t){
    var n=o(e),r=o(t);if(!n||!r)return!n&&!r&&String(e)===String(t);try{
    return JSON.stringify(e)===JSON.stringify(t)}catch(n){
    return e===t}}function b(e,t){
    for(var n=0;n<e.length;n++)if(_(e[n],t))return n;return-1}function $(e){
    var t=!1;return function(){
    t||(t=!0,e.apply(this,arguments))}}function C(e){
    var t=(e+"").charCodeAt(0);return 36===t||95===t}function x(e,t,n,r){
    Object.defineProperty(e,t,{
    value:n,enumerable:!!r,writable:!0,configurable:!0})}function w(e){
    if(!zi.test(e)){
    var t=e.split(".");return function(e){
    for(var n=0;n<t.length;n++){
    if(!e)return;e=e[t[n]]}return e}}}function k(e,t,n){
    if(Ui.errorHandler)Ui.errorHandler.call(null,e,t,n);else{
    if(!qi||"undefined"==typeof console)throw e;console.error(e)}}function A(e){
    return"function"==typeof e&&/native code/.test(e.toString())}function O(e){
    lo.target&&fo.push(lo.target),lo.target=e}function S(){
    lo.target=fo.pop()}function T(e,t){
    e.__proto__=t}function E(e,t,n){
    for(var r=0,i=n.length;r<i;r++){
    var o=n[r];x(e,o,t[o])}}function j(e,t){
    if(o(e)){
    var n;return p(e,"__ob__")&&e.__ob__ instanceof go?n=e.__ob__:mo.shouldConvert&&!oo()&&(Array.isArray(e)||a(e))&&Object.isExtensible(e)&&!e._isVue&&(n=new go(e)),t&&n&&n.vmCount++,n}}function N(e,t,n,r){
    var i=new lo,o=Object.getOwnPropertyDescriptor(e,t);if(!o||!1!==o.configurable){
    var a=o&&o.get,s=o&&o.set,c=j(n);Object.defineProperty(e,t,{
    enumerable:!0,configurable:!0,get:function(){
    var t=a?a.call(e):n;return lo.target&&(i.depend(),c&&c.dep.depend(),Array.isArray(t)&&D(t)),t},set:function(t){
    var r=a?a.call(e):n;t===r||t!==t&&r!==r||(s?s.call(e,t):n=t,c=j(t),i.notify())}})}}function L(e,t,n){
    if(Array.isArray(e)&&"number"==typeof t)return e.length=Math.max(e.length,t),e.splice(t,1,n),n;if(p(e,t))return e[t]=n,n;var r=e.__ob__;return e._isVue||r&&r.vmCount?n:r?(N(r.value,t,n),r.dep.notify(),n):(e[t]=n,n)}function I(e,t){
    if(Array.isArray(e)&&"number"==typeof t)return void e.splice(t,1);var n=e.__ob__;e._isVue||n&&n.vmCount||p(e,t)&&(delete e[t],n&&n.dep.notify())}function D(e){
    for(var t=void 0,n=0,r=e.length;n<r;n++)t=e[n],t&&t.__ob__&&t.__ob__.dep.depend(),Array.isArray(t)&&D(t)}function M(e,t){
    if(!t)return e;for(var n,r,i,o=Object.keys(t),s=0;s<o.length;s++)n=o[s],r=e[n],i=t[n],p(e,n)?a(r)&&a(i)&&M(r,i):L(e,n,i);return e}function P(e,t){
    return t?e?e.concat(t):Array.isArray(t)?t:[t]:e}function R(e,t){
    var n=Object.create(e||null);return t?m(n,t):n}function F(e){
    var t=e.props;if(t){
    var n,r,i,o={
    };if(Array.isArray(t))for(n=t.length;n--;)"string"==typeof(r=t[n])&&(i=Li(r),o[i]={
    type:null});else if(a(t))for(var s in t)r=t[s],i=Li(s),o[i]=a(r)?r:{
    type:r};e.props=o}}function B(e){
    var t=e.directives;if(t)for(var n in t){
    var r=t[n];"function"==typeof r&&(t[n]={
    bind:r,update:r})}}function H(e,t,n){
    function r(r){
    var i=yo[r]||_o;c[r]=i(e[r],t[r],n,r)}"function"==typeof t&&(t=t.options),F(t),B(t);var i=t.extends;if(i&&(e=H(e,i,n)),t.mixins)for(var o=0,a=t.mixins.length;o<a;o++)e=H(e,t.mixins[o],n);var s,c={
    };for(s in e)r(s);for(s in t)p(e,s)||r(s);return c}function U(e,t,n,r){
    if("string"==typeof n){
    var i=e[t];if(p(i,n))return i[n];var o=Li(n);if(p(i,o))return i[o];var a=Ii(o);if(p(i,a))return i[a];var s=i[n]||i[o]||i[a];return s}}function V(e,t,n,r){
    var i=t[e],o=!p(n,e),a=n[e];if(K(Boolean,i.type)&&(o&&!p(i,"default")?a=!1:K(String,i.type)||""!==a&&a!==Mi(e)||(a=!0)),void 0===a){
    a=z(r,i,e);var s=mo.shouldConvert;mo.shouldConvert=!0,j(a),mo.shouldConvert=s}return a}function z(e,t,n){
    if(p(t,"default")){
    var r=t.default;return e&&e.$options.propsData&&void 0===e.$options.propsData[n]&&void 0!==e._props[n]?e._props[n]:"function"==typeof r&&"Function"!==J(t.type)?r.call(e):r}}function J(e){
    var t=e&&e.toString().match(/^\s*function (\w+)/);return t?t[1]:""}function K(e,t){
    if(!Array.isArray(t))return J(t)===J(e);for(var n=0,r=t.length;n<r;n++)if(J(t[n])===J(e))return!0;return!1}function q(e){
    return new bo(void 0,void 0,void 0,String(e))}function W(e){
    var t=new bo(e.tag,e.data,e.children,e.text,e.elm,e.context,e.componentOptions);return t.ns=e.ns,t.isStatic=e.isStatic,t.key=e.key,t.isComment=e.isComment,t.isCloned=!0,t}function Z(e){
    for(var t=e.length,n=new Array(t),r=0;r<t;r++)n[r]=W(e[r]);return n}function G(e){
    function t(){
    var e=arguments,n=t.fns;if(!Array.isArray(n))return n.apply(null,arguments);for(var r=0;r<n.length;r++)n[r].apply(null,e)}return t.fns=e,t}function Y(t,n,r,i,o){
    var a,s,c,u;for(a in t)s=t[a],c=n[a],u=wo(a),e(s)||(e(c)?(e(s.fns)&&(s=t[a]=G(s)),r(u.name,s,u.once,u.capture,u.passive)):s!==c&&(c.fns=s,t[a]=c));for(a in n)e(t[a])&&(u=wo(a),i(u.name,n[a],u.capture))}function Q(r,i,o){
    function a(){
    o.apply(this,arguments),f(s.fns,a)}var s,c=r[i];e(c)?s=G([a]):t(c.fns)&&n(c.merged)?(s=c,s.fns.push(a)):s=G([c,a]),s.merged=!0,r[i]=s}function X(n,r,i){
    var o=r.options.props;if(!e(o)){
    var a={
    },s=n.attrs,c=n.props;if(t(s)||t(c))for(var u in o){
    var l=Mi(u);ee(a,c,u,l,!0)||ee(a,s,u,l,!1)}return a}}function ee(e,n,r,i,o){
    if(t(n)){
    if(p(n,r))return e[r]=n[r],o||delete n[r],!0;if(p(n,i))return e[r]=n[i],o||delete n[i],!0}return!1}function te(e){
    for(var t=0;t<e.length;t++)if(Array.isArray(e[t]))return Array.prototype.concat.apply([],e);return e}function ne(e){
    return i(e)?[q(e)]:Array.isArray(e)?ie(e):void 0}function re(e){
    return t(e)&&t(e.text)&&r(e.isComment)}function ie(r,o){
    var a,s,c,u=[];for(a=0;a<r.length;a++)s=r[a],e(s)||"boolean"==typeof s||(c=u[u.length-1],Array.isArray(s)?u.push.apply(u,ie(s,(o||"")+"_"+a)):i(s)?re(c)?c.text+=String(s):""!==s&&u.push(q(s)):re(s)&&re(c)?u[u.length-1]=q(c.text+s.text):(n(r._isVList)&&t(s.tag)&&e(s.key)&&t(o)&&(s.key="__vlist"+o+"_"+a+"__"),u.push(s)));return u}function oe(e,t){
    return o(e)?t.extend(e):e}function ae(r,i,a){
    if(n(r.error)&&t(r.errorComp))return r.errorComp;if(t(r.resolved))return r.resolved;if(n(r.loading)&&t(r.loadingComp))return r.loadingComp;if(!t(r.contexts)){
    var s=r.contexts=[a],c=!0,u=function(){
    for(var e=0,t=s.length;e<t;e++)s[e].$forceUpdate()},l=$(function(e){
    r.resolved=oe(e,i),c||u()}),f=$(function(e){
    t(r.errorComp)&&(r.error=!0,u())}),p=r(l,f);return o(p)&&("function"==typeof p.then?e(r.resolved)&&p.then(l,f):t(p.component)&&"function"==typeof p.component.then&&(p.component.then(l,f),t(p.error)&&(r.errorComp=oe(p.error,i)),t(p.loading)&&(r.loadingComp=oe(p.loading,i),0===p.delay?r.loading=!0:setTimeout(function(){
    e(r.resolved)&&e(r.error)&&(r.loading=!0,u())},p.delay||200)),t(p.timeout)&&setTimeout(function(){
    e(r.resolved)&&f(null)},p.timeout))),c=!1,r.loading?r.loadingComp:r.resolved}r.contexts.push(a)}function se(e){
    if(Array.isArray(e))for(var n=0;n<e.length;n++){
    var r=e[n];if(t(r)&&t(r.componentOptions))return r}}function ce(e){
    e._events=Object.create(null),e._hasHookEvent=!1;var t=e.$options._parentListeners;t&&fe(e,t)}function ue(e,t,n){
    n?Co.$once(e,t):Co.$on(e,t)}function le(e,t){
    Co.$off(e,t)}function fe(e,t,n){
    Co=e,Y(t,n||{
    },ue,le,e)}function pe(e,t){
    var n={
    };if(!e)return n;for(var r=[],i=0,o=e.length;i<o;i++){
    var a=e[i];if(a.context!==t&&a.functionalContext!==t||!a.data||null==a.data.slot)r.push(a);else{
    var s=a.data.slot,c=n[s]||(n[s]=[]);"template"===a.tag?c.push.apply(c,a.children):c.push(a)}}return r.every(de)||(n.default=r),n}function de(e){
    return e.isComment||" "===e.text}function ve(e,t){
    t=t||{
    };for(var n=0;n<e.length;n++)Array.isArray(e[n])?ve(e[n],t):t[e[n].key]=e[n].fn;return t}function he(e){
    var t=e.$options,n=t.parent;if(n&&!t.abstract){
    for(;n.$options.abstract&&n.$parent;)n=n.$parent;n.$children.push(e)}e.$parent=n,e.$root=n?n.$root:e,e.$children=[],e.$refs={
    },e._watcher=null,e._inactive=null,e._directInactive=!1,e._isMounted=!1,e._isDestroyed=!1,e._isBeingDestroyed=!1}function me(e,t,n){
    e.$el=t,e.$options.render||(e.$options.render=xo),$e(e,"beforeMount");var r;return r=function(){
    e._update(e._render(),n)},e._watcher=new Lo(e,r,y),n=!1,null==e.$vnode&&(e._isMounted=!0,$e(e,"mounted")),e}function ge(e,t,n,r,i){
    var o=!!(i||e.$options._renderChildren||r.data.scopedSlots||e.$scopedSlots!==Vi);if(e.$options._parentVnode=r,e.$vnode=r,e._vnode&&(e._vnode.

最低0.47元/天解锁文章

卢well

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
Sakura美化

文章原地址在：我的博客接上次的文章闲着也是闲着，不如搭个免费的博客玩玩文章目录0、前言目录和文件分析代码插入位置1、博客原有功能修改不讲了的导航栏中的关于导航栏中的客户端导航栏中的RSS每个页面中的顶部图片文章上面和首页文章列表的图片清单下的番组清单下的歌单和左下角悬浮歌单友链添加2、添加标题恶搞3、添加鼠标单击特效4、鼠标滑过的特效5、背景显示飘动的彩带6、背景添加动态线条，随鼠标动7、樱...
复制链接

扫一扫