基于windows10+hexo+github搭建个人博客(2)

阅读数:0次

安装动漫小人

  1. 安装插件
    1
    npm 或者 cnpm install --save hexo-helper-live2d
  2. 样式选择
    https://github.com/xiazeyu/live2d-widget-models
    样式浏览
    https://huaji8.top/post/live2d-plugin-2.0/
    https://blog.csdn.net/wang_123_zy/article/details/87181892
  3. 样式下载
    1
    npm 或者 cnpm install live2d-widget-model-haru
    可以在工作目录/node_modules看到
    (问题) npm ERR! Unexpected end of JSON input while parsing near ‘…nes":{“node”:">=0.10.’
    (解决方法)
    1
    npm cache clean --force
  4. 修改根目录_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
    #二次元
    live2d:
       enable: true
       scriptFrom: local
       pluginRootPath: live2dw/
       pluginJsPath: lib/
       pluginModelPath: assets/
       tagMode: false
       debug: false
       model:
         scale: 1 #大小
         use: live2d-widget-model-haru/02 #这个是你要修改的
       display:
         superSample: 2 #采样 模糊度
         position: right #在屏幕上的显示位置
         width: 300 #显示宽度
         height: 600 #显示高度
         hOffset: 100
         wOffset: -50
       mobile:
         scale: 0.5
         show: true #手机端是否显示
       react:
         opacity: 0.5 #透明度
       dialog:
         enable: false
    (注意1) live2d-widget-model-haru有两个模型，所以在使用的时候:
    1
    2
    3
    use: live2d-widget-model-haru/01
    或者
    use: live2d-widget-model-haru/02
    (注意2) 01和02的json文件是空的，所以需要把live2d-widget-model-haru文件夹下的json文件复制进去
  5. 运行
    1
    2
    3
    4
    hexo clean 
    hexo g 
    hexo s 
    hexo d
  6. 关闭和卸载
    关闭: _config.yml 设置为 enable: false
    卸载：npm uninstall hexo-helper-live2d
  7. 参考
    https://blog.csdn.net/wugenqiang/article/details/88375517
    https://blog.csdn.net/wang_123_zy/article/details/87181892#live2dwidgetmodelunitychan_50
    https://www.jianshu.com/p/5b5c61323772

添加全局音乐

  1. npm install aplayer --save
    或者
    从 https://github.com/MoePlayer/APlayer 下载
  2. 把Aplayer/dist文件夹复制到/themes/XXX/source目录下
  3. 在/themes/XXX/source/dist目录下新建music.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
    const ap = new APlayer({
     container: document.getElementById('aplayer'),
     autoplay: false, //自动播放
     listFolded: true, //播放列表默认折叠
     listMaxHeight: 90, //播放列表最大高度
     order: 'list', //音频循环顺序, 可选值: 'list', 'random'
     loop: 'all', //音频循环播放, 可选值: 'all', 'one', 'none'
     theme: '#e9e9e9', //切换音频时的主题色，优先级低于audio.theme
     preload: 'none', //音频预加载，可选值: 'none', 'metadata', 'auto'
     mutex: true, //互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
     lrcType: 3, //歌词格式，可选值：3（LRC文件歌词格式），1（JS字符串歌词格式）
     volume: 0.7, //默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
     fixed: false, //吸底模式（fixed:true），迷你模式（mini:true），普通模式（注释此行或者设置fixed:false）
     audio: [
       {
         name: 'いつも何度でも千与千寻',
         artist: '木村弓',
         url: 'http://m10.music.126.net/20190803024114/af2913ee8eab67bc66c129846d890309/ymusic/8786/ddc4/17a2/3884ffebfbe5fab07c8a795924e44566.mp3',
         cover: 'http://p2.music.126.net/Job7uTX8IWi3huhpJbuljQ==/109951163345986508.jpg?param=300x300',
       },
       {
         name: "Theme of the Last Time Travel",
         artist: '西浦智仁',
         url: 'http://m10.music.126.net/20190803021409/2f8541264a0309caa81fb1e7d2279f13/ymusic/91cf/90ce/319a/a30bed81f31b3a2a6ffa9eef4988a30d.mp3',
         cover: 'http://p2.music.126.net/E5h9E0HInwOun35o74qQKQ==/774056185966233.jpg?param=300x300',
       }
     ]
    });
  4. 在\themes\XXX\layout_partial\left-col.ejs文件添加如下代码：
    1
    2
    3
    4
    5
    <!-- 音频播放 -->
    <link rel="stylesheet" href="/dist/APlayer.min.css">
    <div id="aplayer" style="position:absolute;left:0;bottom:0;" width="280px"></div>
    <script type="text/javascript" src="/dist/APlayer.min.js"></script>
    <script type="text/javascript" src="/dist/music.js"></script>
  5. 参考
    https://www.jianshu.com/p/822a1a12d471
  • 方法2

  1. 在\themes\XXX\layout_partial\left-col.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
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    <% if(theme.aplayer.enable) { %>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
     // 这里div的样式是笔者自己修改过的，你可以直接使用APlayer官方的原配置：<div id="aplayer"></div>
     <div id="aplayer" style="position:absolute;left;0;bottom:0;"></div>
     <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/color-thief-don@2.0.2/src/color-thief.js"></script>
     <script>
       const ap = new APlayer({
         container: document.getElementById('aplayer'),
         autoplay: false, //自动播放
         listFolded: true, //播放列表默认折叠
         listMaxHeight: 90, //播放列表最大高度
         order: 'list', //音频循环顺序, 可选值: 'list', 'random'
         loop: 'all', //音频循环播放, 可选值: 'all', 'one', 'none'
         theme: '#e9e9e9', //切换音频时的主题色，优先级低于audio.theme
         preload: 'none', //音频预加载，可选值: 'none', 'metadata', 'auto'
         mutex: true, //互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
         lrcType: 3, //歌词格式，可选值：3（LRC文件歌词格式），1（JS字符串歌词格式）
         volume: 0.7, //默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
         fixed: false, //吸底模式（fixed:true），迷你模式（mini:true），普通模式（注释此行或者设置fixed:false）
         audio: [{
             name: '平凡之路',
             artist: '朴树',
             lrc: '/downloads/lrc/平凡之路-朴树.lrc',
             cover: 'http://p2.music.126.net/W_5XiCv3rGS1-J7EXpHSCQ==/18885211718782327.jpg?param=300x300',
             url: 'http://fs.open.kugou.com/cd5cbe8edb012e4f77b0857cefc0956e/5c66accf/G097/M08/0A/1F/AYcBAFkQGpOAMUpuAEm-3SlWMyk951.mp3'
           },
           {
             name: '后会无期',
             artist: 'G.E.M.邓紫棋',
             lrc: '/downloads/lrc/后会无期-G.E.M.邓紫棋.lrc',
             cover: 'http://p1.music.126.net/vpvPajo3kn88nHc7jUjeWQ==/5974746185758035.jpg?param=300x300',
             url: 'http://m10.music.126.net/20190215193113/e5afc8b5376136029366f2053cf30f85/ymusic/2c87/6ec3/582e/0d572dcc04f8de34133c0f364b74c30c.mp3'
           }
         ]
       });
       //实现切换音频时，根据音频的封面图片自适应主题色
       const colorThief = new ColorThief();
       const setTheme = (index) => {
         if (!ap.list.audios[index].theme) {
           colorThief.getColorAsync(ap.list.audios[index].cover, function(color) {
             ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
           });
         }
       };
       setTheme(ap.list.index);
       ap.on('listswitch', (data) => {
         setTheme(data.index);
       });
     </script>
     <% } %>

  2. 配置/themes/yilia/_config.yml文件，添加如下代码。

    1
    2
    aplayer:
       enable: true

  3. 参考
    https://www.techgrow.cn/posts/cfdad023.html

    (注意) 注意样式和位置

文章目录点击跳转

  1. 在\themes\yilia_config.yml配置文件设置toc: 2
  2. 安装Aplayer播放器后目录不能跳转
    原因：编码问题
    解决方案：
    a. 找到\themes\yilia\source\dist路径下的APlayer.min.js文件
    b. ctrl+f搜索defaultPrevented定位到要修改的地方，替换成以下代码(decodeURIComponent处理)
    1
    2
    3
    4
    5
    6
    7
    8
    if (!e.defaultPrevented) {
                             e.preventDefault(), decodeURIComponent(location.hash) !== decodeURIComponent(this.hash) && window.history.pushState(null, null, decodeURIComponent(this.hash));
                             var n = document.getElementById(decodeURIComponent(this.hash).substring(1));
                             if (!n) return;
                             t(n, 500, function(e) {
                                 location.replace("#" + e.id)
                             })
                         }
  3. 参考
    http://ds666.fun/2019/08/07/Hexo使用Aplayer后目录跳转的bug/

修改头像

  1. 添加图像资源文件夹
    themes/yilia/source/assets
  2. 修改themes/yilia/_config.yml配置文件
  3. 参考
    https://blog.csdn.net/lynnbest/article/details/79845944

全文显示

  1. 在博客MD文件插入
    1
    <!-- more -->
  2. 注释themes/yilia/_config.yml里面的
    1
    # excerpt_link: more
  3. 参考
    https://blog.csdn.net/lynnbest/article/details/79845944

统计访问数(yilia主题)

  • LeanCloud方式
  1. 官网注册服务
    LeanCloud官网地址: https://leancloud.cn/
    注册账号->创建应用(开发版，名字任意取)->存储里创建class(名字取Counter)->安全中心在web安全域名添加博客的网址
    参考：https://bjtu-hxs.github.io/2018/06/12/leancloud-config/
  2. 修改theme下的_config.yml文件
    1
    2
    3
    4
    5
    6
    7
    8
    leancloud_visitors:
      enable: true
      app_id: ************** 
      app_key: ************
    #添加一下js插件的 CDN地址
    js_cdn:
       jquery: https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js
       av : //cdn1.lncld.net/static/js/2.5.0/av-min.js
  3. 在主题的layout_partial\post\date.ejs文件的最后添加显示阅读量的代码(可以根据自己想要的效果放在其他ejs文件里，如title.ejs)
    1
    2
    3
    4
    5
     <% if (theme.leancloud_visitors.enable){ %>
    <a href="javascript:;" class="archive-article-date">
    <i class="icon-smile icon"></i> 阅读数:<span id="<%- url_for(post.path) %>" class="pageViews">0</span>次
    </a>
     <% } %>
  4. 在主题的layout_partial\after-footer.ejs文件里</script>和<%- partial之间插入以下代码
    1
    2
    3
    4
    <script src="<%- theme.js_cdn.jquery %>"></script>
    <% if (theme.leancloud_visitors.enable){ %>
    <%- partial('post/leancloud') %> 
    <% } %>
  5. 在主题的layout_partial\post\目录下新建leancloud.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
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    <script src="<%- theme.js_cdn.av %>"></script>
    <script type="text/javascript"> 
    if(<%- theme.leancloud_visitors.enable %>){
     var leancloud_app_id  = '<%- theme.leancloud_visitors.app_id %>';
     var leancloud_app_key = '<%- theme.leancloud_visitors.app_key %>';

     AV.init({
         appId: leancloud_app_id,
         appKey: leancloud_app_key
     });

     var pageViewsLength = $(".pageViews").length;

     var isIndex = $(".pageViews").length > 1 ?true:false;

     function showTime() {
         var Counter = AV.Object.extend("Counter");
         if(isIndex){
             $(".pageViews").each(function(){
                 showPageViewsNum($(this),Counter);
             });
         }else{ 
             addPageViewsNum($(".pageViews"));
             showPageViewsNum($(".pageViews"),Counter);
         }
     }

     //显示阅读量
     function showPageViewsNum(ele,Counter){
         var query = new AV.Query("Counter");
         var url = ele.attr('id').trim();
             query.equalTo("words", url);
             query.count().then(function (number) {
                 $(document.getElementById(url)).text(number?  number : '0');
             }, function (error) {
                  $(document.getElementById(url)).text('0');
             });
     }

     //追加阅读量
     function addPageViewsNum(ele){
         var url = ele.attr('id').trim();
         var Counter = AV.Object.extend("Counter");
         var query = new Counter;
         query.save({
             words: url
         }).then(function (object) {});
     }

     if(pageViewsLength){ //此处判断等于 1 在执行 可去除循环
         showTime();
     }
    }
    </script>
  6. 可以在leancloud后台看到数据
  7. 参考
    https://www.cnblogs.com/stringfade/p/7738072.html
    http://www.icafebolger.com/hexo/hexopostcount.html
    https://www.githang.com/2019/05/30/hexo-article-reading-statistics-based-on-leancloud/
  • 不蒜子方式(要去掉外层id才能正常显示)
  1. 在主题下的_config.yml文件添加
    1
    2
    busuanzi:
        enable: true
  2. 在 themes\yilia\layout_partial\after-footer.ejs最后添加
    1
    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  3. 统计网站访问量
    修改 themes\yilia\layout_partial\footer.ejs 或者 left-col.ejs，设置访客数和站点访问总量
    不能正常显示的方案:
    1
    2
    <span id="busuanzi_container_site_pv" style="color:#b0a0aa;font-size:14px;">总访问量<span id="busuanzi_value_site_pv"></span></span>
    <span id="busuanzi_container_site_uv"style="color:#b0a0aa;font-size:14px;">总访客数<span id="busuanzi_value_site_uv"></span></span>
    可以正常显示的方案:
    1
    2
    3
    4
    5
    6
     <% if (theme.busuanzi && theme.busuanzi.enable){ %>
    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span style="color:#b0a0aa;font-size:14px; display: inline;">总访问量<span id="busuanzi_value_site_pv"></span></span>
    <span class="post-meta-divider">|</span>
    <span style="color:#b0a0aa;font-size:14px; display: inline;">总访客数<span id="busuanzi_value_site_uv"></span></span>
    <% } %>
  4. 单篇文章点击量
    在需要显示的地方添加,如article.ejs 
    1
    <span id="busuanzi_container_page_pv" style="font-size:16px;color:rgb(153,153,153);line-height:1.8em;">本文总阅读量<span id="busuanzi_value_page_pv"></span>次</span>
  5. 参考
    https://www.jianshu.com/p/f6f19b02c661
    https://blog.csdn.net/lynnbest/article/details/79845944

上传图像[2022年9月4日更新]

  1. 安装插件
    1
    cnpm install hexo-asset-image --save
  2. 打开/node_modules/hexo-asset-image/index.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
    53
    54
    55
    56
    57
    58
    59
    60
      'use strict';
      var cheerio = require('cheerio');
      // http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
      function getPosition(str, m, i) {
        return str.split(m, i).join(m).length;
        }

      var version = String(hexo.version).split('.');
      hexo.extend.filter.register('after_post_render', function(data){
      var config = hexo.config;
      if(config.post_asset_folder){
       	var link = data.permalink;
    if(version.length > 0 && Number(version[0]) == 3)
       var beginPos = getPosition(link, '/', 1) + 1;
    else
       var beginPos = getPosition(link, '/', 3) + 1;
    // In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
    var endPos = link.lastIndexOf('/') + 1;
       link = link.substring(beginPos, endPos);

       var toprocess = ['excerpt', 'more', 'content'];
       for(var i = 0; i < toprocess.length; i++){
         var key = toprocess[i];

         var $ = cheerio.load(data[key], {
           ignoreWhitespace: false,
           xmlMode: false,
           lowerCaseTags: false,
           decodeEntities: false
         });

         $('img').each(function(){
    	if ($(this).attr('src')){
    		// For windows style path, we replace '\' to '/'.
    		var src = $(this).attr('src').replace('\\', '/');
    		if(!/http[s]*.*|\/\/.*/.test(src) &&
    		   !/^\s*\//.test(src)) {
    		  // For "about" page, the first part of "src" can't be removed.
    		  // In addition, to support multi-level local directory.
    		  var linkArray = link.split('/').filter(function(elem){
    			return elem != '';
    		  });
    		  var srcArray = src.split('/').filter(function(elem){
    			return elem != '' && elem != '.';
    		  });
    		  if(srcArray.length > 1)
    			srcArray.shift();
    		  src = srcArray.join('/');
    		  $(this).attr('src', config.root + link + src);
    		  console.info&&console.info("update link as:-->"+config.root + link + src);
    		}
    	}else{
    		console.info&&console.info("no src attr, skipped...");
    		console.info&&console.info($(this));
    	}
         });
         data[key] = $.html();
       }
      }
      });
  3. 配置根目录的_config.yml文件(重要！！！)
    1
    post_asset_folder: true
    和
    1
    url: https://XXX.github.io
  4. 生成带asset的同名文件夹和md文件
    1
    hexo new "XXX"
  5. 插入方式
    • 方法一
      把图片放到XXX文件夹里, 在XXX.md文件引入图像(相对路径)
      假设图像在/source/_posts/XXX/a.jpg，此时只需要使用相对路径
    1
    {% asset_img a.jpg 由于hexo会把代码解析，所以此处用图片展示 %}
    • 方法二
      若使用绝对路线则要
      假设图像在/source/img/a.jpg(不可以在_posts里面)
    1
    ![](/img/a.jpg)
  6. 参考
    https://blog.csdn.net/xjm850552586/article/details/84101345
    https://www.nobige.cn/post/20190605-hexo-asset-imageFix/
    https://vwin.github.io/2018/08/07/Hexo博客文章插入图片/
    https://wangwei1237.github.io/2020/02/05/handle-the-bug-of-hexo-asset-image-plugin/ 上传图像不显示问题

上传视频

  1. 新建/source/assets/video目录
  2. 在博文md引入
    1
    2
    3
    4
    <video width="100%" height="350" controls="controls" preload="none">
    <source id="mp4" src="/assets/video/XXX.mp4" type="video/mp4">
     the tag is not supported by your browser
    </video>
    或者
    1
    <iframe width="100%" height="350" src="/assets/video/XXX.mp4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    或者
    1
    <iframe width="100%" height="350" src="/assets/video/XXX.mp4" frameborder="no" scrolling="no" border="0"  framespacing="0" allowfullscreen="true"> </iframe>
  3. 参考
    https://walesexcitedmei.github.io/2018/08/29/HEXO-hexo-中插入视频的方法/
    https://blog.csdn.net/l1216766050/article/details/88962973

添加动态线条背景效果

  1. 网站
    https://github.com/hustcc/canvas-nest.js/blob/master/README-zh.md
    其他动态效果还有three_waves、canvas_lines、canvas_sphere
    (注意)yilia主题和next主题其实安装方式一致
    下载canvas_nest
    1
    cnpm 或者 npm install --save canvas-nest.js
  2. 把/node_modules/canvas_nest.js/dist/文件复制到/themes/yilia/source/dist/目录下
  3. 在/themes/yilia/layout/layout.ejs的<body></body>之间添加如下代码
    1
    <script type="text/javascript" src="/dist/canvas_nest/canvas-nest.js"></script>
  4. 在/themes/yilia/_config.yml配置
    next主题格式
    1
    2
    3
    4
    5
    6
    7
    8
    canvas_nest:
       enable: true
       onmobile: true # 是否在移动端显示
       color: '0,0,255' # 动态背景中线条的 RGB 颜色
       pointColor: '0,0,0'
       opacity: 0.5 # 动态背景中线条透明度
       zIndex: -1 # 动态背景的 z-index 属性值
       count: 150 # 动态背景中线条数量
    yilia主题格式,其实有没有都行
    1
    canvas_nest: true
  5. 参考
    https://blog.csdn.net/sinat_33381791/article/details/82827842
    http://yearito.cn/posts/hexo-theme-beautify.html
    http://ylong.net.cn/hexo_conf.html

Google收录

  1. 站点地图
    a. 安装生成站点地图
    1
    npm 或者 cnpm install hexo-generator-sitemap --save
    b.修改配置文件根目录下的_config.yml
    1
    2
    sitemap:
      path: sitemap.xml
    c. hexo g hexo d
    d. 此时public目录有sitemap.xml文件，这就是生成的站点地图
  2. Google网站站长
    a. 网址 https://search.google.com/search-console?hl=zh-CN&resource_id=https://calmcapk.github.io/
    b. 添加站点网址 https://XXX.github.io
    c. 选择下载html验证文件验证方式，下载google验证文件，放在\themes\yilia\source目录下，然后hexo g, hexo d，最后点击验证即可
    d. 添加站点地图 https://XXX.github.io/sitemap.xml
    e. 可以通过site:XXX.github.io 查看是否收录成功(可能要一两天时间)
  3. 参考
    https://zhuanlan.zhihu.com/p/28468742
    http://tengj.top/2016/03/14/hexo6seo/

其他

插入图像
https://blog.csdn.net/lynnbest/article/details/79845944
版权
https://blog.zscself.com/posts/ee4d9ecb/
更多美化
http://yearito.cn/posts/hexo-theme-beautify.html
https://blog.csdn.net/qq_36759224/article/details/85420403
更多设置
https://blog.csdn.net/kunkun5love/article/details/79130956

https://www.jianshu.com/p/517263426abd
https://blog.csdn.net/qq_37210523/article/details/80909983

赏

谢谢你请我吃糖果

微信

扫一扫，分享到微信

微信分享二维码

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

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家