Configure the Blog

Welcome to My Blog. This is my very first post. I hope that I can help someone.

Blog Initailization

My Blog is based on the Hexo, thanks to the Github Pages.
To beautify my blog, I use the theme: next and modify some settings.
We need to use git clone https://github.com/theme-next/hexo-theme-next themes/next to install.
After the Installation, I modify the Personal Information and other configurations according to Instructions.

Personalization

I add ‘Blog Life’, ‘Visitor number’ and ‘Personal Information’.
The key is to modify the _config.yml of Next and Hexo.
And with the help of js codes, we can add some interesting functions.

Create the files
Files are stored in ./source/: hexo new page “about”.
We can create a markdown file in ./source/about and modify it. Btw, blog articles are in ./source/_posts.
I add my CV in the about menu.

Remember to modify the Next config of ‘menu’.

menu:
  home: / || home   
  about: /about/ || user  
  tags: /tags/ || tags   
  categories: /categories/ || th 
  archives: /archives/ || archive  
  #schedule: /schedule/ || calendar  
  #sitemap: /sitemap.xml || sitemap   
  #commonweal: /404/ || heartbeat   

avatar:
  # in theme directory(source/images): /images/avatar.gif
  # in site  directory(source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
   - url: /images/avatar.gif
   + url: /images/header.jpg     # Picture link
  # If true, the avatar would be dispalyed in circle. 
  rounded: false
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1
  # If true, the avatar would be rotated with the cursor.
  rotated: false

Search

To enable search function, run: npm install hexo-generator-searchdb –save

Modify Hexo config of ‘search’.

search:  # add the search function
  path: search.xml
  field: post
  format: html
  limit: 10000

RSS

Install the plugin, run: npm install –save hexo-generator-feed

Modify the Hexo and Next config.

# In Hexo
plugins: hexo-generate-feed

# In Next
rss: /atom.xml

Count

Install the plugin, run: npm install hexo-symbols-count-time –save

Modify the Hexo config and Next.

# In Hexo
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true

# In Next
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

Run time

Modify /blog/themes/next/layout/_partials/footer.swig, add the codes:

<div id="days"></div>
<script>
function show_date_time(){
    window.setTimeout("show_date_time()", 1000);
    BirthDay=new Date("04/17/2018 15:13:14");//修改为自己的blog建站时间
    today=new Date();
    timeold=(today.getTime()-BirthDay.getTime());
    sectimeold=timeold/1000
    secondsold=Math.floor(sectimeold);
    msPerDay=24*60*60*1000
    e_daysold=timeold/msPerDay
    daysold=Math.floor(e_daysold);
    e_hrsold=(e_daysold-daysold)*24;
    hrsold=setzero(Math.floor(e_hrsold));
    e_minsold=(e_hrsold-hrsold)*60;
    minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
    seconds=setzero(Math.floor((e_minsold-minsold)*60));
    document.getElementById('days').innerHTML="本站已安全运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
}
function setzero(i){
    if (i<10)
    {i="0" + i};
    return i;
}
show_date_time();
</script>

In the markdown files, we can add the js codes. For example, with girlfriend.

<div id="withGirlFriend"></div>
<script type="text/javascript">
var now = new Date();
    function createtime() {
        var grt= new Date("10/18/2016 22:30:00");
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("withGirlFriend").innerHTML = "和女友在一起"+dnum+" 天 " + hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
    }
setInterval("createtime()",250);
</script>

Blogs