Hexo搭建博客类别,Next搭建属于本身的博客

By admin in 4858美高梅 on 2019年4月24日

听别人讲此篇博客(点击查阅)
配置出自身的博客阅读量,里面介绍了什么布署开通 leancloud 应用

基于此篇博客(点击查看)
配置出团结的博客阅读量,里面介绍了怎样安顿开通 leancloud 应用

不蒜子总计站点的总访问量,即计算浏览了有点次;有个别许人走访,在footer呈现。
LeanCloud统计单篇博文的阅读量,即计算单篇博文的阅读量是稍微。

前言

煎熬了两日,终于把梦想很久的博客弄上线了,那就犹如上了TV一般激动,所以激动的还要,也记录一下以此
辛劳苦苦的历程,留给本身,援助外人。

自然介绍作者如何布署 yilia 彰显本人的浏览量的.

自然介绍本身哪些布署 yilia 突显本人的浏览量的.

不蒜子配置使用

上面教程针对NexT大旨设置。

找到站点的themes/next/layout/_partials目录下的footer.swig文本。插入代码如下。

{% if theme.copyright %}
<div class="powered-by">
  {{ __('footer.powered', '<a class="theme-link" href="https://hexo.io">Hexo</a>') }}
</div>

<div class="theme-info">
  {{ __('footer.theme') }} -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.{{ theme.scheme }}
  </a>
</div>

# 此位置插入以下代码
<div>
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

本站总访问量  次&nbsp&nbsp&nbsp
本站访客数人次
</div>

{% endif %}

Hexo

Hexo的小编是tommy35一,依据官方介绍,Hexo是三个简约、飞快、庞大的博客公布工具,支持马克down格式

  1. 首先在 yilia 主旨下修改 _config.yml 增多如下配置消息
  1. 首先在 yilia 大旨下修改 _config.yml 增加如下配置音讯

LeanCloud配置利用

不蒜子也得以计算单篇博文的阅读量,可是有多个缺陷:

  1. 在首页不能查看博文的阅读量。
  2. 不能够管理相关博文的阅读量(笔者感到是欠缺)。

故而笔者动用LeanCloud。

安装

打开git

npm install -g hexo

新建Class

据此利用LeanCloud,网址能够采用Github绑定登6,按提醒完结报到。登入后,进入调节台,成立1个新利用。点击存储,按下Logo识新建Class,Class名称必须为Counter。

4858美高梅 1

image

Hexo搭建博客类别,Next搭建属于本身的博客。初始化

在我的Computer中国建工业总集合团立1个名字叫「Hexo」的文件夹,然后在此文件夹中右键张开Git
Bash

hexo init

伊始化完 cd 进你早先化化的目录

# 添加浏览量
leancloud_visitors:
  enable: true
  app_id: ************** 
  app_key: ************

#添加一下js插件的 CDN地址
js_cdn:
  jquery: https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js
  av : //cdn1.lncld.net/static/js/2.5.0/av-min.js
# 添加浏览量
leancloud_visitors:
  enable: true
  app_id: ************** 
  app_key: ************

#添加一下js插件的 CDN地址
js_cdn:
  jquery: https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js
  av : //cdn1.lncld.net/static/js/2.5.0/av-min.js

添加ID和Key

按下Logo志复制 App IDApp Key

4858美高梅 2

image

复制后,更改主题配置文件leancloud_visitors:
。注意将enable设为true

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: true
  app_id: #your App ID
  app_key: #your App Key

变化静态页面

以下命令会在你 init 目录下生成三个public文件夹

hexo generate

假设是第1遍生成,那要施行以下命令实行铲除public文件夹

hexo clean
  1. 找到主旨下 layout\_parial\post 找到 title.ejs
    文件,增加显示阅读量的html代码:
  1. 找到大旨下 layout\_parial\post 找到 title.ejs
    文件,增多呈现阅读量的html代码:

    <% if (post.link){ %>

    <a class="<%= class_name %>" href="<%- url_for(post.link) %>" target="_blank" itemprop="url"><%= post.title %></a>
    

    <% } else if (post.title){ %>
    <% if (index){ %>

    <h1 itemprop="name">
      <a class="<%= class_name %>" href="<%- url_for(post.path) %>"><%= post.title %></a>
    </h1>
    

    <% } else { %>

    <h1 class="<%= class_name %>" itemprop="name">
      <%= post.title %>
    </h1>
    

    <% } %>
    <% } %>
    #下边是 yilia 核心的标题 上面是自个儿要好丰裕的读书量 html 代码
    # span 给的 id 是著作的 url 作为唯一的 key 值
    <% if (theme.leancloud_visitors.enable){ %>


    <% } %>

安装安全域名

正如Logo志设置安全域名:

4858美高梅 3

image

本土运转

hexo server

实行到位后,浏览器输入http://localhost:4000就能够观望效用

3.添加 js 代码, 在layout\_parial 找到 after.footer.ejs
增添如下代码:

总结

完结地点的布局后,运转如下命令一道博客:

$ hexo clean
$ hexo g
$ hexo d

写文章

实践new命令,生成钦命名称的稿子至hexo\source_posts\postName.md

hexo new "postName" #新建文章
<% if (post.link){ %>
  <h1 itemprop="name">
    <a class="<%= class_name %>" href="<%- url_for(post.link) %>" target="_blank" itemprop="url"><%= post.title %></a>
  </h1>
<% } else if (post.title){ %>
  <% if (index){ %>
    <h1 itemprop="name">
      <a class="<%= class_name %>" href="<%- url_for(post.path) %>"><%= post.title %></a>
    </h1>
  <% } else { %>
    <h1 class="<%= class_name %>" itemprop="name">
      <%= post.title %>
    </h1>
  <% } %>
<% } %>
#上面是 yilia 主题的标题 下面是我自己添加的阅读量 html 代码
# span 给的 id 是文章的 url 作为唯一的 key 值
<% if (theme.leancloud_visitors.enable){ %>
  <a href="javascript:;" class="archive-article-date">
      <i class="icon-smile icon"></i> 阅读数:" class="pageViews">0次
  </a>
<% } %>
<script>
    var yiliaConfig = {
        mathjax: <%=theme.mathjax%>,
        isHome: <%=is_home()%>,
        isPost: <%=is_post()%>,
        isArchive: <%=is_archive()%>,
        isTag: <%=is_tag()%>,
        isCategory: <%=is_category()%>,
        open_in_new: <%=theme.open_in_new%>,
        toc_hide_index: <%=theme.toc_hide_index%>,
        root: "<%=config.root%>",
        innerArchive: <%=theme.smart_menu.innerArchive ? true : false%>,
        showTags: <%=(theme.slider && theme.slider.showTags) ? true : false%>
    }
</script>

#上面是 yilia 主题配置自带 下面是我自己添加的js代码
<script src="<%- theme.js_cdn.jquery %>"></script>

<% if (theme.leancloud_visitors.enable){ %>
//这是自定一个js文件,放在 layout\_parial\post 目录 leancloud.ejs中
<%- partial('post/leancloud') %> 
<% } %>

#下面是 yilia 主题配置自带
<%- partial('script') %>

<% if (theme.mathjax){ %>
<%- partial('mathjax') %>
<% } %>

参考资料

  • Hexo搭建GitHub博客(叁)-
    NexT宗旨铺排使用
  • Hexo博客-NexT主题:使用leancloud举行页面访客计算

文摘

在急需出示摘要的地点增多以下代码就可以

以上是摘要
<!--more-->
以下是余下全文

3.添加 js 代码, 在layout\_parial 找到 after.footer.ejs
增多如下代码:

leancloud.ejs 内容:

新建页面

执行new命令,生成钦定名称的文件夹至hexo\source\pageName,并且生成index.md至文件夹

hexo new page "pageName" #新建页面
<script>
    var yiliaConfig = {
        mathjax: <%=theme.mathjax%>,
        isHome: <%=is_home()%>,
        isPost: <%=is_post()%>,
        isArchive: <%=is_archive()%>,
        isTag: <%=is_tag()%>,
        isCategory: <%=is_category()%>,
        open_in_new: <%=theme.open_in_new%>,
        toc_hide_index: <%=theme.toc_hide_index%>,
        root: "<%=config.root%>",
        innerArchive: <%=theme.smart_menu.innerArchive ? true : false%>,
        showTags: <%=(theme.slider && theme.slider.showTags) ? true : false%>
    }
</script>

#上面是 yilia 主题配置自带 下面是我自己添加的js代码
<script src="<%- theme.js_cdn.jquery %>"></script>

<% if (theme.leancloud_visitors.enable){ %>
//这是自定一个js文件,放在 layout\_parial\post 目录 leancloud.ejs中
<%- partial('post/leancloud') %> 
<% } %>

#下面是 yilia 主题配置自带
<%- partial('script') %>

<% if (theme.mathjax){ %>
<%- partial('mathjax') %>
<% } %>
<script src="<%- theme.js_cdn.av %>"></script>
<script type="text/javascript"> 
if(<%- theme.leancloud_visitors.enable %>){
    var leancloud_app_id  = '<%- theme.leancloud_visitors.app_id %>';
    var leancloud_app_key = '<%- theme.leancloud_visitors.app_key %>';

    AV.init({
        appId: leancloud_app_id,
        appKey: leancloud_app_key
    });

    var pageViewsLength = $(".pageViews").length;

    var isIndex = $(".pageViews").length > 1 ?true:false;

    function showTime() {
        var Counter = AV.Object.extend("Counter");
        if(isIndex){
            $(".pageViews").each(function(){
                showPageViewsNum($(this),Counter);
                addPageViewsNum($(this));
            });
        }else{
            showPageViewsNum($(".pageViews"),Counter);
            addPageViewsNum($(".pageViews"));
        }
    }

    //显示阅读量
    function showPageViewsNum(ele,Counter){
        var query = new AV.Query("Counter");
        var url = ele.attr('id').trim();
            query.equalTo("words", url);
            query.count().then(function (number) {
                $(document.getElementById(url)).text(number?  number : '0');
            }, function (error) {
                 $(document.getElementById(url)).text('0');
            });
    }

    //追加阅读量
    function addPageViewsNum(ele){
        var url = ele.attr('id').trim();
        var Counter = AV.Object.extend("Counter");
        var query = new Counter;
        query.save({
            words: url
        }).then(function (object) {});
    }

    if(pageViewsLength){ //此处判断等于 1 在执行 可去除循环
        showTime();
    }
}
</script>

部署Hexo

以下命令建立在已成功塑造了Github远程端的前提下,那里就不一概述了

hexo deloy #部署到Github

leancloud.ejs 内容:

下一场正是如数家珍的 hexo g hexo s 查看,记得要在 leancloud [云浮宗旨]
[Web 安全域名]
设置一个平安域名,一个是正经意况的域名,八个是调养的域名.不然会报错.
预览查看:

常用命令

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #将.deploy目录部署到GitHub

简写

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
<script src="<%- theme.js_cdn.av %>"></script>
<script type="text/javascript"> 
if(<%- theme.leancloud_visitors.enable %>){
    var leancloud_app_id  = '<%- theme.leancloud_visitors.app_id %>';
    var leancloud_app_key = '<%- theme.leancloud_visitors.app_key %>';

    AV.init({
        appId: leancloud_app_id,
        appKey: leancloud_app_key
    });

    var pageViewsLength = $(".pageViews").length;

    var isIndex = $(".pageViews").length > 1 ?true:false;

    function showTime() {
        var Counter = AV.Object.extend("Counter");
        if(isIndex){
            $(".pageViews").each(function(){
                showPageViewsNum($(this),Counter);
                addPageViewsNum($(this));
            });
        }else{
            showPageViewsNum($(".pageViews"),Counter);
            addPageViewsNum($(".pageViews"));
        }
    }

    //显示阅读量
    function showPageViewsNum(ele,Counter){
        var query = new AV.Query("Counter");
        var url = ele.attr('id').trim();
            query.equalTo("words", url);
            query.count().then(function (number) {
                $(document.getElementById(url)).text(number?  number : '0');
            }, function (error) {
                 $(document.getElementById(url)).text('0');
            });
    }

    //追加阅读量
    function addPageViewsNum(ele){
        var url = ele.attr('id').trim();
        var Counter = AV.Object.extend("Counter");
        var query = new Counter;
        query.save({
            words: url
        }).then(function (object) {});
    }

    if(pageViewsLength){ //此处判断等于 1 在执行 可去除循环
        showTime();
    }
}
</script>

主题

搭建hexo时,会给叁个从头的宗旨landscape,不过人各具有好,不是种种人都会喜欢
。所以接纳三个团结喜爱的核心是很重大的,就如穿衣服一样。

接下来便是游刃有余的 hexo g hexo s 查看,记得要在 leancloud [平安为重]
[Web 安全域名]
设置3个安全域名,三个是正规情况的域名,三个是调度的域名.不然会报错.
预览查看:

引入大旨

  • pacman: 大气,最尊崇的是效能齐全

  • yilia: 美观,不过有自然的Bug

  • next: 以往正在采用,加多插件什么的很有利,很欢愉

Next主题

有很完整的学科,那里就做做搬运工了

  • 法定教程

  • 为NexT主旨加上文章阅读量总结功效:
    注意前边要加Web安全那1块才具见效

  • Hexo搭建GitHub博客(三)-
    NexT主旨安插使用:解惑笔者不少难点

域名

对于有所情怀的大家来讲,怎么或者经受一向用着MyName.github.io跻身大家的博客,所以呢?为了看起来更拉风当然要弄个域名了

购进域名

推荐

  • Godaddy:
    究竟是国际大厂商,也支撑支付宝

  • 阿里云:
    帮助国产也是很注重的

DNS服务器

推荐

  • DNSPOO:
    职业DNS服务商

  • 阿里云:
    在Ali云购买的域名,那用他本身的DNS当然最有利于,不用更动

域名与Github

因为自己用的Ali云的,所以以Ali云的秘诀作为参考

一.跻身Ali云主页,点击登入

4858美高梅 4

3

二.登入后,点击万网购买你欢快并且存在的域名

4858美高梅 5

4

叁.购置完毕后,进入管控台

4858美高梅 6

5

4.点击域名,能够见见域名列表,然后在对应的域名处点击管理

4858美高梅 7

6

5.点击页面中的域名解析

4858美高梅 8

9

陆.然后点击解析设置
![10]
[10]:
http://7xrul1.com1.z0.glb.clouddn.com/10.png
“9”
7.点击加多解析加多图中框选的三条解析记录,第一条填写自个儿的github地址
注意:如博客无法登入,有望是github退换了半空中服务的ip地址,记妥帖时到在GitHub
Pages查看最新的ip就可以

4858美高梅 9

11

八.在和睦的Hexo\source目录下创建一个CNAME文件,展开后,里面写入本身的域名地址,如:www.mrzzchao.com
能够不加wwww

最后,这么详细的进度,相信你展开浏览器输入你的域名后,一定会想请笔者喝咖啡的

博客的笔

博客就好像本子同样,而大家须要做的是在他里面留下大家的考虑,印下我们的鞋的印迹,这用如何写他呢?
理所当然是当今最流行的markdown

Markdown

  • markdown简明语法

  • 马克down 语法表明(简体粤语版)

编辑器

  • MarkDownPad2:
    要钱,不过不错

  • Madoko:
    那篇博客正是在那几个瑰异的网站编辑器诞生的

Madoko

要想张开当和姑件夹就要求安装她的条件,展开命令行,运转如下命令(供给安装Node

npm install -g madoko-local

安装达成后,打开命令行在您需求开荒的公文夹运营如下命令(注意前面那么些点)

madoko-local -l .

详细情形点击教程

参考资料

  • Hexo搭建Github静态博客

  • 何以搭建三个独自博客——简明Github
    Pages与Hexo教程

  • hexo你的博客

  • Hexo
    优化与定制(二)

  • 一步步在GitHub上创造博客主页

  • Next主题官方教程

  • 为NexT主旨加上作品阅读量总括成效

  • Hexo搭建GitHub博客(3)-
    NexT大旨安顿利用

  • markdown简明语法

  • 马克down 语法表明(简体粤语版)

  • Madoko

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有