Loading

Hexo yilia 主题启用及相关设置

部分教程来自互联网,如侵联删。

主题地址:https://github.com/litten/hexo-theme-yilia

一、主题的启用

1.1 下载并启用

进入命令行,下载 yilia 主题,输入:

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

修改站点配置文件 _config.yml,找到如下代码:

## Themes: https://hexo.io/themes/
theme: landscape

landscape 修改为 yilia 即可。

1.2 修改语言

打开站点配置文件,搜索language,找到如下代码:

author:
language:
timezone:

language 后面输入 zh-CN

注意:冒号后面必须有一个空格。

二、主题相关设置

2.1 “所有文章”按钮的安装

首先使用命令 node -v 检查版本是不是大于 6.2

在博客根目录执行以下命令:

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

在博客配置文件 _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

2.2 添加图片资源文件夹

路径为 themes/yilia/source/ 下,可添加一个 assets 文件夹,里面存放图片资源即可

需要添加头像或者微信/支付宝二维码图片,直接引用即可。路径为 themes/yilia/_config.yml

# 微信二维码图片
weixin:  /assets/img/wechat.png

# 头像图片
avatar:  /assets/img/head.jpg

# 网页图标
favicon:  /assets/img/head.jpg

2.3 文章显示摘要

在你 MD 格式文章正文插入 <!-- more --> 即可,只会显示它之前的,此后的就不显示,点击文章标题,全文阅读才可看到,同时注释掉文件 themes/yilia/_config.yml 里的:

# excerpt_link: more

2.4 文章显示目录

增加文章目录 TOC ( table of content ),方便阅读文章,在 themes/yilia/_config.yml 中进行配置 toc: 2 即可,它会将你 Markdown 语法的标题,生成目录,目录查看在右下角。

2.5 增加归档菜单

修改 themes/yilia/_config.yml 内容:

menu:
    主页:  /
    归档:  /archives/index.html

2.6 修复失效的微信分享二维码

打开 themes\yilia\layout\_partial\post\share.ejs 文件

把第49行中的 //pan.baidu.com/share/qrcode?url= 修改为:

//api.qrserver.com/v1/create-qr-code/?size=150x150&data=

2.7 更改左侧昵称字体

themes\yilia\source\main.0cf68a.css 文件里面修改,找到 header-author ,修改里面的 font-family ,改成:

font-family:"Times New Roman",Georgia,Serif

2.8 左侧显示总文章数

打开 themes\yilia\layout\_partial\left-col.ejs 文件

在:

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

后面添加:

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

2.9 添加字数统计

首先安装 hexo-wordcount

使用如下命令安装:

npm i --save hexo-wordcount

Node 版本7.6.0之前,请安装 2.x 版本 (Node.js v7.6.0 and previous)

npm install hexo-wordcount@2 --save

然后在 themes\yilia\layout\_partial\left-col.ejs中添加:

<nav>
	总字数 <span class="post-count"><%= totalcount(site, '0,0.0a') %></span>
</nav>

添加位置在如下代码的下面:

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

编辑 themes\yilia\layout\_partial\article.ejs

在header下面加入:

<div align="center" class="post-count">
    字数:<%= wordcount(post.content) %>字 | 预计阅读时长:<%= min2read(post.content) %>分钟
</div>

即可显示单篇字数和预计阅读时长。

2.10 添加来必力(livere)评论系统

yilia 默认带了几个系统,但是没有来必力,所以可以自己加

首先是去注册来必力,然后获取到自己的 id

新建 themes\yilia\layout\_partial\comment\livere.ejs 文件,输入如下内容:

<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="<%=theme.livere_uid%>">
<script type="text/javascript">
    (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];

        if (typeof LivereTower === 'function') { return; }

        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;

        e.parentNode.insertBefore(j, e);
    })(document, 'script');
</script>
<noscript>为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->

然后编辑 themes\yilia\layout\_partial\article.ejs 文件,找到:<% if (!index && post.comments){ %> ,添加:

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

在主题配置文件 themes\yilia\_config.yml 中添加以下内容:

livere: true
livere_uid: 你的id

2.11 关闭信息收集(自选)

关于访问 litten.me:9005 的问题,这个主题的作者之前为了更好地完善这个主题,有时候会收集用户的客户端信息,详情请见 https://github.com/litten/hexo-theme-yilia/issues/528 ,如果不想被统计,就将 themes\yilia\source-src\js\report.js 里面的内容清空。不过这个请求是异步的,不会影响博客加载速度,而且作者已经不维护了,所以关不关都行。

posted @ 2019-07-19 08:48  滑稽果  阅读(2238)  评论(0编辑  收藏  举报
浏览器标题切换
浏览器标题切换end