Hexo+yilia主题网站进阶教程

0

话不多说,下面的配置将会让你的网站提高n个档次!

【所有文章】按钮安装

你初始化的文章,所有文章按钮点开是有问题的,主要是你配置文件里面少了下面的内容

在博客根目录找到_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 d上传项目,更新后再次点击所有文章目录,会神奇的发现,哇哦奥,所有文章都列出来了。

添加头像,赞赏二维码

打开你的项目根目录中Blogthemeshexo-theme-yiliasource,在其中可添加一个 assets文件夹,里面存放图片资源即可,比如我的是创建了assets文件夹,然后在其中又创建img文件夹,意味把图片放到Blogthemeshexo-theme-yiliasourceassetsimg目录下。

然后打开Blogthemeshexo-theme-yilia下的_config.yml文件,在其中配置:

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

# 打赏
# 打赏type设定:0-关闭打赏; 1-文章对应的md文件里有reward:true属性,才有打赏; 2-所有文章均有打赏
reward_type: 2
# 打赏wording
reward_wording: '谢谢你请我吃糖果'
# 支付宝二维码图片地址,跟你设置头像的方式一样。比如:/assets/img/alipay.jpg
alipay:
# 微信二维码图片地址
weixin: "/assets/img/wx.png"

字数统计和阅读时长

安装 hexo-wordcount

在博客根目录下打开Git Bash Here 输入命令下面命令:

npm i --save hexo-wordcount

配置文件

themeshexo-theme-yilialayout_partialpost目录下下创建word.ejs文件(具体为什么是ejs文件而不是js文件有待大家一起研究):

<div style="margin-top:10px;">
    <span class="post-time">
      <span class="post-meta-item-icon">
        <i class="fa fa-keyboard-o"></i>
        <span class="post-meta-item-text">  字数统计: </span>
        <span class="post-count"><%= wordcount(post.content) %>字</span>
      </span>
    </span>

    <span class="post-time">
      &nbsp; | &nbsp;
      <span class="post-meta-item-icon">
        <i class="fa fa-hourglass-half"></i>
        <span class="post-meta-item-text">  阅读时长: </span>
        <span class="post-count"><%= min2read(post.content) %>分</span>
      </span>
    </span>
</div>

然后在themeshexo-theme-yilialayout_partial/article.ejs中添加

<div class="article-inner">
    <% if (post.link || post.title){ %>
      <header class="article-header">
        <%- partial('post/title', {class_name: 'article-title'}) %>
        <% if (!post.noDate){ %>
        <%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %>
         <!-- 需要添加的位置 -->
         <!-- 开始添加字数统计-->
        <% if(theme.word_count && !post.no_word_count){%>
          <%- partial('post/word') %>
          <% } %>
          <!-- 添加完成 -->
        <% } %>
      </header>

开启功能

在项目根目录的_config.yml中添加下面代码:

#是否开启字数统计
#不需要使用,直接设置值为false,或注释掉
word_count: true

一切配置完成就能看到项目中出现的文章字数以及建议阅读时长。

网站访问数量

引入不蒜子

在themeshexo-theme-yilia/_config.yml中添加属性

本身yilia主题没有在_config.yml保留busuanzi的属性,所以在文件末端添加:

#开启不算子访问统计
busuanzi:
  enable: true

将下面代码添加在 themeshexo-theme-yilialayout_partial/footer.ejs的末尾

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

添加不算子网站访问量统计脚本

在themeshexo-theme-yilialayout_partial/footer.ejs末尾</footer>与其上面的</div>之间放入代码:

<% if (theme.busuanzi && theme.busuanzi.enable){ %>
        <!-- 不蒜子统计 -->
        <span id="busuanzi_container_site_pv">
                本站总访问量<span id="busuanzi_value_site_pv"></span>次
        </span>
        <span class="post-meta-divider">|</span>
        <span id="busuanzi_container_site_uv" style='display:none'>
                本站访客数<span id="busuanzi_value_site_uv"></span>人
        </span>
        <script async src="/busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  <% } %>

根据不同的需求,你看你需要在不同的位置显示你的文章阅读量,此处以在右上角的日期区域添加文章阅读量为例:
在themeshexo-theme-yilialayout_partial/post/date.ejs 原有代码的开头(不需要把新代码放入原代码块中,而是和原代码独立的两块)加入:

<% if (theme.busuanzi && theme.busuanzi.enable && !index){ %>
        <!-- 不蒜子统计 -->
        <span id="busuanzi_container_page_pv" style='display:none' class="<%= class_name %>">
              <i class="icon-smile icon"></i> 阅读数:<span id="busuanzi_value_page_pv"></span>次
        </span>
<% } %>

然后通过hex g生成新的文件,在进行hexo d提交到github平台,刷新页面就能看到你添加的效果了。

添加版权声明

在themeshexo-theme-yilia/_partial/article.ejs文件标注处加入下面内容:

<%
        var sUrl = url.replace(/index\.html$/, '');
        sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'https:' + sUrl;
      %>
      <!--添加代码开始-->
      <% if ((theme.declare_type === 2 || (theme.declare_type === 1 && post.declare)) && !index){ %>
        <div class="declare">
          <strong>本文作者:</strong>
          <% if(config.author != undefined){ %>
            <%= config.author%>
          <% }else{%>
            <font color="#5b10b0"></font>
          <%}%>
          <br>
          <strong>本文链接:</strong>
          <%= sUrl%>
          <br>
          <strong>版权声明:</strong>
          本作品采用
          <a rel="license" href="<%= theme.licensee_url%>"><%= theme.licensee_name%></a>
          进行许可。转载请注明出处!
          <% if(theme.licensee_img != undefined){ %>
            <br>
            <a rel="license" href="<%= theme.licensee_url%>"><img alt="知识共享许可协议" style="border-width:0" src="<%= theme.licensee_img%>"/></a>
          <% } %>
        </div>
      <% } else {%>
        <div class="declare" hidden="hidden"></div>
      <% } %>

然后修改themeshexo-theme-yilia/_config.yml配置文件,在配置文件中添加:

## 版权声明
declare_type: 1  #版权基础设定:0-关闭声明; 1-文章对应的md文件里有declare: true属性,才有版权声明; 2-所有文章均有版权声明
licensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/          # 当前应用的版权协议地址。
licensee_name: '知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议'  # 版权协议的名称
licensee_img: https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png      # 版权协议的Logo

在找到你项目根目录下的_config.yml配置文件,填写url地址:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://mengniannian.cn

提交就ok了,效果图如下:

增加gitalk评论插件

yilia主题中提供五种评论功能:

1、多说(关闭了) 2、网易云跟帖(停更了) 3、畅言(需要网站的备案信息) 4、Disqus 5、Gitment。

前三种基本不能使用了,后两种不太熟悉,所以就选择了适合大众的gitalk,方便,快捷,用着舒服。

OAuth application注册

首先使用之前要先注册 一个账号,登录自己的github账户,点击头像-->Settings-->Developer settings-->OAuth App-->New OAuth App,或点击注册

Application name:可以随意填写
Homepage URL:个人博客地址(域名)
Application description:可填可不填,不是关键,若填,可填个人博客的相关描述
Authorization callback URL:个人博客地址(域名)
一切设置完成之后点击Register application,注册完成后,会出现两个关键信息(个人博客配置评论功能之关键,就不放图了)

点击Register application注册完成后会出现两个关键信息,Client ID和Client Secret,至关重要。

然后在yilia主题下的_config.yml文件中配置代码:

#6、配置gitalk
gitalk:
  enable: true
  client_id: OAuth application #注册成功获得
  client_secret: OAuth application #注册成功获得
  repo: mengnn.github.io #存储博客评论的仓库地址,可以是存储博客的仓库
  owner: mengnn #github账户名
  admin: mengnn #github账户名
  distractionFreeMode: true

配置文件

首先在yilia主题下的layout-->_partial-->post目录下新增gitalk.ejs文件:

<div id="gitalk-container"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>

<script>
var gitalk = new Gitalk({
  clientID: '<%=theme.gitalk.clientID%>',
  clientSecret: '<%=theme.gitalk.clientSecret%>',
  repo: '<%=theme.gitalk.repo%>',
  owner: '<%=theme.gitalk.owner%>',
  admin: ['<%=theme.gitalk.admin%>'],
  id: md5(window.location.pathname),
  distractionFreeMode: <%=theme.gitalk.distractionFreeMode%>
})

gitalk.render('gitalk-container')
</script>

然后修改yilia主题下source-src-->css目录下comment.scss文件:

#disqus_thread, .duoshuo, .cloud-tie-wrapper, #SOHUCS, #gitment-ctn, #gitalk-container {
    padding: 0 30px !important;
    min-height: 20px;
}

#SOHUCS {
    #SOHU_MAIN .module-cmt-list .block-cont-gw {
        border-bottom: 1px dashed #c8c8c8 !important;
    }
}

最后在layout-->_partial目录下的article.ejs`文件内新增gitalk相关的配置代码:

<% if (theme.gitalk.enable){ %>
       <div id="gitalk-container"></div>
       <%- include post/gitalk.ejs %>
  <% } %>

到这里,gitalk就已经全部配置完成,然后hexo g -->hexo d提交代码,打开你的网站,在下面看到如下图所示,就说明你已经配置成功,第一次评论需要登录github账号,登录 一次就OK了。

增加RSS

RSS简易信息聚合(也叫聚合内容)是一种RSS基于XML标准,在互联网上被广泛采用的内容包装和投递协议。RSS(Really Simple Syndication)是一种描述和同步网站内容的格式,是使用最广泛的XML应用。RSS搭建了信息迅速传播的一个技术平台,使得每个人都成为潜在的信息提供者。发布一个RSS文件后,这个RSS Feed中包含的信息就能直接被其他站点调用,而且由于这些数据都是标准的XML格式,所以也能在其他的终端和服务中使用,是一种描述和同步网站内容的格式。

在 Hexo 根目录打开命令行工具,执行以下命令:

npm install hexo-generator-feed --sava
hexo clean
hexo g

命令运行完成后,会在你根目录下面的public文件夹里面看到一个atom.xml文件。

依次打开项目根目录下的themeshexo-theme-yiliaconfig.yml,在subnav项目下添加 RSS 配置信息:

#SubNav
subnav:
  rss: /atom.xml

重新生成并构建页面,就可以看到 RSS 的信息了。

搜索引擎

添加sitemap

在 Hexo 根目录打开命令行工具,执行以下命令:

npm install hexo-generator-sitemap --save
hexo clean
hexo g

查看根目录下的public文件夹,可以看到 sitmap.xml文件。
sitemap 的初衷是给搜索引擎看的,为了提高搜索引擎对自己站点的收录效果,我们最好手动到 google 和百度等搜索引擎提交 sitemap.xml。

百度搜索引擎提交

注册百度站长号,注册完成后进入站点管理,添加自己的网站,然后按照步骤完成网站认证即可。

网站认证完成后,进入网站管理界面,点击链接提交-->自动提交-->sitemap,然后在填写框内填写自己的文件地址,比如我的是https://www.mengniannian.cn/s...,如下图:

按照提示信息,填写完成提交就ok了!!!


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

载入中...