栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

Hexo博客美化

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Hexo博客美化

概述

最近无意中看到了两个很好玩的可以应用于hexo的“小插件”,分享一下。
先看下效果:

RevolverMaps

官网

这是一个能够实时统计访问你的站点或者博客的插件。

地球仪上的label表示访问站点的人都位置。
点击那个xxx visits,就会跳转到你的访问记录详情页了。

用法

如下图所示:

打开官网首页,在Get Started这里把这段js复制到你的网页上即可。

Hexo中使用

找到themes目录下你正在使用的主题对应的文件夹,放到你希望的位置的模版文件中即可。
比如我这里用的是huno主题,我希望在左边栏显示,那么就找到/themes/huno/layout/_partials/side-panel.ejs,在合适的地方插入复制来的脚本即可。

更多插件、更多配置

官网上还可以自定义一些配置和样式,比如以chart的形式来展示。或者修改大小等等。这里就不赘述了。

live2d

Github地址
Live2D是什么,相信绅士们都知道。用Live2D做个看板娘,放在个人博客上,是不是能让博客更hot一点呢?:D

安装
  • 使用npm install --save hexo-helper-live2d安装插件

  • 使用npm install 模型名称来下载模型

模型名称如下:

  • live2d-widget-model-chitose
  • live2d-widget-model-epsilon2_1
  • live2d-widget-model-gf
  • live2d-widget-model-haru
  • live2d-widget-model-haruto
  • live2d-widget-model-hibiki
  • live2d-widget-model-hijiki
  • live2d-widget-model-izumi
  • live2d-widget-model-koharu
  • live2d-widget-model-miku
  • live2d-widget-model-ni-j
  • live2d-widget-model-nico
  • live2d-widget-model-nietzsche
  • live2d-widget-model-nipsilon
  • live2d-widget-model-nito
  • live2d-widget-model-shizuku
  • live2d-widget-model-tororo
  • live2d-widget-model-tsumiki
  • live2d-widget-model-unitychan
  • live2d-widget-model-wanko
  • live2d-widget-model-z16

配置
  • 在hexo的根目录创建名为live2d_models的文件夹
  • 把之前安装的模型文件夹从node_modules文件夹复制到live2d_models中
    比如我这里安装的是live2d-widget-model-wanko
    先使用npm install live2d-widget-model-wanko
    再从node_modules中找到这个文件夹,复制到live2d_models文件夹中
  • 在hexo根目录下的_config.yml中的最后面添加以下内容:
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  scriptFrom: local # 默认
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  model:
    use: live2d-widget-model-wanko # npm-module package name
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
  display:
    superSample: 2
    width: 150
    height: 300
    position: right
    hOffset: 0
    vOffset: -20
  mobile:
    show: true
    scale: 0.5
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.2

这样一个萌萌哒"看板娘"就诞生了。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/245562.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号