Blog 2.0 Update : Footnotes, Pdfs, Images and Captions in Hexo

As a jobless PM who knows little about html, CSS and JavaScript, After 4-day hardworking, blog 2.0 is finally completed delivery. Just forced myself becomming a half front-end engineer.

Footnote

npm install hexo-reference --save

Run it in the command shell. That’s all.

Complicated footnote is my personal writhing style. I always use the quality of footnote to judge the quality of a new book. At least be a writer whom you like personally.

PDF

1st Try : hexo-pdf

Actually, there is a plug-in in Hexo called hexo-pdf. However, it is toooooooo ugly. Much more weird, if you adjust it’s source code, changing “ height “ from fixed 550px to 100% which is the same as “ width “ value. It will always be only 50 px displayed !

1ST TRY FAILED

2nd Try : pdf.js

pdf.js is a great open-source project by Mozilla. As it said in homepage

A general-purpose, web standards-based platform for parsing and rendering PDFs.

However, it is very difficult to embed it into Hexo since command hexo d only uploads Hexo’s own file to the server.

2ND TRY FAILED

3rd Try : A workaround

There is a saying in Engineering:

A clearly defined problem was half solved already

In more clearly definition, the pdf problem can be separate into two parts - displaying a whole pdf file after clicking “ resume “ button and and display pdf pages in the posts. Actually, it is two totally different problems. “ There is a separate html page for resume, meanwhile other pdf in posts have to fit themselves into theme config.

The final solution as following :

• For Resume Page

Just set the main conifg file in themes.

menu:
  Résumé: /Resume2017.pdf

Please note that SUFFIX IS PDF NOT HTML. This config directly call browser to render pdf and make download easier.

• For PDFs in post

Just convert PDFs into images and then embed it into post. XD

3RD TRY SUCCEDED

Image

There are bugs on hexo. The syntax of images of Markdown will cause some unexpected result in some unexpected behavior after compiling. Official solution provided as following.

In main config file make sure

post_asset_folder: true

Hexo will then generate post’s corresponding asset folder. But syntax of images becomes

{% asset_img slug [title] %}

However, comparing with original syntax, it’s too redundant and breaks WYSIWYG^[1] law in Markdown editing. Fortunately, there is a plug-in to solve this, just run

npm install hexo-asset-image --save

And then you can continuing use favorite  syntax to deal with image.

The only problem needs to pay attention is that put the source file in the asset folder during editing and then put it out before compiling.

Image Caption

There is a plug-in with really ugly display.

npm install hexo-asset-image --save

The following is copied from plug-in’s documentation

image_caption:
  enable: true #false to disable
  class_name: #if you wanna customize the style for the caption, you can assign a class name, default is 'image-caption'

You can customize your own style. But where to set the class, the author provided nothing about it. ^[2] The following solution seems easy. In fact, solving this problem have really forced myself becoming a half front-end engineer with about a whole day.

section.main
  .post
    .content
    .........
    .imgTitle
        text-align: center;
        display: block;
        text-weight: bold
        margin-top 1em
        margin-down 1em 

Add the following code in the corresponding styl file as shown above. and then set “ class_name “ as imgTitle.

Say a few words, styl is a simplified and modified CSS, which have removed all colons, semi-colons, commas and braces in CSS. Here is documentation.

Have a look at the output html, you will see the following in the corresponding area

<span class="imgTitle"> imgName </span>

Which means imgTitle class has been correctly resolved.

Modifying Themes

There are some configs on the original alpha-dust theme do not suit my requirement, especially the footer.

I have done lots of modification on the theme, using “ Recent Post” as example.

/*01*/ <% if (site.posts.length){ %>
/*02*/     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 recent-posts">
/*03*/         <h2><%- __('recent_posts') %></h2>
/*04*/         <ul>
/*05*/             <% site.posts.sort('date', -1).limit(10).each(function(post){ %>
/*06*/             <li>
/*07*/                 <a class="footer-post" href="<%- url_for(post.path) %>"><%= (post.title || theme.default_post_title || __('default_post_title')).substring(0, 50) %></a>
/*08*/             </li>
/*09*/             <% }) %>
/*10*/         </ul>
/*11*/     </div>
/*12*/ <% } %>

• Modifying line 02 to adjust display frame in different platform, see reference here.

• Modifying Line 05 to add more items in “ Resent Post “

• Modifying line 07 to add characters in title display

Documentation of ejs file is here

Blog 3.0 Outlook

• Adjust icon from default cube to the seal somebody gives me

• Directly using <www.notlsd.com> instead of redirection to <notlsd.github.io> This a huge task due to the deployment of server.

• Add the independent category page ^[3]

• Add some statistics ^[4]

• Add Zhihu icon on footer