开始

之前在博客园上看到,公告栏里有人竟然在养鱼,觉得很好玩!一直念念不忘的,于是就想着在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. c#透明panel

    先看下效果 纯透明的pane,然后设置一个半透明的图片,可以看出来显示了父控件的button 看代码 public partial class PanelEx : Panel { protected ...

  2. QT 强制杀死进程

    bool KillProcess(QString ProcessName){  bool result = false; QString str1; HANDLE hSnapShot = Create ...

  3. C++与QML混合编程实现2048

    http://blog.csdn.net/ieearth/article/details/42705305

  4. Python print不换行输出的替代方法

    Python的不换行输出好蛋疼,查了半天书没查到... python中print默认是换行的.想让它不换行,网上说可以在print后面加上逗号.如:print 'aaa',这个方法行的通,但是中间多了 ...

  5. Laravel中我们登录服务器通过 Tinker 手动创建后台管理用户

    Laravel中我们可以登录到服务器通过 Tinker 手动创建后台用户 laravel中tinker命令的作用是用来调试laravel,可以打印变量或对象信息,显示函数代码,对数据库写入和查询数据. ...

  6. 在centos7上安装Docker CE

    Docker CE的基本安装 https://docs.docker.com/engine/installation/linux/docker-ce/centos/ 一.系统要求 1.安装Docker ...

  7. Spring Boot 集成配置 HTTPS

    这是泥瓦匠的第108篇原创 文章工程: * JDK 1.8 * Maven 3.5.2 * Spring Boot 1.5.9.RELEASE ## 一.HTTPS 是什么 问:什么是HTTP? 答: ...

  8. Web框架之Django重要组件(Django中间件、csrf跨站请求伪造)

    Web框架之Django_09 重要组件(Django中间件.csrf跨站请求伪造)   摘要 Django中间件 csrf跨站请求伪造 一.Django中间件: 什么是中间件? 官方的说法:中间件是 ...

  9. 【设计模式】行为型07备忘录模式(Memento Pattern)

    参考地址:http://www.runoob.com/design-pattern/memento-pattern.html 对原文总结调整,以及修改代码以更清晰的展示: 备忘录模式(快照模式):   ...

  10. docker开启2376端口CA认证及IDEA中一键部署docker项目

    嘿,大家好,今天更新的内容是docker开启2376端口CA认证及IDEA中一键部署docker项目... 先看效果 我们可以通过idea一键部署docker项目,还以通过idea的控制台实时查看容器 ...