Yilia主题优化

Hexo

blog

发布日期: 2018-07-15

文章字数: 2.4k

阅读时长: 9 分

阅读次数:

☞
前言

hexo主题网站：https://hexo.io/themes/

我试了好几个主题，有的不能用，有的不太好看，最后选择了yilia主题，这个挺好配的

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

要求node.js版本在6.2以上

☞
一、使用

安装

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

配置

修改hexo根目录下的 _config.yml ： theme: yilia

更新

cd themes/yilia
git pull

☞
二、配置

主题配置文件在主目录下的_config.yml，请根据自己需要修改使用。

 # Header
menu:
  主页: /
  随笔: /tags/随笔/
 # SubNav
subnav:
  github: "#"
  weibo: "#"
  rss: "#"
  zhihu: "#"
  #qq: "#"
  #weixin: "#"
  #jianshu: "#"
  #douban: "#"
  #segmentfault: "#"
  #bilibili: "#"
  #acfun: "#"
  #mail: "mailto:[email protected]"
  #facebook: "#"
  #google: "#"
  #twitter: "#"
  #linkedin: "#"
rss: /atom.xml
 # 是否需要修改 root 路径
 # 如果您的网站存放在子目录中，例如 http://yoursite.com/blog，
 # 请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
root: 
 # Content
 # 文章太长，截断按钮文字
excerpt_link: more
 # 文章卡片右下角常驻链接，不需要请设置为false
show_all_link: '展开全文'
 # 数学公式
mathjax: false
 # 是否在新窗口打开链接
open_in_new: false
 # 打赏
 # 打赏type设定：0-关闭打赏； 1-文章对应的md文件里有reward:true属性，才有打赏； 2-所有文章均有打赏
reward_type: 2
 # 打赏wording
reward_wording: '谢谢你请我吃糖果'
 # 支付宝二维码图片地址，跟你设置头像的方式一样。比如：/assets/img/alipay.jpg
alipay: 
 # 微信二维码图片地址
weixin: 
 # 目录
 # 目录设定：0-不显示目录； 1-文章对应的md文件里有toc:true属性，才有目录； 2-所有文章均显示目录
toc: 1
 # 根据自己的习惯来设置，如果你的目录标题习惯有标号，置为true即可隐藏hexo重复的序号；否则置为false
toc_hide_index: true
 # 目录为空时的提示
toc_empty_wording: '目录，不存在的…'
 # 是否有快速回到顶部的按钮
top: true
 # Miscellaneous
baidu_analytics: ''
google_analytics: ''
favicon: /favicon.png
 #你的头像url
avatar:
 #是否开启分享
share_jia: true
 #评论：1、多说；2、网易云跟帖；3、畅言；4、Disqus；5、Gitment
 #不需要使用某项，直接设置值为false，或注释掉
 #具体请参考wiki：https://github.com/litten/hexo-theme-yilia/wiki/
 #1、多说
duoshuo: false
 #2、网易云跟帖
wangyiyun: false
 #3、畅言
changyan_appid: false
changyan_conf: false
 #4、Disqus 在hexo根目录的config里也有disqus_shortname字段，优先使用yilia的
disqus: false
 #5、Gitment
gitment_owner: false      #你的 GitHub ID
gitment_repo: ''          #存储评论的 repo
gitment_oauth:
  client_id: ''           #client ID
  client_secret: ''       #client secret
 # 样式定制 - 一般不需要修改，除非有很强的定制欲望…
style:
  # 头像上面的背景颜色
  header: '#4d4d4d'
  # 右滑板块背景
  slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'
 # slider的设置
slider:
  # 是否默认展开tags板块
  showTags: false
 # 智能菜单
 # 如不需要，将该对应项置为false
 # 比如
 #smart_menu:
 #  friends: false
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: 很惭愧

只做了一点微小的工作
谢谢大家

具体参考原作者

☞
三、优化

☞
3.1、所有文章功能不能用

node.js版本必须6.2以上

在hexo根目录下(注意不是yilia根目录)执行命令：

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

在hexo的配置文件_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

添加后 hexo clean && hexo g && hexo d 就行了

☞
3.2、设置主页文章只显示一部分

这个只要在文章中加上<!--more--标记，该标记以后部分就不在显示了，只有展开全部才显示，这是hexo定义的。
这样每次添加这个标记有点麻烦，也可以自定义添加，不过可能会导致排版错乱，自定义配置链接

☞
3.3、添加文章访问量统计

hexo添加访问量统计功能可以用百度的站长统计、leancloud，还有不蒜子，这里我用的不蒜子，感觉挺简单的。

引入不蒜子

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

这段代码,我用的yilia主题，放在/themes/yilia/layout/_partial/footer.ejs

添加站点访问量

通常站点的总访问量会显示在footer的位置，所以我们可以在footer.ejs里加上如下标签

<span id="busuanzi_container_site_uv"> 
  本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>

计算访问量的方法有两种：

算法a：pv的方式，单个用户连续点击n篇文章，记录n次访问量。

算法b：uv的方式，单个用户连续点击n篇文章，只记录1次访客数。

我用的是uv的方式，大家自行选择即可。

添加文章访问量

文章的访问量显示在文章里面，所以在article.ejs里加上文章访问量的标签：

<span id="busuanzi_container_page_pv">
   本文总阅读量<span id="busuanzi_value_page_pv"></span>次
</span>

我们直接就这样放在yilia主题中，首页也会显示该网页的访问量，没法正常使用，所以我加一个判断，如果是首页不显示该文章的访问量，下面这段代码添加在/themes/yilia/layout/_partial/article.ejs的header的日期后面：

<% if ( !index ){ %>
		<span class="archive-article-date">
			阅读量 <span id="busuanzi_value_page_pv"></span>
		</span>
<% } %>

☞
3.4、设置网站小图标

到ico在线制作生成一个ico图片，命名为favicon.ico

然后把图标放在/themes/yilia/source/img里

然后设置yilia下的_config.yml的favicon: favicon.ico

然后更新github就行了

☞
3.5、添加音乐

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

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

生产外链播放器代码，把代码粘贴到你想放的位置。

侧栏添加背景音乐

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

<nav class="header-nav">
        <div class="social">
        <% for (var i in theme.subnav){ %>
            <a class="<%= i %>" target="_blank" href="<%- url_for(theme.subnav[i]) %>" title="<%= i %>"><i class="icon-<%= i %>"></i></a>
        <%}%>
        </div>
         <!--音乐播放插件-->
        <div style="margin-top:30px;">
        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=240 height=52 src="//music.163.com/outchain/player?type=2&id=458639375&auto=0&height=32"></iframe>
        </div>
        </nav>

在文章中添加音乐

配置hexo下的_config.yml的post_asset_folder: true 设置为true。

把音乐插件代码直接添加到文章中你想添加的位置就ok了。

☞
3.6、很好玩的“小插件”

官网

这是一个能够实时统计访问你的站点或者博客的插件。

地球仪上的label表示访问站点的人的位置。
点击那个xxx visits，就会跳转到你的访问记录详情页了。

用法

打开官网首页，在Get Started这里把这段js复制到你的网页上即可。

这里用的是hexo主题，我希望在左边栏显示，那么就找到/themes/hexo/layout/_partials/left-col.ejs,插入复制来的脚本即可。

参考

☞
3.7、给博客增加动态标签

实现方式

打开博客路径themes/yilia/layout/layout.ejs

在前添加如下代码即可

<script type="text/javascript">var OriginTitile=document.title,st;document.addEventListener("visibilitychange",function(){document.hidden?(document.title="看不见我🙈~看不见我🙈~",clearTimeout(st)):(document.title="(๑•̀ㅂ•́) ✧被发现了～",st=setTimeout(function(){document.title=OriginTitile},3e3))})</script>

☞
3.8、图床推荐

→好用图床推荐

博主用的MoeTu图床、爱信息图床

具体根据个人爱好选择(建议使用https的)

☞
3.9、绑定个人域名

购买域名

国内的域名服务商有新网，腾讯云，还有阿里云的万网等。下面以阿里云的万网为例：

在万网购买了自己心仪的域名后，进入阿里云的管理控制台-域名与网站-域名就可以看到购买的域名此时的域名状态是未实名认证的，然后就是实名认证（一般需要2小时左右）。

域名解析

点击添加解析，记录类型选A或CNAME，A记录的记录值就是ip地址，

github(官方文档)提供了两个IP地址，192.30.252.153和192.30.252.154，这两个IP地址为github的服务器地址，

两个都要填上，解析记录设置两个www和@，线路就默认就行了，CNAME记录值填你的github博客网址。

然后打开你的github博客项目，点击settings

拉到下面Custom domain处，填上你自己的域名，保存

接着你需要做的是在hexo根目录的source文件夹里创建CNAME文件

不带任何后缀，里面添加你的域名信息，如：qvchuang.top

实践证明如果此时你填写的是www.qvchuang.top那么以后你只能用www.qvchuang.top访问

而如果你填写的是qvchuang.top。那么用www.qvchuang.top和qvchuang.top访问都是可以的。重新清理hexo,并发布即可用新的域名访问。