Hello my blog 之 yilia-plus

字数统计: 1.9k字   |   阅读时长≈ 8分

  这个博客已经用了一年多啦，今日心血来潮，就终于下定决心把之前那个有许多个性化修改的博客换掉，以前用的是material主题（可以查看我的这篇文章），但是奈何加载速度实在不太行，前段时间就寻思着换一个稍微简洁一点，加载速度也快点的主题，今日选定了yilia，感觉已经没有在维护了，后在hexo官网上找到了一个yilia-plus，在原来的基础上集成了更多的功能或展示，也解决了许多原主题存在的问题，十分合我意，就你了！

修改主题

进一步的个性化修改

结合自己的主题配置，修改生成文章的模版文件

  • 修改博客根目录下scaffolds文件夹内的post.md文件
    post.md
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ---
    title: {{ title }}
    date: {{ date }}
    tags: []
    categories: []
    # post_license: true
    copyright: true # 不需要注明出处可把这行删掉
    ---

      

    <!--more-->

修改menu

增加归档页面

修改主题内_config.yml文件的menu

1
2
3
4
menu:
  主页: /
  汇总: /tags/汇总/
  归档: /archives/

增加分类页面

  1. 在博客的根目录下新建categories页面
    hexo new page categories

  2. 修改categories页面的index.md文件

    1
    2
    3
    4
    5
    ---
    title: categories
    date: 2019-11-17 19:08:48
    layout: categories
    ---

layout的作用是指定该页面生成时使用的文件，如不填，默认使用post.ejs（就像我的简介页面）

  1. 修改主题配置文件中的menu

    1
    2
    3
    4
    5
    # Header-菜单
    menu:
      主页: /
      分类: /categories/
      归档: /archives/

  2. 在主题文件夹中的layout目录下，新建categories.ejs文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    <style>
      category-all-page {
        margin: 30px 40px 30px 40px;
        position: relative;
        min-height: 70vh;
      }
      .category-all-page h2 {
        margin: 20px 20px;
      }
      .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 30px;
      }
      .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;
      }
      .tag{
        display: inline-block;
        text-decoration: none;
        font-weight: 400;
        font-size: 10px;
        color: #fff;
        height: 18px;
        line-height: 18px;
        /* float: left; */
        padding: 0 5px 0 10px;
        /* position: relative; */
        border-radius: 0 5px 5px 0;
        margin: 5px 9px 5px 8px;
        font-family: Menlo, Monaco, Andale Mono, lucida console, Courier New, monospace;
      }
      .tag::before{
        content: ' ';
        width: 0;
        height: 0;
        position: absolute;
        top: 0;
        left: -18px;
        border: 9px solid transparent;
      }
    </style>
    <article class="article article-type-post show">
      <header class="article-header" style="border-bottom: 1px solid #ccc">
        <h1 class="article-title" itemprop="name">
          <%= page.title %>
        </h1>
      </header>

      <% if (site.categories.length){ %>
      <div class="category-all-page">
        <h2>共计&nbsp;<%= site.categories.length %>&nbsp;个分类</h2>
        <%- list_categories(site.categories, { show_count: true, class:
        'category-list-item', style: 'list', depth:3, separator: '' }) %>
      </div>
      <% } %>
    </article>

参考：hexo博客的yilia主题之添加分类

增加作品集页面

  1. 仿照友链，修改主题配置文件

    1
    2
    3
    4
    5
    smart_menu:
      innerArchive: '所有文章'
      friends: '友链'
      # aboutme: '关于我'
      myWorks: '作品集'
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    myWorks:
      在线学习系统:
        url: https://github.com/Niccce/E-Learning-system
        description: 一个使用 Vue.js+Node.js(express)+MySQL+Webpack 打造的基于 Web 的“在线学习系统”
      脑暴:
        url: https://github.com/Niccce/brainStormingMiniProgram
        description: 参考通过头脑风暴得出思维导图的思路，在微信小程序中采用多人协作完成头脑风暴环节，并生成思维导图的工具类小程序。
      数字媒体技术专业网站:
        url: http://dmt-1257068932.cos-website.ap-guangzhou.myqcloud.com/
        description: 此为大二暑假期间，为了让即将入学的 18 级新生更加了解本专业，帮助他们及早确定个人学习方向，与工作室成员共同打造的专业网站
      鱼湾苏维埃政府旧址-数字博物馆:
        url: https://niccce.github.io/Digital-Museum/
        description: 互联网+的小分队的项目，涉及three.js

  2. 找到主题文件夹内->layout->_partial->tools.ejs
    在合适的位置，添加如下代码

    1
    var hasWorks = theme.smart_menu.myWorks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <%if(hasWorks){%>
      <section class="tools-section tools-section-friends" q-show="myWorks">
      <%if(theme.myWorks && theme.myWorks.length != 0){%>
        <ul class="search-ul">
          <% for (var i in theme.myWorks){ %>
            <li class="search-li">
              <a href="<%- url_for(theme.myWorks[i].url) %>" target="_blank" class="search-title" <% if (theme.myWorks[i].description){ %>title="<%= theme.myWorks[i].description %>"<% } %>>
                <% if (theme.myWorks[i].img){ %>
                  <img src="<%- url_for(theme.myWorks[i].img) %>">
                <% } else { %>
                  <i class="icon-link icon"></i>
                <% } %>
                <%= i %>
              </a>
            </li>
          <% } %>
        </ul>
      <%}%>
      </section>
    <%}%>

完成了这部之后，查看效果发现，点击作品集时能正常显示，但是点友链时，发现作品集在友链下面，此时F12查看原因，发现是点击友链时，作品集的section没有隐藏，因此要修改js文件，继续下一步

  1. 找打主题文件夹内->source->slider.27463f.js
    查找friends关键字（friends指的是q-show里的friends）
    在每个地方像friends那样加入myWorks的代码

    1
    myWorks: !1,
    1
    e.$set("myWorks", !1),
    1
    e.$set("myWorks", !1),

修改代码块样式

浏览器F12，找出想修改样式的地方，在主题文件夹内的source内的main.826e88.css文件

添加DaoVoice

  1. 进入DaoVoice官网注册一个账号
  2. 第一次登录，会弹出一个窗口，相关资料自行填写，我用QQ邮箱注册，邀请码留空了。
  3. 进入应用设置->安装到网站

  4. 在主题配置文件_config.xml中加入如下代码

    1
    2
    3
    # Daovoice Online contact
    daovoice: true
    daovoice_app_id: 'xxxxxxxx' # 这里替换成你DaoVoice上的appid

  5. 找到yilia-plus/layout/_partial/head.ejs，把应用设置->安装到网站出现的页面下的第二大点的第一小点添加到文件中，第二和第三小点随便添加一个到</script>之前

    1
    2
    3
    4
    5
    6
    <script>(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/xxxxxx.js","daovoice")
    daovoice('init', {
      app_id: "xxxxxxxx"
    });
    daovoice('update');
    </script>

xxxxxxxx为你自己的id

  1. 想对你的博客出现的daovoice聊天图标进行配置可以进入应用设置->聊天设置

参考：(hexo的yilia主题之添加在线聊天功能daovoice)[https://blog.csdn.net/weixin_44330881/article/details/102816577]

关于出现的一些问题

  1. 首次使用时，点击所有文章，会显示缺失模块，只需按照提示去操作即可解决。
  2. 文章太长，截断按钮文字可在需要截断的行增加此标记：<!--more-->，同时注释掉主题配置文件中的excerpt_link: more，因为这个more会与阅读全文有重复，当然不注释也行，编译一下就能看到区别，看个人喜好啦。
  3. 关于Gitment
    • 主题配置文件中Gitment配置部分的gitment_repo: 'niccce.github.io'，gitment_repo 配置的是存储评论的仓库名，一般和你对应的博客的仓库名一致就可以。不要使用 Oauth 的 name！
    • 每发表一篇博文，都要初始化一下评论，Gitment会自动在存储评论的仓库中创建一个issue保存评论
赏

感谢支持！我会继续努力产出哒~

支付宝
微信

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_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