Saturngod

What's on my mind

Custom Wintersmith Helper

Today , I was trying to add twitter card in my blog. It have a problem for twitter card description. Wintersmith didn’t support plain text for blog post. Blog intro already using the HTML code. So, I need to remove.

So, I create the custom helper like following.

Create a wintersmith-custom-helper folder under node_modules

In the wintersmith-custom-helper , it have 2 file. index.js and package.json .

In the package.json

{
  "name": "wintersmith-customhelper",
  "version": "1.0.0",
  "description": "Custom Helper For My Blog",
  "author": "saturngod",
  "license": "MIT",
  "keywords": [
    "wintersmith",
    "wintersmith-custom-helper"
  ],
  "main": "index.js",
  "dependencies": {
  },
  "devDependencies": {
    "vows": "0.7.x",
    "wintersmith": "2.x"
  },
  "peerDependencies": {
    "wintersmith": "2.x"
  }
}

I gave the module name is wintersmith-customhelper.

In the index.html

module.exports = function(env, callback) {
  env.helpers.getDescription = function(htmlcode) {
    var code;
    code = htmlcode.replace(/(<([^>]+)>)/g, "");
    code = code.substring(0, 255);
    code = code.replace("\n", " ");
    code = code.replace("\"", "");
    return code = code + " ... ";
  };
  return callback();
};

I create the getDescription helper for description.

After finish that, need to update the config.json

In the config.json , we need to put the plugin. So, it will be like

"plugins": [
    "wintersmith-tag",
    "./node_modules/wintersmith-custom-helper"
  ],

Done. So, we can call env.helpers.getDescription in our template.

- var plain = env.helpers.getDescription(page.intro)
meta(name='twitter:description', content="#{plain}")

It easy to create helper and you can also use .coffce instead of .js file for plugin.

Fixed Disqus For WinterSmit

I am using disqus for my blog. However, it has a problem. If the URL is include query string , comments can’t show and it’s showing new one. I found a solution JavaScript configuration variables of disqus.

We need to put correct URL at disqus_url variable. So, I put

var disqus_url = document.location.origin + document.location.pathname;

For jade template , it will look like

#disqus_thread
  script(type='text/javascript')
      |/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
      |var disqus_shortname = 'myblogname'; // required: replace example with your forum shortname
      |var disqus_url = document.location.origin + document.location.pathname;
      |/* * * DON'T EDIT BELOW THIS LINE * * */
      |(function() {
      |var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
      |dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
      |(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
      |})();
    noscript
      | Please enable JavaScript to view the
      a(href='http://disqus.com/?ref_noscript') comments powered by Disqus.
    a.dsq-brlink(href='http://disqus.com')
      | comments powered by
      span.logo-disqus Disqus

After that , there is no more problem about query string URL problem.