Hexo+yilia主题网站进阶教程

时间  2019-11-16
标签 hexo+yilia hexo yilia 主题 网站 进阶 教程 栏目 网站开发 繁體版
原文   原文链接

话很少说，下面的配置将会让你的网站提升n个档次！css

【全部文章】按钮安装

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

在博客根目录找到_config.yml文件，而后打开文件，在其最下方添加下面代码段：git

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上传项目，更新后再次点击全部文章目录，会神奇的发现，哇哦奥，全部文章都列出来了。github

添加头像，赞扬二维码

打开你的项目根目录中Blogthemeshexo-theme-yiliasource，在其中可添加一个 assets文件夹，里面存放图片资源便可，好比个人是建立了assets文件夹，而后在其中又建立img文件夹，意味把图片放到Blogthemeshexo-theme-yiliasourceassetsimg目录下。npm

而后打开Blogthemeshexo-theme-yilia下的_config.yml文件，在其中配置：json

#你的头像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文件有待你们一块儿研究）：hexo

<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中添加app

<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中添加下面代码：async

#是否开启字数统计
#不须要使用，直接设置值为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主题中提供五种评论功能：

一、多说(关闭了) 二、网易云跟帖（停更了） 三、畅言(须要网站的备案信息) 四、Disqus 五、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文件中配置代码：

#六、配置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了！！！

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程