• Hexo yilia 主题启用及相关设置


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

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

    主题的启用

    下载并启用

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

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

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

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

    landscape 修改为 yilia 即可。

    修改语言

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

    author:
    language:
    timezone:
    

    language 后面输入 zh-CN

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

    主题相关设置

    “所有文章”按钮的安装

    首先使用命令 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
    

    添加图片资源文件夹

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

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

    # 微信二维码图片
    weixin:  /assets/img/wechat.png
    
    # 头像图片
    avatar:  /assets/img/head.jpg
    
    # 网页图标
    favicon:  /assets/img/head.jpg
    

    文章显示摘要

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

    # excerpt_link: more
    

    文章显示目录

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

    增加归档菜单

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

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

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

    打开 themesyilialayout\_partialpostshare.ejs 文件

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

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

    更改左侧昵称字体

    themesyiliasourcemain.0cf68a.css 文件里面修改,找到 header-author ,修改里面的 font-family ,改成:

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

    左侧显示总文章数

    打开 themesyilialayout\_partialleft-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>
    

    添加字数统计

    首先安装 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
    

    然后在 themesyilialayout\_partialleft-col.ejs中添加:

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

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

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

    编辑 themesyilialayout\_partialarticle.ejs

    在header下面加入:

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

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

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

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

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

    新建 themesyilialayout\_partialcommentlivere.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版安装代码已完成 -->
    

    然后编辑 themesyilialayout\_partialarticle.ejs 文件,找到:<% if (!index && post.comments){ %> ,添加:

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

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

    livere: true
    livere_uid: 你的id
    

    关闭信息收集(自选)

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

  • 相关阅读:
    提升开发效率的十个工具
    JQuery常用函数及功能小结
    jquery-validation 学习总结
    JavaScript:避免代码的重复执行
    18 个最好的CSS框架用于提高开发效率
    如何书写高质量的jQuery代码
    13个 ASP.NET MVC 的扩展
    CSS_LESS 语法/函数详解
    21个值得收藏的Javascript技巧
    JQuery常用功能的性能优化
  • 原文地址:https://www.cnblogs.com/zhangxiaochn/p/11211128.html
Copyright © 2020-2023  润新知