Hexo-Yilia进阶笔记

详细版本见我的个人博客:Hexo-Yilia进阶笔记

一、GitHub下载Yilia主题

$ cd /d/document/GitHub/hexo/
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

也可以直接去GitHub上下载zip文件,然后解压放在theme文件夹下面。

二、分类的构建

1、添加categories链接

打开yilia/_config.yml文件,menu处做出以下修改:

menu:
  主页: /
  分类: /categories
  归档: /archives

2、分类页面的构建

  • 新建categories页面
hexo new page categories

该命令在source目录下生成一个categories目录,categories目录下有一个index.md文件。

  • 修改categories/index.md为:
---
title: 文章分类
date: 2018-06-11 10:13:21
type: "categories"
comments: false
---
  • 生成html
hexo g
hexo s

访问 http://localhost:4000/categories/ ,即可看到categories页面,只不过现在的页面只有标题。

3、修改 yilia 主题

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

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;
  }

4、多层分类

新建yilia/layout/categories.ejs,输入:

<%= page.title %>

<% if (site.categories.length){ %>

共计 <%= site.categories.length %> 个分类

<%- list_categories(site.categories, { show_count: true, class: 'category-list-item', style: 'list', depth: 2, separator: '' }) %>
<% } %>

5、修改自己的文章

---

title: HTML入门笔记

copyright: true
date: 2018-11-23 21:07:15

toc: true
tags: [HTML,前端]
categories: [前端,HTML]
---

三、yilia下的_config.yml完善

subnav中添加github、知乎、mail等链接。

smart_menu处去掉friends:

smart_menu:
  innerArchive: '所有文章'
  friends: false
  aboutme: '关于我'

aboutme处添加自己的介绍:

aboutme: 东南大学在读研究生

四、点击所有文章提示缺失模块

1、问题

点击所有文章提示缺失模块

2、解决办法

  • 确保node版本大于6.2
  • 在博客根目录(注意不是yilia根目录)执行以下命令:npm install hexo-generator-json-content --save
  • 在hexo的blog根目录_config.yml里添加配置(保持格式,不要改动任何空格缩进),关掉hexo s之后执行hexo g重新生成:
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

五、头像/图标设置

1、存放位置

头像、图标图片的存放位置是/themes/yilia/source/下任意位置,可以自己新建一个文件夹存放,我存放在assets文件夹下。

2、配置设置

配置文件为/themes/yilia/_config.yml

  • 设置头像为配置文件中avatar一项
  • 设置图标为配置文件中favicon一项

由于设置路径的根目录/themes/yilia/source/,因此,我的头像存放的地址是/themes/yilia/source/assets/me.png,设置则为avatar: /assets/me.png

图标同理。

六、添加评论

Gitalk 是一个基于 Github Issue 和 Preact 开发的评论插件。

主页:https://github.com/gitalk/gitalk/blob/master/readme-cn.md

gitalk 需要添加的部分主页有详细介绍,这里只谈针对yilia需要的改动。

1、创建gitalk.ejs

在你的hexo目录/theme/yilia/layout/_partial/post/目录下创建gitalk.ejs并写入如下内容:

2、修改article.ejs

在你的hexo目录/theme/yilia/layout/_partial/article.ejs文件中最后一行“<% } %>”之前添加如下内容:

<% if(theme.gitalk.enable && theme.gitalk.distractionFreeMode){ %>
      <%- partial('post/gitalk', {
      key: post.slug,
      title: post.title,
      url: config.url+url_for(post.path)
    }) %>
  <% } %>

3、添加配置文件

在yilia的配置文件_config.yml中gitment配置下面添加如下配置文件

#6. Gitalk
gitalk: 
  enable: true    #用来做启用判断可以不用
  clientID: 'your clientID'    #Github上生成的
  clientSecret: 'your clientSecret'   #同上
  repo: git_comment    #评论所在的github project
  owner: findtheonlyway    #github用户名
  admin: erbiduo    #可以初始化评论issue的github账户名称
  distractionFreeMode: true

七、侧边栏添加音乐

1、网易云音乐外链播放器生成

登录网页版网易云音乐,打开一首歌,点击 “生成外链播放器”。

2、侧栏添加背景音乐

打开/hexo/themes/yilia/layout/_partial/left-col.ejs文件,把音乐HTML代码粘贴进去,可以添加样式,改变大小,这是我的代码:


八、添加页面访问量

1、添加站点访问量

下面是个人改变完成后的\themes\yilia\layout\_partial\footer.ejs文件:

其中空格间那部分是额外添加的,这部分处于页脚的右边(原来是主题的说明,这里已删去)。

2、添加文章访问量

下面是个人改变完成后的\themes\yilia\layout\_partial\article.ejs文件:

      
<%- partial('post/title', {class_name: 'article-title'}) %> <% if (!post.noDate){ %> <%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %> <% } %> <% if ( !index ){ %> <% } %>

正如参考文章所说,空格间那部分是额外添加的,保证了每篇文章都有阅读量统计,同时这里加一个if判断,如果是首页不显示该文章的访问量。

九、Hexo-Yilia网站运行时间

hexo/themes/yelee/layout/_partial/footer.ejs文件中

你可能感兴趣的:(Hexo)