服务器搭建教程

Hexo博客第三方主题next进阶教程

2018-07-29  本文已影响1792人  MaLizhi

注意点:


当前所在菜单下划线显示

效果图:


image
<script>
    
    window.onload = function(){
        var path = 'https://malizhi.cn'; //这里要改成你博客的地址
        var localhostItem = String(window.location).split(path)[1];
        var LiNode = document.querySelectorAll('#menu > li > a')
        
        for(var i = 0; i< LiNode.length;i++){
            var item = String(LiNode[i].href).split(path)[1];
            if(item == localhostItem && item != undefined){
                LiNode[i].setAttribute('style','border-bottom:1px solid black');
            }
        }
    };

</script>

统计站点的总访问量,即统计浏览了多少次;有多少人访问,在footer显示

<!-- 新增访客统计代码 -->

<div class="busuanzi-count">
    <script async="" src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="site-uv">
      <i class="fa fa-user"></i>
      访问用户: <span class="busuanzi-value" id="busuanzi_value_site_uv"></span> 人
    </span>
    <div class="powered-by"></div>
    <span class="site-uv">
      <i class="fa fa-eye"></i>
      访问次数: <span class="busuanzi-value" id="busuanzi_value_site_pv"></span> 次
    </span>
    <!-- 博客字数统计 -->
    <span class="site-pv">
      <i class="fa fa-pencil"></i>
      博客全站共: <span class="post-count">{{ totalcount(site) }}</span> 字
    </span>
</div>
<!-- 新增访客统计代码 END-->

效果如下:


Alt text

关于博客获取文章阅读数量或者评论消息时获取失败这种情况不用担心,有时候所处的网络是机房或者一些有限制访问leancloud的网络会造成访问不了leancloud,可以换一个网络试试。


如何让百度收录自己的bolg

        ---
        layout: false
        ---
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
# 自动生成sitemap
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml
# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true
{% if theme.baidu_push %}
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
{% endif %}

这样子的话每次访问博客中的页面会自动向百度提交。


如何把www.xxx.cn xxx.cn 转换成https://xxx.cn

rewrite ^(.*) https://xxx.cn$1 permanent;   #重定向https访问

如何把https://www.xxx.cn 转成https://xxx.cn

server {
        listen 443;
        server_name www.xxx.cn;
        rewrite ^(.*) https://xxx.cn$1 permanent;   #重定向https访问
    }
   server {
        listen 443 default_server ssl;

在底部增加运行时间

<!-- 在网页底部添加网站运行时间 -->
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("07/21/2018 00:00: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("timeDate").innerHTML = "Run for "+dnum+" Days ";
        document.getElementById("times").innerHTML = hnum + " Hours " + mnum + " m " + snum + " s";
    }
setInterval("createtime()",250);
</script>

效果如下:


Alt text

底部跳动图标实现

//底部爱心小图标跳动
keyframes heartAnimate {
    0%,100%{transform:scale(1);}
    10%,30%{transform:scale(0.9);}
    20%,40%,60%,80%{transform:scale(1.1);}
    50%,70%{transform:scale(1.1);}
}

//图标所对应的span中的ID
#heart {
    animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {
    color: rgb(255, 113, 113);
}

文章加密,对应的插件文档可以参考

https://github.com/MikeCoder/hexo-blog-encrypt/blob/master/ReadMe.md

 "hexo-blog-encrypt": "2.0.*"
# Security
encrypt:
    enable: true
---
title: testPass
date: 2018-07-26 00:00:00
password: 123456
abstract: 这是一篇加密的文章。
message: enter password to read.
---

文章置顶:

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义,那么将有top的排在前面
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};
<div class="post-meta">
          {% if post.top==100 %}
            <i class="fa fa-thumb-tack"></i>
            <font color=808080>置顶</font>
            <span class="post-meta-divider">|</span>
          {% endif %}
     ......
效果: Alt text

减少背景线条(默认线条数可以看官方插件)

https://github.com/hustcc/canvas-nest.js


在头部菜单中,显示有多少篇数

.......
{{ __('menu.' + name) | replace('menu.', '') }}
.......

效果:


image

添加文章阴影

 // Custom styles.
// 主页文章添加阴影效果
 .post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }

效果图:


image

修改网页加载进度条颜色


底部小心心增加点击动画功能

...
{% include '_components/algolia-search/assets.swig' %}
  <script type="text/javascript" src="/js/src/hexo-next-bottomheart.js"></script>
</body>
</html>
<span itemprop="copyrightYear">{{ current }}</span>
<span class="with-love">
  <i class="fa fa-{{ theme.authoricon }}"></i>
</span>
<span class="author" itemprop="copyrightHolder">{{ config.author }}</span>

line5处,修改line 5为

<div id="bottomheart" style="cursor:pointer;"><i class="fa fa-{{ theme.authoricon }}"></i></div>

这时候,重新部署你的博客,就可以疯狂点击小心心啦

效果: Alt text

相册功能

效果图:


image

因为篇幅较长,另起一篇文章说明,文章地址:https://malizhi.cn/HexoAlbum/


如何利用 Gulp 来压缩你的 Hexo 博客的静态文件( html / css / js ),达到提高访问速度的目的

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var babel = require('gulp-babel');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');

gulp.task('minify-css', function () {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});

gulp.task('minify-html', function () {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))

.pipe(gulp.dest('./public'))
});

gulp.task('minify-js', function () {
return gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
.pipe(babel({ presets: ['es2015'] }))
.pipe(uglify())
.pipe(gulp.dest('./public'));
});

gulp.task('default', ['minify-html', 'minify-css', 'minify-js']);   
image

建议与帮助

有小伙帮有好的建议或者其他问题可以及时联系我

上一篇下一篇

猜你喜欢

热点阅读