添加伪春菜

在浏览别人的博客的时候偶然间看到伪春菜，萌萌的一只，还可以调戏，正好想要搭建自己的个人主页，于是就决定也要去捉一只。然后在最新通用版伪春菜下载找到了网页版的。但是这个是Word Press的插件，而且需要配置后台。我既然选了用Github Page搭建个人主页，那么就只能自己动手修改，弄个静态页面的伪春菜，虽然功能上可能会差点，但后期可以慢慢完善。

下载伪春菜UTF8版

下载链接

解压

发现其实东西不多，有用的几个文件及文件夹如下：

imgs : 对话框的图片
skin : 皮肤或者称外貌，有三款，也可以自己添加，命名为face1.gif，face2.gif，face3.gif
css/style.css : 样式，有些需要调整
js/common.js : 核心程序

开始搬运

• 进入next主题的source文件夹下
• 复制imgs文件夹下的图片到images目录下
• 复制skins文件夹下的文件夹到images目录下
• 复制style.css到css目录下，并修改图片的url指向
• 复制common.js到lib/weichuncai/目录下，重命名为weichuncai.js
• 修改weichuncai.js，去除后台相关的代码，并增加手机端触摸拖动的功能，具体参考weichuncai.js
• 进入../layout文件夹

• 添加css，修改_partials/head.swig文件,添加下面的代码：

  {% if theme.weichuncai %}
      <link href="{{ url_for(theme.css) }}/weichuncai.css?v={{ theme.version }}" rel="stylesheet" type="text/css" />
  {% endif %}

• 添加js，修改_scripts/vendors.swig，添加下面的代码：

  {% if theme.weichuncai %}
    {% set js_vendors.weichuncai  = 'weichuncai/weichuncai.js?v=1.0.1' %}
  {% endif %}

• 添加伪春菜到页面，修改_layout.swig,添加下面的代码到body标签中：

  {% if theme.weichuncai %}
  <script>
  var imagewidth = "85";
  var imageheight = "152";
  createFace("/images/rakutori/face1.gif", "/images/rakutori/face2.gif", "/images/rakutori/face3.gif");
  </script>
  {% endif %}

• 最后修改主题下面的_config.yml，用于控制伪春菜的开启与否，添加：

  # weichuncai
  weichuncai: true

OK，到这里伪春菜就添加好了，重新hexo s -g就能看到效果了，之后更多的功能还要修改weichuncai.js，代码很简单，完全可以自己改。我也会时不时地进行更新。

感谢

最后还是要感谢最初作者的开源代码,以及皮肤的画师。