开始

之前在博客园上看到，公告栏里有人竟然在养鱼，觉得很好玩！一直念念不忘的，于是就想着在hexo中也来养几只，因为我用的事Next的Muse主题，所以有一个非常合适的侧边栏，先来看看效果。

点击此处到我的hexo博客

进入正题

首先你要去找几只宠物养一下，领养的网站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&amp;up_fishColor4=0D0C0C&amp;up_fishColor9=F45540&amp;up_fishColor6=F45540&amp;up_fishColor5=F45540&amp;up_fishColor10=F45540&amp;up_foodColor=FCB347&amp;up_fishColor3=080707&amp;up_fishColor7=F45540&amp;up_backgroundImage=/images/finsh.JPG&amp;up_numFish=6&amp;up_fishName=Fish&amp;up_fishColor2=F45540&amp;up_fishColor8=F45540&amp;up_backgroundColor=F0F7FF&amp;" width="200" height="375"><param name="movie" value="https://cdn.abowman.com/widgets/fish/fish.swf?up_fishColor1=F45540&amp;up_fishColor4=0D0C0C&amp;up_fishColor9=F45540&amp;up_fishColor6=F45540&amp;up_fishColor5=F45540&amp;up_fishColor10=F45540&amp;up_foodColor=FCB347&amp;up_fishColor3=080707&amp;up_fishColor7=F45540&amp;up_backgroundImage=http://img.1ppt.com/uploads/allimg/1805/1_180523223723_7.JPG&amp;up_numFish=6&amp;up_fishName=Fish&amp;up_fishColor2=F45540&amp;up_fishColor8=F45540&amp;up_backgroundColor=F0F7FF&amp;"><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添加宠物的更多相关文章

  1. hexo个人博客添加宠物/鼠标点击效果/博客管理

    1.添加宠物 博客宠物模型:https://github.com/xiazeyu/live2d-widget-models 模型对应的动画效果:https://huaji8.top/post/live ...

  2. hexo添加404公益界面

    http://hellolb.top/2018/08/16/hexo添加404公益界面/ hexo个人博客添加404公益界面,这里我使用的腾讯404公益界面 我的博客主题是hexo+yilia,其实所 ...

  3. hexo干货系列：（五）hexo添加站内搜索

    前言 本来想用百度站内搜索,但是没成功,所以改用swiftype,用起来还是很棒的,这里分享一下我的安装步骤 正文 注册 去swiftype官网注册个账号,然后登陆,对了不要去在意30天试用,30天过 ...

  4. Hexo 添加Live2D看板娘

    title: Hexo 添加 Live2D看板娘 二次元什么的最喜欢了[大好きです] 准备 项目地址 live2d模型 部分模型预览 开始 首先进入Hexo博客根目录安装live2d插件 $ npm ...

  5. 接入gitment为hexo添加评论功能

    title: 接入gitment为hexo添加评论功能 toc: false date: 2018-04-16 10:59:56 categories: methods tags: hexo gitm ...

  6. Hexo添加字数统计、阅读时长

    统计插件 配置 NexT 主题默认已经集成了文章[字数统计].[阅读时长]统计功能,如果我们需要使用,只需要在主题配置文件 _config.yml 中打开 wordcount 统计功能即可.如下所示: ...

  7. hexo添加新菜单并实现新菜单的文章归类

    1.添加收藏夹菜单,新建一个页面,命名为 favorite,命令如下: hexo new page favorite ## 然后就可以看到在source下多了一个favorite的文件夹,里面有一个i ...

  8. HEXO添加置顶功能

    使用库:参考 http://wangwlj.com/2018/01/09/blog_pin_post/ 目前已经有修改后支持置顶的仓库,可以直接用以下命令安装.(cmd 到博客根目录,nmp运行) $ ...

  9. 给hexo添加评论系统

    默认主题 landscape 文件目录,comments为新建的 _config.yml layout -- _partial -- article.ejs |- comments -- disqus ...

随机推荐

  1. asp.net mvc实现微信外H5支付方法

    一.微信支付方式介绍 微信提供了各种支付方式,试用于各种不同的支付场景,主要有如下几种: 1.刷卡支付 刷卡支付是用户展示微信钱包内的“刷卡条码/二维码”给商户系统扫描后直接完成支付的模式.主要应用线 ...

  2. 怎么看待php 面向对象思想

    面向对象的程序设计思路是现代程序设计由面向过程演变面向对象的必然趋势,所以面向对象的而设计思路必然有它不同的时代意义,必然有着不同面向过程的不同历史使命,而php 5以后成功添加面向对象的设计思路其实 ...

  3. HTML续

    HTML class属性 定义和用法 class 属性规定元素的类名(classname). class 属性大多数时候用于指向样式表中的类(class).不过,也可以利用它通过 JavaScript ...

  4. VS Code真机测试步骤

    VS Code真机测试步骤 前提:你的电脑跟你的手机是在同一个网络环境下.电脑连手机热点: 1． 在扩展里搜索live server,下载安装: 2． 打开cmd 命令窗口(快捷键是win+r): 输 ...

  5. 【转】Mysql索引最左匹配原则理解

    作者:沈杰 链接:https://www.zhihu.com/question/36996520/answer/93256153来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  6. 一文详解 LVS、Nginx 及 HAProxy 工作原理（ 附大图 ）

    当前大多数的互联网系统都使用了服务器集群技术,集群是将相同服务部署在多台服务器上构成一个集群整体对外提供服务,这些集群可以是 Web 应用服务器集群,也可以是数据库服务器集群,还可以是分布式缓存服务器 ...

  7. C# 设计模式，工厂方法

    C#工厂方法 using System; using System.Collections.Generic; using System.Linq; using System.Text; using S ...

  8. Liunx 安装 Nessus

    Liunx 安装 Nessus   啥子是Nessus 它是一款系统漏洞扫描与分析软件,可以扫描服务器存在哪些漏洞,页面简介美观,非常Nice. 获取激活码 首先访问如下网站 https://www. ...

  9. php中使用trait设计单例

    trait Singleton { private static $instace = null; private function __construct() { } private functio ...

  10. Redis Ubuntu 安装

    1.使用 root 用户登录 Ubuntu  2. wget http://download.redis.io/releases/redis-5.0.3.tar.gz 下载最新的稳定版本到 redis ...