美文网首页Hexo开源工具技巧
Hexo even主题博客配置

Hexo even主题博客配置

作者: 咻咻ing | 来源:发表于2018-08-14 20:01 被阅读8次

    按照博客 使用Gitee+Hexo搭建个人博客 的教程,我们已经成功在Gitee上搭建完成了自己的博客,但是这个博客还是比较简陋的。
    接下来讲介绍 如何开始写作Even主题的常用配置

    如何开始写作

    博客搭建完成,虽然功能很简单,但是已经可以开始写作。

    • 新建文章
      使用命令来新建一篇文章:

      $ hexo new [layout] <title>
      

      layout 是文章的布局,默认为post,可以先不写。
      title 是文章的标题,也是文件的名字,存储在source/_posts下。
      使用MarkDown编辑器打开文件就可以开始写作了。

    • Front-matter 设置
      Front-matter 是文章最上方以 --- 分隔的区域,用于指定文章的变量设置,举例来说:

      title: Hello World
      date: 2013/7/13 20:46:25
      ---
      

      以下是预先定义的参数,您可在模板中使用这些参数值并加以利用。

      参数 描述 默认值
      layout 布局
      title 标题
      date 建立日期 文件建立日期
      updated 更新日期 文件更新日期
      comments 开启文章的评论功能 true
      tags 标签 (不适用于分页)
      categories 分类 (不适用于分页)
      permalink 覆盖文章网址
    • 文章分类和标签
      只有文章支持分类和标签,您可以在 Front-matter 中设置。在其他系统中,分类和标签听起来很接近,但是在 Hexo 中两者有着明显的差别:分类具有顺序性和层次性,也就是说 Foo, Bar 不等于 Bar, Foo;而标签没有顺序和层次。设置示例:

      categories:
      - Diary
      tags:
      - PS3
      - Games
      

      说明:文章分类和标签的设置,会自动归档的菜单的分类和标签中。

    • 文章截断
      在文章内容中添加 即可在首页显示时只显示其之上的内容。
      并且会在 添加一个 Read more 的链接。

    • 自定义文章简述
      可在文章头信息中添加 description 字段,并填写自定义的文章简述。
      就可以在首页显示文章简述而不显示文章内容。

    Even主题常用配置

    我们博客搭建完成后Hexo的目录结构如下:

    .
    ├── _config.yml
    ├── package.json
    ├── scaffolds
    ├── source
    |   ├── _drafts
    |   └── _posts
    ├── themes
    |   ├── even
    |   └── landscape
    

    我们Even主题的配置则主要在even目录下进行,配置文件_config.yml,目录结构如下:

    .
    ├── _config.yml
    ├── package.json
    ├── scaffolds
    ├── source
    |   ├── css
    |   └── js
    ├── languages
    |   ├── default.yml
    |   └── zh-cn.yml
    |──  layout
    
    • 修改主题颜色
      主题自带了 5 种可选的颜色:

      image
      修改主题配置文件中 theme 字段的 color 属性可改变主题色:
      # ===========================================
      # Theme Settings
      # ===========================================
      # theme styling
      # color: Default | Mint Green | Cobalt Blue | Hot Pink | Dark Violet
      theme:
        color: Default
      

      除了能够修改为主题自带的 5 种颜色之外,还可以使用自定义的其他颜色。
      source/css/_custom/_custom.scss 中添加样式变量 $theme-color 修改主题色。

      $theme-color: #xxxxxx;
      

      同时需要修改 $deputy-color 主题副颜色,该值主要使用在代码块背景以及文章目录。

      $deputy-color: #xxxxxx;
      

      _variables.scss 中的样式变量都可以在 _custom.scss 中进行覆盖,从而自定义主题样式。

    • 添加分类页
      使用命令新建一个 categories 页面:

      hexo new page categories
      

      编辑生成的 categories/index.md 文件,设置布局为 categories:

      title: categories
      layout: categories
      

      默认开启评论(如果使用了多说或 Disqus),添加 comments 字段并设置为 false 可关闭。

      在主题配置文件(_config.yml)中添加链接:

      # ===========================================
      # Menu Settings
      # ===========================================
      menu:
        Home: /
        Archives: /archives/
        Categories: /categories/
      
    • 添加标签页
      使用命令新建一个 tags 页面:

      hexo new page tags
      

      编辑生成的 tags/index.md 文件,设置布局为 tags:

      title: tags
      layout: tags
      

      默认开启评论,添加 comments 字段并设置为 false 可关闭。

      在主题配置文件(_config.yml)中添加链接:

      # ===========================================
      # Menu Settings
      # ===========================================
      menu:
        Home: /
        Archives: /archives/
        Tags: /tags
      
    • 添加自定义页面
      使用命令新建一个自定义页面(以添加关于页为例):

      hexo new page about
      

      编辑生成的 about/index.md 文件,设置布局为 page:

      title: about
      layout: page
      

      关于页面的内容,个人相关介绍也是在此页面进行编辑。
      默认开启评论(如果使用了多说或 Disqus),添加 comments 字段并设置为 false 可关闭。

      在主题配置文件(_config.yml)中添加链接:

      # ===========================================
      # Menu Settings
      # ===========================================
      menu:
        Home: /
        Archives: /archives/
        About: /about
      

      在使用的语言文件下添加对应的字段(默认为 languages/default.yml):

      menu: 
        home: Home
        archives: Archives
        tags: Tags
        categories: Categories
        about: About
      
    • 添加文章访问量统计
      文章访问量统计通过 LeadCloud 支持

      配置LeanCloud
      打开LeanCloud官网,进入注册页面注册。完成邮箱激活后,点击头像,进入控制台页面

      创建新应用
      创建一个新应用,并创建名称为 Counter 的 Class(注意权限选择无限制)

      配置 app_id 与 app_key
      在你所创建的应用的 设置->应用Key 中查看 app_id 与 app_key

      修改主题配置文件 _config.yml,填入 app_idapp_key:

      # LeanCloud
      leancloud:
        app_id:
        app_key:
      

      设置 Web 安全域名
      在你所创建的应用的 设置->安全中心 中设置 Web 安全域名 添加你的域名到 Web 安全域名中(若本地服务也想看到访问量,添加 http://localhost:4000/

    • 设置文章打赏
      通过主题配置文件中的 reward 字段开启/关闭:

      reward:
        enable: true
        qrCode: 
          wechat: /image/reward/wechat.png
          alipay: /image/reward/alipay.png
      

      支持微信以及支付宝,修改 qrCode 下对应的二维码图片链接,也可以直接设置成图片的网络链接。

      当开启打赏功能时,可通过文章 Markdown 头部:

      reward: false
      

      关闭该篇文章的打赏。反之,当打赏功能关闭时,可以在文章中单独开启。

    • 设置底部社交链接
      目前支持:Email, Stack Overflow, Twitter, Facebook, Github, 微博以及知乎

      修改主题配置文件中的 social 字段下的各个字段开启,为空时即为关闭:

      social:
        email: your@email.com
        stack-overflow:
        twitter:
        facebook:
        github: 
        weibo: 
        zhihu: 
      

      主题使用的是自定义的 iconfont 图标库。

    • 设置文章版权
      修改主题配置文件中的 copyright 字段开启/关闭:

      copyright:
        enable: true
        # https://creativecommons.org/
        license: '本文采用<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">知识共享署名-非商业性使用 4.0 国际许可协议</a>进行许可'
      

      默认显示作者,来源,链接以及版权说明,版权说明可通过 copyright.lincese 自定义。

      copyright.license 的值可以是 HTML

      当文章版权信息开启时,可通过文章 Markdown 头部:

      copyright: false
      

      进行单篇文章版权信息的关闭。

    至此博客基本配置好了,大家可以愉快的写博客啦!!!
    配置完成的博客效果可以参考:https://xiuxiuing.gitee.io/blog/

    相关文章

      网友评论

        本文标题:Hexo even主题博客配置

        本文链接:https://www.haomeiwen.com/subject/gacbbftx.html