Hexo+GitHub配置笔记（yilia主题）


​ 之前搞过一次，换了块硬盘，忘记备份。索性重新再搭建一次，在这里记录一下，免得以后想要弄又忘记了。

一、搭建过程

1.创建github仓库，以github名称+.github.io命名
2.可以在setting中，配置链接到个人域名。找到GitHub Pages，添加自己的域名即可。
3.安装好git和Node.js，可以通过以下命令查看

1
2
node -v        //查看node版本
git --version  //查看git版本

4.安装Hexo
在本地找一个位置创建一个文件夹。
通过命令行进入文件夹中。
安装Hexo

1
2
3
4
5
6
npm install hexo -g
node -v     //检查是否安装成功
hexo init   //初始化Hexo
npm install //安装所需组件
hexo g      //生成静态文件
hexo s      //启动服务器。默认情况下，访问网址为： [http://localhost:4000/]

​ 准备好后，访问http://localhost:4000,展示有Hexo的界面证明安装成功。
5.链接Hexo和Git
​ 如果第一次使用git，设置用户名和邮箱

1
2
git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"   //我用的GitHub上的用户名和邮箱，不知是否随便也可以

​ 使用ssh-keygen生成私钥和公钥
​ 命令如下：

1
ssh-keygen -t rsa

​ 根据提示信息，在相应位置找到公钥文件并打开，复制其中内容。登录Github，点击头像下的settings，添加ssh,新建一个new ssh key，将id_rsa.pub文件里的内容复制上去。
​ 输入ssh -T git@github.com，测试添加ssh是否成功。如果看到Hi后面是你的用户名，就说明成功了

1
$ ssh -T git@github.com

6.配置Deployment，在Hexo根目录文件夹中，找到_config.yml文件，修改repo值（在末尾），repo值是github项目里的ssh链接。

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: 'git'
  repo: 'git@github.com:MagicYuze/magicyuze.github.io.git'
  branch: 'master'

7.HexoBlog部署到git我们需要安装hexo-deployer-git插件,在Hexo根目录下运行一下命令进行安装：

1
npm install hexo-deployer-git --save

8.使用hexo -d 将其生成好的静态文件部署到github

1
hexo d

9.提醒：
每次上传都会影响域名和github.io的关联。所以需要在Hexo根目录的source文件夹中新建一个名为 CNAME 的文件，里面写上自己的域名。这样每次上传都会一并上传到github了，就不用每次上传后都重新关联了。

二、yilia主题基本配置

1.首先clone主题到Hexo根目录下的theme中，文件夹命名为yilia。下载地址：https://github.com/litten/hexo-theme-yilia
2.配置Hexo根目录下的_config.yml文件，从上往下看。没提到的部分如无特殊情况，保持默认即可。
Site部分是设置网站的相关信息的：

1
2
3
4
5
6
7
8
# Site
title: MagicYang的博客                             # 设置网页标签显示内容
subtitle: '对自己狠一点，未来的你，会感谢现在的自己'   # 设置个性签名
description: ''
keywords:
author: MagicYang                                 # 设置作者名/昵称
language: zh-CN                                   # 设置站点语言
timezone: ''

​ Pagination部分是配置分页的相关信息的：

1
2
3
4
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10                     #每页显示多少篇文章
pagination_dir: page
 Extensions部分是配置主题的：
1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: yilia                            #主题填写yilia，注意theme:和yilia之间有一个空格

​ Deployment部分之前配置过了，是关联hexo和github的

最后，由于yilia主题中缺少部分配置信息。需要安装一个插件：

1
npm i hexo-generator-json-content --save

并在刚刚的配置文件的末尾，添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
updated: 2023-05-23 10:23:13
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true

3.配置yilia文件夹下的_config.yml文件，从上往下看：
menu部分配置的是左侧边栏信息：

1
2
3
4
menu:                                  #路径针对Hexo根目录下的public文件夹中内容（和source文件夹结构相同）
  主页: /                               #配置主页面所在目录
  目录: /categories/index.html          #配置目录页面所在目录
  归档: /archives/index.html            #配置归档页面所在目录
 其中，目录需要自己修改：
 在source文件夹下创建名为categories的文件夹，并在其中创建名为index.md的文件，写入以下内容：
1
2
3
4
5
6
7
---
title: 文章分类
date: 2019-07-29 10:13:21
type: "categories"
layout: "categories"
comments: false
---

​ 指定layout为categories，渲染时就会使用categories.ejs进行渲染。
​ 新建yilia/layout/categories.ejs，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<article class="article article-type-post show">
  <header class="article-header" style="border-bottom: 1px solid #ccc">
  <h1 class="article-title" itemprop="name">
    <%= page.title %>
  </h1>
  </header>

  <% if (site.categories.length){ %>
  <div class="category-all-page">
    <h2>共计&nbsp;<%= site.categories.length %>&nbsp;个分类</h2>
    <%- list_categories(site.categories, {
      show_count: true,
      class: 'category-list-item',
      style: 'list',
      depth: 3,
      separator: ''
    }) %>
  </div>
  <% } %>
</article>

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

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

​ 写文章时加入categories属性即可（使用数组表示目录层级关系）

1
2
3
4
5
6
7
---
title: Hexo yilia基础配置
date: 2020-01-31 22:59:41
tags: [hexo, yilia]
categories: [专业, 前端, hexo]
keywords: 
---

继续看_config.yml文件的配置，SubNav部分配置的是左侧栏中的小图标链接：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# SubNav
subnav:
  github: "https://www.github.com/magicyuze"
  #weibo: "#"
  #rss: "#"
  #zhihu: "#"
  qq: "http://wpa.qq.com/msgrd?v=3&uin=814934201&site=qq&menu=yes"
  #weixin: "#"
  jianshu: "https://www.jianshu.com/u/7cb66e6ce61f"
  #douban: "#"
  #segmentfault: "#"
  #bilibili: "#"
  #acfun: "#"
  #mail: "#"
  #facebook: "#"
  #google: "#"
  #twitter: "#"
  #linkedin: "#"

需要使用就直接配置相关链接即可，不使用的话用#注释即可

文章太长想要截断（摘要），在想要截断的地方使用以下代码：

1
<!-- more -->

并配置_config.yml文件中的以下部分：

1
2
# 文章太长，截断按钮文字
#excerpt_link: "more"            #注释掉这行即可

打赏和评论暂时还没有配置好，留个位置，有空更新。

各种图片的设置方法：

1
2
3
4
5
#网站favicon图标
favicon: /img/favicon.jpg

#你的头像url
avatar: /img//avatar.jpg

​ 此路径是针对themes\yilia\source的，如我的头像在themes\yilia\source的img文件夹中，其他图片地址配置也是如此（如微信图片等）

最后就是左侧栏最下面的所有文章/友链/关于我 的配置，比较好理解，附上我的配置即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
smart_menu:
  innerArchive: '所有文章'
  #friends: '友链'
  aboutme: '关于我'

#friends:
#  友情链接1: http://localhost:4000/
#  友情链接2: http://localhost:4000/
#  友情链接3: http://localhost:4000/
#  友情链接4: http://localhost:4000/
#  友情链接5: http://localhost:4000/
#  友情链接6: http://localhost:4000/

aboutme: 东莞理工学院<br><br>软件工程<br>大四在读

4.最后有两个bug需要改一下，左边栏a标签点击会弹出空白页而不是相应的内容。要修改themes\yilia\layout_partial中的left-col.ejs文件，修改部分代码如下。在原文件找到相应位置替换为以下代码即可：

1
2
3
4
5
6
7
<nav class="header-smart-menu">
    <% for (var i in theme.smart_menu){ %>
    <% if(theme.smart_menu[i]){ %>
    <a q-on="click: openSlider(e, '<%-i%>')" href="javascript:void(0)" target="_parent"><%= theme.smart_menu[i] %></a>
    <% } %>
    <%}%>
</nav>

第二个是翻页符号显示有点问题，需要修改一下：
编辑themes\yilia\layout_partial中的archive.ejs，将其中的两处英文改成如下：

1
2
3
4
<%- paginator({
	prev_text: '上一页',
	next_text: '下一页'
}) %>

然后编辑themes\yilia\layout_partial中的script.ejs，搜索以下两行代码：

1
2
<a class="extend prev disabled" rel="prev">
<a class="extend next disabled" rel="next">

将a标签中包含的内容删除即可

三、yilia主题高级配置

1.左侧显示总文章数和总字数
编辑themes\yilia\layout_partial中的left-col.ejs文件，在以下代码

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

后面添加：

1
2
3
4
<nav class="header-smart-menu">
    总文章数 <%=site.posts.length%> |
    总字数 <span class="post-count"><%= totalcount(site, '0,0.0a') %></span>
</nav>

2.统计文章总字数和阅读时常
安装插件：

1
npm install hexo-wordcount -–save

编辑themes\yilia\layout_partial中的article.ejs文件，在前添加以下代码：

1
2
3
4
<!--显示文章字数和阅读时常-->
<div align="right" class="post-count" style="color:grey;margin-right:85px;">
字数：<%= wordcount(post.content) %>字 | 预计阅读时长：<%= min2read(post.content) %>分
</div>

3.统计文章阅读次数
编辑themes\yilia\layout_partial中的article.ejs文件，在header标签结尾前添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
<!--显示阅读次数-->
<div align="right" style="margin-right:120px;">
	<% if (!index && post.comments){ %>
		<a class="cloud-tie-join-count" href="javascript:void(0);" style="color:gray;font-size:14px;">
			<span class="icon-sort"></span>
			<span id="busuanzi_container_page_pv" style="color:grey;;font-size:14px;">
阅读数: <span id="busuanzi_value_page_pv"></span>次 &nbsp;&nbsp;</span>
		</a>
	<% } %>
</div>
<!--显示阅读次数完毕-->

4.不蒜子统计pv，uv访客量
编辑themes\yilia\layout_partial中的footer.ejs文件，在class=”footer-left”的div或者class=”footer-right”的div内部添加都行，根据个人喜好（可以把div中的内容先删除，都是主题介绍之类的链接）

1
2
3
4
5
6
7
8
9
10
11
<!--# PV方式，单个用户连续点击 n 篇，记录 n 次记录值-->
<span id="busuanzi_container_site_pv">
	本站总访问量：<span id="busuanzi_value_site_pv"></span>次
</span>

<span class="post-meta-divider">|</span>

<!--# UV方式，单个用户连续点击 n 篇，记录 1 次记录值-->
<span id="busuanzi_container_site_uv">
	本站访客数：<span id="busuanzi_value_site_uv"></span>人
</span>

5.统计网站运行天数
编辑themes\yilia\layout_partial中的footer.ejs文件，在class=”footer-left”的div或者class=”footer-right”的div内部添加都行，根据个人喜好（可以把div中的内容先删除，都是主题介绍之类的链接）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
	var now = new Date(); 
	function createtime() { 
		var grt= new Date("11/23/2019 19:08:16");//此处修改你的建站时间或者网站上线时间 
		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 = "本站已经运行 "+dnum+" 天 "; 
		document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; 
	} 
	setInterval("createtime()",250);
</script>

6.置顶文章
安装插件：

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

在写文章的时候加上top属性即可，如top:5，数字越大优先级越高。也可以逆序设置，修改根目录配置文件/_config.yml,top值-1标示根据top值倒序（正序设置为1即可），同样date也是根据创建日期倒序。

1
2
3
4
5
6
index_generator:
  path: ''
  per_page: 10
  order_by:
    top: -1
    date: -1

7.页面点击实现♥的显示
在themes\yilia\source下创建文件love.js，并写入以下内容：

1
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

然后，在themes\yilia\layout_partial\footer.ejs的最后面加入以下代码：

1
<script type="text/javascript" src="/love.js"></script>

8.静态图床
能用的图床有很多，今天搜索的时候看了一个大佬用的微博图床，我用了以下还挺方便的。可以去chrome网上应用商店下载一个叫微博图床的chrome插件，下图是插件的界面，操作简单方便，具体使用看说明就可以啦，比较简单，这样图床的问题就解决了。
微博图床

上传图片之后，直接复制MarkDown到编辑器就可以了，顺便推荐一个自用好用的MarkDown编辑器Typora

以上就是今天重新搭建Hexo+GitHub个人博客的一些笔记。
后续更新会再补充~~

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>大四在读