如何让自己的部落格变成功能性更强的系统

如果仅仅依靠框架的基本功能,是很难满足博主自己对部落格各种挑剔的需求.通过自己的动手实践去不断完善,也是对自己能力实践的最好体现.

知心天气

一个偶然的机会在查找资料的时候发现别人的博客上有个显示天气的插件还蛮好看的,下意识的想把这个知心天气移植到自己的博客上.

安装

注册账号

先到官网知心天气注册一个账号.

所见即所得

找到知心插件页面,页面将根据用户需求生成相应的代码

插件配置

生成的知心插件代码分成两部分:源码的获取与配置.

将源码的获取单独放在一个javascript文件中,在head文件中引用.

将源码部分统一放在同一文件夹下方便管理,比如 source/js/tpwidget.js

配置文件部分放在after-footer中源码文件引用的底下.源码如下,仅供参考:

<% if (theme.tpwidget.on){ %>
  <script src="/js/tpwidget.js"></script>
    <script>
    tpwidget('init', {
        "flavor": "bubble",
        "location": "WS7GQBRNR6V8",
        "geolocation": "enabled",
        "position": "bottom-right",
        "margin": "60px 10px",
        "language": "auto",
        "unit": "c",
        "theme": "chameleon",
        "uid": "",
        "hash": ""
    });
    tpwidget('show');
    </script>
<% } %>

作为插件一般都很灵活,在主配置文件中设置开关.源码如下,仅供参考:

1 2	tpwidget: on: true

问题

1.最近不知道为什么,发现这个插件无法正确显示天气,显示的是”无效请求”;百思不得其解,希望下次能解决掉它.

毋庸置疑的是,发生这个问题的根源肯定是配置文件验证失败出错了.直接将知心天气后台的配置代码和自己的逐一比对,发现执行天气插件更新了验证逻辑,插件的位置参数也加入验证哈希值中了.在知心天气后台直接调整插件的位置,重新获取相应的参数可解决该问题.

标签云

标签云的设计本身已经很完善了,在借鉴了某博客的文章之后突发奇想,新增了插件TagCanvas,继而对标签云在效果上做了完善.从展示效果上看,该插件实际上就是将文章的所有标签转成立体化标签,随着鼠标的拖动而变化.

安装

下载插件脚本

先到官方TagCanvas下载脚本.根据自身的要求是否依赖jquery来选择不同的脚本.

安装与配置

TagCanvas插件代码分成两部分:源码的安装与配置.

将源码的获取单独放在一个javascript文件中,在head文件中引用.

将源码部分统一放在同一文件夹下方便管理,比如 source/js/tagcanvas.js

配置文件部分放在after-footer中源码文件引用的底下.源码如下,仅供参考:

为在页面显示TagCanvas效果,需要增加html5容器.源码如下:

<div class="tags" id="myTags">
 <canvas width="350" height="350" id="my3DTags">
    <p>Anything in here will be replaced on browsers that support the canvas element</p>
</canvas>
</div>
<div class="tags" id="tags" style="display:none">
    <%- tagcloud({
        min_font: 16,
        max_font: 35,
        amount: 999,
        color: true,
        start_color: 'blue',
        end_color: 'red',
    }) %>
</div>
<p class="count"></p>

本文采用的my3DTags形式,考虑到TagCanvas的渲染问题,有时候无法正确显示.为了界面显示更加友好,增加异常捕获,处理如下:

若渲染正常,将如实的在页面展示出来,将原有的标签云隐藏掉;
若未能正常渲染,需要将canvas隐藏掉,显示原有的标签云;

TagCanvas具体的配置文件如下:

<script type="text/javascript">
  window.onload = function() {
    try {
      TagCanvas.Start('my3DTags','tags',{
        textFont: 'Georgia,Optima',
        textColour: null,
        outlineColour: '#ff00ff',
        weight: true,
        reverse: true,
        depth: 0.8,
        maxSpeed: 0.05,
        bgRadius: 1,
        freezeDecel: true
      });
      $("#tags").css('display', 'none');
    } catch(e) {
      // something went wrong, hide the canvas container
      $("#myTags").css('display','none');
      $("#tags").css('display', 'block');
    }
  };
</script>

标签与分类的统计

为了更加直观的查看博主文章的标签和分类的数量,在标签云中增加了相关的统计.虽然功能表现上是一致的,但可能与别人的配置形式有所出入.

维持插件本身的完整性,尽量不修改源码.
引入了其他的插件,比如pjax的引入使得页面的切换实现局部刷新,同时页面原先的事件需要重新加载.详情可参看如何实现页面之间的切换不刷新.

<!-- Count tags and categories -->
<p id="count">
        <%= __('tag_cloud.already') %><span id="category_num"></span><%= __('tag_cloud.categories') %>
        <%= __('tag_cloud.total') %><span id="tag_num"></span><%= __('tag_cloud.tags') %>
</p>
<script>
  $('#category_num').text($(".category-list-item").length);
  $('#tag_num').text($("#tags > a").length);
  $('#count').appendTo('.count');
</script>

放慢了步伐,只为跑得更远~