给hexo添加宠物
开始
之前在博客园上看到，公告栏里有人竟然在养鱼，觉得很好玩！一直念念不忘的，于是就想着在hexo中也来养几只，因为我用的事Next的Muse主题，所以有一个非常合适的侧边栏，先来看看效果。
进入正题
首先你要去找几只宠物养一下，领养的网站aBowman去找你想养的宠物，狗、乌龟、青蛙之类的。
以小金鱼为例子，在下面的 edit settings按钮中可以设置一些参数，颜色、数目、背景图、食物颜色之类的。
设置完成以后，下面的框框里有对应的代码，愉快的给copy出来备用。
操作主题
找到主题下的layout/_custom/sidebar.swig文件，将这一段给copy上。外层用div包裹一下，方便调整样式。
当然了，直接复制过来的样式一定不满意，你可以在div中自己修改，也可以在 next/source/css/_custom/custom.style自己添加，直接修改外层包裹着的行间样式，也是可以的！
<div id="fish" style="text-align: center;margin-top: 18px;">
<object type="application/x-shockwave-flash" style="outline:none;" data="/js/fish.swf?up_fishColor1=F45540&up_fishColor4=0D0C0C&up_fishColor9=F45540&up_fishColor6=F45540&up_fishColor5=F45540&up_fishColor10=F45540&up_foodColor=FCB347&up_fishColor3=080707&up_fishColor7=F45540&up_backgroundImage=/images/finsh.JPG&up_numFish=6&up_fishName=Fish&up_fishColor2=F45540&up_fishColor8=F45540&up_backgroundColor=F0F7FF&" width="200" height="375"><param name="movie" value="https://cdn.abowman.com/widgets/fish/fish.swf?up_fishColor1=F45540&up_fishColor4=0D0C0C&up_fishColor9=F45540&up_fishColor6=F45540&up_fishColor5=F45540&up_fishColor10=F45540&up_foodColor=FCB347&up_fishColor3=080707&up_fishColor7=F45540&up_backgroundImage=http://img.1ppt.com/uploads/allimg/1805/1_180523223723_7.JPG&up_numFish=6&up_fishName=Fish&up_fishColor2=F45540&up_fishColor8=F45540&up_backgroundColor=F0F7FF&"><param name="AllowScriptAccess" value="always"><param name="wmode" value="opaque"><param name="scale" value="noscale"><param name="salign" value="tl"></object>
</div>
背景图片flash我已经放到资源目录中了，这块代码仅供参考，要使用你需要修改 data 与 backgroundImage 将路径改为对应的网络地址。
你已经懒到了不想修改了，直接使用我这个样式的！！！也给你！
<div id="finsh" style="text-align: center;margin-top: 18px;">
<object type="application/x-shockwave-flash" style="outline:none;" data="https://cdn.abowman.com/widgets/fish/fish.swf?up_fishColor1=F45540&up_fishColor4=0D0C0C&up_fishColor9=F45540&up_fishColor6=F45540&up_fishColor5=F45540&up_fishColor10=F45540&up_foodColor=FCB347&up_fishColor3=080707&up_fishColor7=F45540&up_backgroundImage=http://img.1ppt.com/uploads/allimg/1805/1_180523223723_7.JPG&up_numFish=6&up_fishName=Fish&up_fishColor2=F45540&up_fishColor8=F45540&up_backgroundColor=F0F7FF&" width="200" height="375"><param name="movie" value="https://cdn.abowman.com/widgets/fish/fish.swf?up_fishColor1=F45540&up_fishColor4=0D0C0C&up_fishColor9=F45540&up_fishColor6=F45540&up_fishColor5=F45540&up_fishColor10=F45540&up_foodColor=FCB347&up_fishColor3=080707&up_fishColor7=F45540&up_backgroundImage=http://img.1ppt.com/uploads/allimg/1805/1_180523223723_7.JPG&up_numFish=6&up_fishName=Fish&up_fishColor2=F45540&up_fishColor8=F45540&up_backgroundColor=F0F7FF&"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object>
</div>
有跨域什么的问题，好像！把引用的资源放，主题的js目录下！像上面那样直接js/fish.swf 进行引用就能避免了，背景图片同理，因为背景图片引用用的是http协议，也是有跨域问题的！你可以同理放到images的目录下/images/fish.png。
给hexo添加宠物的更多相关文章
- hexo个人博客添加宠物/鼠标点击效果/博客管理
1.添加宠物 博客宠物模型:https://github.com/xiazeyu/live2d-widget-models 模型对应的动画效果:https://huaji8.top/post/live ...
- hexo添加404公益界面
http://hellolb.top/2018/08/16/hexo添加404公益界面/ hexo个人博客添加404公益界面,这里我使用的腾讯404公益界面 我的博客主题是hexo+yilia,其实所 ...
- hexo干货系列：（五）hexo添加站内搜索
前言 本来想用百度站内搜索,但是没成功,所以改用swiftype,用起来还是很棒的,这里分享一下我的安装步骤 正文 注册 去swiftype官网注册个账号,然后登陆,对了不要去在意30天试用,30天过 ...
- Hexo 添加Live2D看板娘
title: Hexo 添加 Live2D看板娘 二次元什么的最喜欢了[大好きです] 准备 项目地址 live2d模型 部分模型预览 开始 首先进入Hexo博客根目录安装live2d插件 $ npm ...
- 接入gitment为hexo添加评论功能
title: 接入gitment为hexo添加评论功能 toc: false date: 2018-04-16 10:59:56 categories: methods tags: hexo gitm ...
- Hexo添加字数统计、阅读时长
统计插件 配置 NexT 主题默认已经集成了文章[字数统计].[阅读时长]统计功能,如果我们需要使用,只需要在主题配置文件 _config.yml 中打开 wordcount 统计功能即可.如下所示: ...
- hexo添加新菜单并实现新菜单的文章归类
1.添加收藏夹菜单,新建一个页面,命名为 favorite,命令如下: hexo new page favorite ## 然后就可以看到在source下多了一个favorite的文件夹,里面有一个i ...
- HEXO添加置顶功能
使用库:参考 http://wangwlj.com/2018/01/09/blog_pin_post/ 目前已经有修改后支持置顶的仓库,可以直接用以下命令安装.(cmd 到博客根目录,nmp运行) $ ...
- 给hexo添加评论系统
默认主题 landscape 文件目录,comments为新建的 _config.yml layout -- _partial -- article.ejs |- comments -- disqus ...
随机推荐
- 将QT开发的界面程序封装成DLL，在VC中成功调用（必须有消息循环，所以使用了QTWinmigrate，附CSDN可下载的Demo）
最近手头的一个项目需要做一个QT界面,并且封装成DLL,然后再动态调用DLL给出的接口函数,使封装在DLL内部的QT界面跑起来,在网上查了很多资料,今天终于成功了,经验不敢独享,因为CSDN给了我很多 ...
- string与QString转换（string既可以是utf8，也可以是gbk）
AtUtf8.h #ifndef _QT_UTF8_H #define _QT_UTF8_H #include <QString> #include <string> usin ...
- ubuntu QT开发环境（三种方法安装Qt4.8，其中apt-get方法安装QT库最简单）good
方法一 QT4.8.0库+QT Creator 2.4.1 特别声明:此方法极其耗时间,看电脑性能了.配置configure可减少编译时间 1.下载Qt .进入网址http://qt.nokia.co ...
- 把滚动箱的样式做如下调整来模拟 TPanel
程序中用 TPanel 做了容器, 需要给它一个背景图片; 发现这竟是个难题! 发现我经常使用的滚动箱控件 TScrollBox, 是一个很好的替代品. 本例需要先添加两个图片资源, 添加方法可以参考 ...
- face='Webdings' 的字体对照表
刚才研究动网论坛代码,发现一个页面提示标记 i 感觉很神奇,看了半天才明白原来是一种叫“Webdings”的字体,其实很简单,只需要<font face='webdings' size=&quo ...
- php和JS 判断http还是https，以及获得当前url的方法
$http_type = ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') || (isset($_SERVER['HT ...
- 从零开始的Wordpress个人博客搭建
0x00前言 在博客园写了有一年的博客了,也想换换新口味,wordpress的众多的主题和个性化设置非常符合我的喜好,所以捣鼓了一天也算是把它搭好了. 直接在服务器上搭建wordpress还需要配置m ...
- Spring Cloud全链路追踪实现（Sleuth+Zipkin+RabbitMQ+ES+Kibana）
简介 在微服务架构下存在多个服务之间的相互调用,当某个请求变慢或不可用时,我们如何快速定位服务故障点呢?链路追踪的实现就是为了解决这一问题,本文采用Sleuth+Zipkin+RabbitMQ+ES+ ...
- RestTemplate使用不当引发的问题分析
背景 系统: SpringBoot开发的Web应用: ORM: JPA(Hibernate) 接口功能简述: 根据实体类ID到数据库中查询实体信息,然后使用RestTemplate调用外部系统接口获取 ...
- spring 5.x 系列第14篇 —— 整合RabbitMQ (代码配置方式)
源码Gitub地址:https://github.com/heibaiying/spring-samples-for-all 一.说明 1.1 项目结构说明 本用例关于rabbitmq的整合提供简单消 ...