Hexo博客新建文章并发布


阅读数: 次   
如需转载，请根据 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 许可，附上本文作者及链接。
本文作者： 执笔成念
作者昵称： zbcn
本文链接： https://1363653611.github.io/zbcn.github.io/2019/12/05/hexo_createBlog_01/

基于Hexo+Github 搭建个人博客

node.js

环境安装
  1. 下载地址 :https://nodejs.org/zh-cn/download/
    • 这里选择 windows64位.msi格式安装包
  2. 安装 hexo npm i -g hexo-cli

安装 yilia 主题的坑

  1. 头像设置

    • 在 source\assets\image 添加图片
    • 在 themes\yilia\_config.yml 配置头像 和favicon：
      1
      favicon: /zbcn.github.io/assets/image/favicon.ico
      2
      #你的头像url
      3
      avatar: /zbcn.github.io/assets/image/head.jpg
      notify: 根目录下的url 配置为博客地址:https://1363653611.github.io/zbcn.github.io, 要配置 zbcn.github.io,否则会引发一堆问题

  2. 点击 所有文章/友联/关于我 出现 habout:blank#blocked页面

    • 解决方案:
      1. 找到 themes\yilia\layout\_partial\left-col.ejs 文件
      2. 找到 <nav class="header-smart-menu"> 标签
      3. 个里面的a标签，加上一个 target="_parent" 标签,修改后的标签是
        1
          <nav class="header-smart-menu">
        2
          		<% for (var i in theme.smart_menu){ %>
        3
          			<% if(theme.smart_menu[i]){ %>
        4
          			<a q-on="click: openSlider(e, '<%-i%>')" href="javascript:void(0)" target="_parent"><%= theme.smart_menu[i] %></a>
        5
          			<% } %>
        6
                  <%}%>
        7
        </nav>

  3. 添加 访问量统计1(效果不是很好)

    • 添加本站总访问量(引入不蒜子):(pv的方式，单个用户连续点击n篇文章，记录n次访问量。)
      在 themes/yilia/layout/_partial/footer.ejs 的末尾 添加

      1
      <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
      2
      <span id="busuanzi_container_site_pv">
      3
          本站总访问量<span id="busuanzi_value_site_pv"></span>次
      4
      </span>

    • 本站访客数:

      1
      //uv的方式，单个用户连续点击n篇文章，只记录1次访客数。  
      2
      <span id="busuanzi_container_site_uv">
      3
        本站访客数<span id="busuanzi_value_site_uv"></span>人次
      4
      </span>

    在 themes/yilia/layout/_partial/article.ejs下添加

    1
    2
    <% if (!index){ %>
    3
      <span id="busuanzi_container_page_pv">
    4
        ⋉(●本文总阅读量 <span id="busuanzi_value_page_pv"></span> 次●)⋊
    5
      </span>
    6
    <% } %>

  4. 访问量统计2:

网站访问量显示：

  • 我使用了不蒜子第三方的统计插件，网址：http://ibruce.info/2015/04/04/busuanzi/
  • 在themes\yilia\layout\_partial下的footer.ejs中加入如下代码即可
    1
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
    2
    </script>
    3
    <span id="busuanzi_container_site_pv">
    4
      本站总访问量<span id="busuanzi_value_site_pv"></span>次
    5
    </span>
    6
    <span id="busuanzi_container_site_uv">
    7
    总访客数<span id="busuanzi_value_site_uv"></span>人次
    8
    </span>
    实现单篇文章浏览统计和评论统计
  • 评论数的统计是网易云跟帖中获取的，下面给出
  • 修改themes\yilia\layout\_partial文件夹下的article.ejs文件
  • 在<%- partial('post/title', {class_name: 'article-title'}) %>节点下加入：
    • 注意这里网易云跟帖还没设置，而评论数中使用到了，这里运行会有问题，下面给出
      1
      <!-- 显示阅读和评论数 -->
      2
        <% if (!index && post.comments && config.wangYi){ %>
      3
        <br/>
      4
        <a class="cloud-tie-join-count" href="javascript:void(0);"target="_parent" style="color:gray;font-size:14px;">
      5
        <span class="icon-sort"></span>
      6
        <span id="busuanzi_container_page_pv" style="color:#ef7522;font-size:14px;">
      7
                  阅读数: <span id="busuanzi_value_page_pv"></span>次 &nbsp;&nbsp;
      8
        </span>
      9
        </a>
      10
        <a class="cloud-tie-join-count" href="javascript:void(0);" target="_parent" style="color:#ef7522;font-size:14px;">
      11
        	<span class="icon-comment"></span>
      12
        	<span class="join-text" style="color:#ef7522;font-size:14px;">评论数:</span>
      13
        	<span class="join-count">0</span>次
      14
        </a>
      15
        <% } %>

      实现网易云跟帖评论

    • 注册账号：https://gentie.163.com/info.html

配置置顶文章

  • 安装插件
    1
    npm uninstall hexo-generator-index --save
    2
    npm install hexo-generator-index-pin-top --save
  • 配置置顶标准
    • 打开：/themes/*/layout（/_macro）/post.ejs
    • 直接在最前面加入以下代码即可
      1
      <% if (page.top) { %>
      2
        <i class="fa fa-thumb-tack"></i>
      3
        <font color=7D26CD>置顶</font>
      4
        <span class="post-meta-divider">|</span>
      5
      <% } %>
  • 配置文章
    然后在需要置顶的文章的Front-matter中加上top选项即可
    top后面的数字越大，优先级越高
    1
    title: 2019
    2
    date: 2019-02-14 16:10:03
    3
    top: 5
  • 优先级配置
    修改根目录配置文件/_config.yml,top值-1标示根据top值倒序（正序设置为1即可），同样date也是根据创建日期倒序。

Hexo 实现私密文章加密

1
cd /Hexo
2
npm install hexo-blog-encrypt
3
4
vim /Hexo/_config.yml  添加如下内容
5
6
# Security
7
## 文章加密 hexo-blog-encrypt
8
encrypt:
9
    enable: true
10
11
然后在想加密的文章头部添加上对应字段，如
12
13
---
14
title: hello world
15
date: 2016-03-30 21:18:02   
16
tags:       
17
password: 12345   （密码）
18
abstract: Welcome to my blog, enter password to read.
19
message: Welcome to my blog, enter password to read.     
20
---
21
22
password: 是该博客加密使用的密码
23
abstract: 是该博客的摘要，会显示在博客的列表页
24
message: 这个是博客查看时，密码输入框上面的描述性文字

增加版权声明

  • 配置yilia

    • 位置 themes/yilia/layout/_partial/article.ejs
    • 中标注的位置添加代码
      1
      <div class="article-entry" itemprop="articleBody">
      2
      <% if (post.excerpt && index){ %>
      3
        <%- post.excerpt %>
      4
        <% if (theme.excerpt_link) { %>
      5
          <a class="article-more-a" href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %> >></a>
      6
        <% } %>
      7
      <% } else { %>
      8
        <%- post.content %>
      9
      <% } %>
      10
      <-- 在此处添加代码-->
      11
      <% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %>
      12
      <div class="page-reward">
      13
        <a href="javascript:;" class="page-reward-btn tooltip-top">
      14
        <div class="tooltip tooltip-east">
    • 添加的代码如下
    1
    <!-- 增加版权声明 -->
    2
    <%
    3
      var sUrl = url.replace(/index\.html$/, '');
    4
      sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'https:' + sUrl;
    5
    %>
    6
    <% if ((theme.declare_type === 2 || (theme.declare_type === 1 && post.declare)) && !index){ %>
    7
      <div class="declare">
    8
        <strong>本文作者：</strong>
    9
        <% if(config.author != undefined){ %>
    10
          <%= config.author%>
    11
        <% }else{%>
    12
          <font color="red">请在博客根目录“_config.yml”中填入正确的“author”</font>
    13
        <%}%>
    14
        <br>
    15
        <strong>本文链接：</strong>
    16
        <a rel="license" href="<%=sUrl%>"><%=sUrl%></a>
    17
        <br>
    18
        <strong>版权声明：</strong>
    19
        本作品采用
    20
        <a rel="license" href="<%= theme.licensee_url%>"><%= theme.licensee_name%></a>
    21
        进行许可。转载请注明出处！
    22
        <% if(theme.licensee_img != undefined){ %>
    23
          <br>
    24
          <a rel="license" href="<%= theme.licensee_url%>"><img alt="知识共享许可协议" style="border-width:0" src="<%= theme.licensee_img%>"/></a>
    25
        <% } %>
    26
      </div>
    27
    <% } else {%>
    28
      <div class="declare" hidden="hidden"></div>
    29
    <% } %>

    • 创建新文件 themes/yilia/source-src/css/declare.scss

    • 并添加如下CSS代码。

      1
      .declare {
      2
        background-color: #eaeaea;
      3
        margin-top: 2em;
      4
        border-left: 3px solid #ff1700;
      5
        padding: .5em 1em;
      6
      }

    • 为 themes/yilia/source-src/css/main.scss 添加 @import "./declare";

  • 配置显示

    • 修改为 themes/yilia/_config.yml
      添加:
      1
      版权基础设定：0-关闭声明； 1-文章对应的md文件里有declare: true属性，才有版权声明； 2-所有文章均有版权声明
      2
      #当前应用的版权协议地址。
      3
      #版权协议的名称
      4
      #版权协议的Logo
      5
      declare_type: 1
      6
      licensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
      7
      licensee_name: '知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议'
      8
      licensee_img: https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png
    • 然后在需要进行版权声明的文章的md文件头部，设置属性 declare:true

在左侧显示总文章数

将themes\yilia\layout_partial\left-col.ejs文中的

1
<nav class="header-menu">
2
    <ul>
3
    <% for (var i in theme.menu){ %>
4
        <li><a href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li>
5
    <%}%>
6
    </ul>
7
</nav>

后面加上

1
<nav>
2
    总文章数 <%=site.posts.length%>
3
</nav>

文章顶部转载说明

  • 配置yilia主题文件
    在 themes/yilia/layout/_partial/article.ejs中下面标注的位置添加代码
    `<% if (!post.noDate){ %>
      <%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %>
  <% } %>
</header>
    <% } %> 
    1
    添加的代码如下  
    2
    ```html
    3
          <!-- 文章头增加转载声明 -->
    4
          <%
    5
            var sUrl = url.replace(/index\.html$/, '');
    6
            sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'https:' + sUrl;
    7
          %>
    8
          <% if ((theme.topdeclare_type === 2 || (theme.topdeclare_type === 1 && post.topdeclare)) && !index){ %>
    9
            <div class="topdeclare">
    10
               <hr>
    11
              <strong>如需转载，请根据</strong>
    12
              <a rel="license" href="<%= theme.toplicensee_url%>"><%= theme.toplicensee_name%></a>
    13
              许可，附上本文作者及链接。
    14
              <br>
    15
              <strong>本文作者：</strong>
    16
              <% if(config.author != undefined){ %>
    17
                <%= config.author%>
    18
              <% }else{%>
    19
                <font color="red">请在博客根目录“_config.yml”中填入正确的“author”</font>
    20
              <%}%>
    21
              <br>
    22
              <strong>作者昵称：</strong>
    23
              <% if(theme.topnickname!= undefined){ %>
    24
                <%= theme.topnickname%>
    25
              <% }else{%>
    26
                <font color="red">请在博客主题目录“_config.yml”中填入正确的“昵称”</font>
    27
              <%}%>
    28
              <br>
    29
              <strong>本文链接：</strong>
    30
              <a rel="license" href="<%=sUrl%>"><%=sUrl%></a>
    31
              <br>
    32
              <hr>
    33
            </div>
    34
          <% } else {%>
    35
            <div class="topdeclare" hidden="hidden"></div>
    36
          <% } %>
    37
          <!-- 文章头增加转载声明结束 -->
    38
    ```  
    39
    创建新文件`themes/yilia/source-src/css/topdeclare.scss`
    40
    并添加如下CSS代码。
    41
    ```css
    42
    .declare {
    43
        background-color: #eaeaea;
    44
        margin-top: 2em;
    45
        border-left: 3px solid #ff1700;
    46
        padding: .5em 1em;
    47
    }
    48
    ```  
    49
    50
    为`themes/yilia/source-src/css/main.scss` 添加如下代码：`@import "./topdeclare";`
    51
    52
    然后在需要进行版权声明的文章的md文件头部，设置属性 `topdeclare:true`
    53
    54
    - 配置显示    
    55
    修改 `themes/yilia/_config.yml`在里面加入：
    56
    ```yaml
    57
    #顶部版权基础设定：0-关闭声明； 1-文章对应的md文件里有topdeclare: true属性，才有版权声明； 2-所有文章均有版权声明
    58
    #当前应用的版权协议地址。
    59
    #昵称
    60
    #版权协议的名称
    61
    topdeclare_type: 1
    62
    toplicensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
    63
    topnickname: 莫与 #你的昵称
    64
    toplicensee_name: '知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议'
    然后在需要进行版权声明的文章的md文件头部，设置属性 `topdeclare:true`

分类的构建

  • 添加categories链接
    打开yilia/_config.yml文件，menu处做出以下修改

    1
    menu:
    2
      主页: /
    3
      分类: /categories
    4
      归档: /archives

  • 分类页面的构建
    根目录执行 hexo new page categories
    该命令在source目录下生成一个categories目录，categories目录下有一个index.md文件。

  • 修改categories/index.md为：

    1
    title: 文章分类
    2
    date: 2018-06-11 10:13:21
    3
    type: "categories"
    4
    layout: "categories"
    5
    comments: false

  • 修改 yilia 主题
    修改yilia\source\main.0cf68a.css，将下面的内容添加进去：

    1
    category-all-page {
    2
        margin: 30px 40px 30px 40px;
    3
        position: relative;
    4
        min-height: 70vh;
    5
      }
    6
      .category-all-page h2 {
    7
        margin: 20px 0;
    8
      }
    9
      .category-all-page .category-all-title {
    10
        text-align: center;
    11
      }
    12
      .category-all-page .category-all {
    13
        margin-top: 20px;
    14
      }
    15
      .category-all-page .category-list {
    16
        margin: 0;
    17
        padding: 0;
    18
        list-style: none;
    19
      }
    20
      .category-all-page .category-list-item-list-item {
    21
        margin: 10px 15px;
    22
      }
    23
      .category-all-page .category-list-item-list-count {
    24
        color: $grey;
    25
      }
    26
      .category-all-page .category-list-item-list-count:before {
    27
        display: inline;
    28
        content: " (";
    29
      }
    30
      .category-all-page .category-list-item-list-count:after {
    31
        display: inline;
    32
        content: ") ";
    33
      }
    34
      .category-all-page .category-list-item {
    35
        margin: 10px 10px;
    36
      }
    37
      .category-all-page .category-list-count {
    38
        color: $grey;
    39
      }
    40
      .category-all-page .category-list-count:before {
    41
        display: inline;
    42
        content: " (";
    43
      }
    44
      .category-all-page .category-list-count:after {
    45
        display: inline;
    46
        content: ") ";
    47
      }
    48
      .category-all-page .category-list-child {
    49
        padding-left: 10px;
    50
      }

  • 多层分类
    新建yilia/layout/categories.ejs，输入

    1
    <article class="article article-type-post show">
    2
      <header class="article-header" style="border-bottom: 1px solid #ccc">
    3
      <h1 class="article-title" itemprop="name">
    4
        <%= page.title %>
    5
      </h1>
    6
      </header>
    7
    8
      <% if (site.categories.length){ %>
    9
      <div class="category-all-page">
    10
        <h2>共计&nbsp;<%= site.categories.length %>&nbsp;个分类</h2>
    11
        <%- list_categories(site.categories, {
    12
          show_count: true,
    13
          class: 'category-list-item',
    14
          style: 'list',
    15
          depth:3,    #这里代表着几层分类
    16
          separator: ''
    17
        }) %>
    18
      </div>
    19
      <% } %>
    20
    </article>

  • 修改自己的文章

    1
    itle: HTML入门笔记
    2
    3
    copyright: true
    4
    date: 2018-11-23 21:07:15
    5
    6
    toc: true
    7
    tags: [HTML,前端]
    8
    categories: [前端,HTML]

yilia 主题 翻页报错

原因是 :themes\yilia\layout\_partial\archive.ejs 多出了&laquo; 和 &raquo;
解决方案,是在分页的地方删除以上两个标签,如下:

1
  //修改前
2
  <% if (page.total > 1){ %>
3
   <nav id="page-nav">
4
     <%- paginator({
5
       prev_text: '&laquo; Prev',
6
       next_text: 'Next &raquo;'
7
     }) %>
8
   </nav>
9
 <% } %>
10
 // 修改后
11
 <% if (page.total > 1){ %>
12
  <nav id="page-nav">
13
    <%- paginator({
14
      prev_text: 'Prev',
15
      next_text: 'Next'
16
    }) %>
17
  </nav>
18
<% } %>
19
 ...
20
 //修改前
21
 <% if (page.total > 1){ %>
22
   <nav id="page-nav">
23
     <%- paginator({
24
       prev_text: '&laquo; Prev',
25
       next_text: 'Next &raquo;'
26
     }) %>
27
   </nav>
28
 <% } %>
29
 //修改后
30
 <% if (page.total > 1){ %>
31
   <nav id="page-nav">
32
     <%- paginator({
33
       prev_text: 'Prev',
34
       next_text: 'Next'
35
     }) %>
36
   </nav>
37
 <% } %>

赏

谢谢你请我吃糖果

支付宝
微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

身在井隅<br><br> 心想星光<br><br> 眼里有诗<br><br>自在远方