Next主题(Hexo)

作者: Alien的小窝 | 来源:发表于2016-09-22 01:19 被阅读6847次

    Hexo 有三种默认布局:post , page 和 draft
    它们分别对应不同的路径,而您自定义的其他布局和post
    相同,都将储存到 source/_posts文件夹。
    也同时只有这个会被发布到服务器

    配置文件_config.yml 有两个
    前者称为 站点配置文件, 后者称为 主题配置文件。

    添加头像
    编辑 站点配置文件, 新增字段 avatar, 值设置成头像的链接地址。其中,头像的链接地址可以是:

    • 方式1
      将头像放置主题目录下的 source/uploads/ (新建uploads目录若不存在)
      配置为:avatar: /uploads/avatar.png

    或者 放置在 source/images/ 目录下
    配置为:avatar: /images/avatar.png

    • 方式2


      Paste_Image.png

    设置语言

    修改后网站图标都变成了中文字体

    Paste_Image.png

    编辑站点配置文件
    English en language: en
    简体中文 zh-Hans language: zh-Hans
    如:

    Paste_Image.png

    作者昵称,站点描述

    均为编辑站点配置文件

    Paste_Image.png Paste_Image.png

    next还有主题可以设置

    Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
    Mist - Muse 的紧凑版本,整洁有序的单栏外观
    Pisces - 双栏 Scheme,小家碧玉似的清新

    Scheme 的切换通过更改 主题配置文件

    #scheme: Muse
    #scheme: Mist
    scheme: Pisces
    

    设置 下面 侧栏 的位置

    通过修改 主题配置文件 中的 sidebar
    字段来控制侧栏的行为

    Paste_Image.png

    注意 目前仅 Pisces Scheme 支持 position

    sidebar:
      # Sidebar Position, available value: left | right
      #position: left            //控制sideba的位置
      position: right
    
      # Sidebar Display, available value:
      #  - post    expand on posts automatically. Default.
      #  - always  expand for all pages automatically
      #  - hide    expand only when click on the sidebar toggle icon.
      #  - remove  Totally remove sidebar including sidebar toggler.
      display: post               //控制sidebar的显示时机 
      #display: always
      #display: hide
      #display: remove
    
    
    
    post 
    - 默认行为,在文章页面(拥有目录列表)时显示
    always
     - 在所有页面中都显示
    hide
     - 在所有页面中都隐藏(可以手动展开)
    remove
     - 完全移除
    

    设置 菜单(重点)

    菜单配置包括两个部分,

    • 第一是菜单项(名称和链接)

    • 第二是菜单项的显示文本

    • 第三是菜单项对应的图标

    NexT 使用的是 Font Awesome 提供的图标

    一 菜单映射的链接

    修改主题配置文件

    menu:
      home: /
      archives: /archives
      #about: /about
      #categories: /categories
      tags: /tags
      #commonweal: /404.html
    

    二 菜单显示文本

    (第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用 这个名称(如home) 查找对应的语言翻译,并提取显示文本)

    这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml
    ({language}
    为你所使用的语言)。

    menu:
      home: 首页
      archives: 归档
      categories: 分类
      tags: 标签
      about: 关于
      search: 搜索
      commonweal: 公益404
      something: 有料
    

    自定义菜单

    以简体中文为例,若你需要添加一个菜单项,比如 something。

    1. menu
      something : /something 
     2. menu (比如主题目录下的language目录下的zh-Hans.yml)
      something: 有料
    3. 设置图标
    

    那么就需要修改简体中文对应的翻译文件 languages/zh-Hans.yml,在 menu
    字段下添加一项:
    something: 有料

    三 设置菜单的图标

    此设定格式是 item name: icon name

    icon name 是 Font Awesome 图标的 名字

    menu_icons:
      enable: true   // 是否显示图标
      # Icon Mapping.
      home: home
      about: user
      categories: th
      tags: tags
      archives: archive
      commonweal: heartbeat
    

    item name 这3步骤都会用到 也就是键

    设置社交链接

    Paste_Image.png Paste_Image.png

    和设置Menu类似
    因为仅仅配置了一个 Github链接,故仅仅显示一个

    建立页面

    直接在根目录的source路径下,新建一个404.html文件,就可以了
    直接在根目录的source路径下,新建一个404.html文件,就可以了
    然后可以配置 menu 映射下就可以在 上面显示

    love: /404.html

    Paste_Image.png

    当然 通过
    hexo new page "love"
    会在source目录下生成一个文件夹
    source/love/index.md
    这也是建立页面的一种方式

    添加Menu时候映射
    love: /love 即可(localhost:4000/love 实际上访问是localhost:4000/love/index.html)

    友情链接

    Paste_Image.png
    # Blogrolls
    links_title: 友情链接
    #links_layout: block
    #links_layout: inline
    links:
      Java学习天地: https://wangli0.github.com
      ruulai.com: https://wangli0.github.com
      视听中国: https://wangli0.github.com
    
    
    

    绚丽的图片文章

    可能有人对这个
    Reading页面中图片的fancybox
    效果感兴趣,这个是怎么做的呢。
    很简单,只需要在你的文章*.md文件的头上添加 photos 项即可,然后一行行添加你要展示的照片:

    layout: photo
    title: 我的阅历
    date: 2085-01-16 07:33:44
    tags: [hexo]
    photos:
     - http://bruce.u.qiniudn.com/2013/11/27/reading/photos-0.jpg
     - http://bruce.u.qiniudn.com/2013/11/27/reading/photos-1.jpg
    

    经过测试,文件头上的layout: photo可以省略。

    不想每次都手动添加怎么办?同样的,打开您的
    hexo/scaffolds/photo.md

    ---
    layout: {{ layout }}
    title: {{ title }}
    date: {{ date }}
    tags: 
    photos: 
    ---
    

    然后每次可以执行带layout的new命令生成照片文章:
    hexo new photo "photoPostName" #新建照片文章

    如 :

    ---
    layout: photo
    title: girls
    date: 2016-12-21 14:58:55
    tags:
    photos:
      - http://bruce.u.qiniudn.com/2013/11/27/reading/photos-0.jpg
      - http://bruce.u.qiniudn.com/2013/11/27/reading/photos-1.jpg
    
    ## girls looks well
    测试...
    
    

    小问题

    Paste_Image.png

    此列表的多少与 文章编写时候添加的标签和分类有关,自动添加
    无需我们操心

    文章中添加标签或分类
    在文章中点击或者标签或分类跳转没问题
    但是自己配置显示menu的分类和标签跳转找不到路径的问题

    注意点

    布局(Layout)
    Hexo 有三种默认布局:post、page 和 draft,
    它们分别对应不同的路径,而您自定义的其他布局和post
    相同,都将储存到 source/_posts
    文件夹。

    模版(Scaffold)
    在新建文章时,Hexo 会根据 scaffolds
    文件夹内相对应的文件来建立文件,例如:
    $ hexo new photo "My Gallery

    在执行这行指令时,Hexo 会尝试在 scaffolds
    文件夹中寻找 photo.md,并根据其内容建立文章

    以下是您可以在模版中使用的变量:

    Paste_Image.png

    添加 类别和tags列表 (wen)

    添加标签


    hexo new page tags
    确认站点配置文件里有tag_dir: tags
    确认主题配置文件里有tags: /tags
    编辑站点的source/tags/index.md,添加

    title: tags
    date: 2015-10-20 06:49:50
    type: "tags"
    comments: false


    • 添加分类
      hexo new page categories
      确认站点配置文件里有category_dir: categories
      确认主题配置文件里有categories: /categories
      编辑站点的source/categories/index.md,添加

    title: categories
    date: 2015-10-20 06:49:50
    type: "categories"
    comments: false

    问题解决:
    http://www.zhihu.com/question/29017171

    图片资源的使用

    Paste_Image.png

    source 文件夹下面的文件在执行 hexo g 后 会把source下的所有文件放在public 文件夹下面。
    public相等于网站根目录 \

    Paste_Image.png

    至于本地图片如何使用,如下所示

    ---
    layout: photo
    title: girls
    date: 2016-12-21 14:58:55
    tags:
    photos:
      - http://bruce.u.qiniudn.com/2013/11/27/reading/photos-0.jpg
      - http://bruce.u.qiniudn.com/2013/11/27/reading/photos-1.jpg
    ---
    
    ## girls looks well
    
    
    Paste_Image.png

    如何删除Hexo博客底部页脚

    如:

    Paste_Image.png

    找到/themes/next/layout/_partials/footer.swig文件
    内容如下:

    <div class="copyright" >
      {% set current = date(Date.now(), "YYYY") %}
      © {% if theme.since and theme.since != current %} {{ theme.since }} - {% endif %}
      <span itemprop="copyrightYear">{{ current }}</span>
      <span class="with-love">
        <i class="fa fa-heart"></i>
      </span>
      <span class="author" itemprop="copyrightHolder">{{ config.author }}</span>
    </div>
    
    <div class="powered-by">
      {{ __('footer.powered', '<a class="theme-link" href="https://hexo.io">Hexo</a>') }}
    </div>
    
    <div class="theme-info">
      {{ __('footer.theme') }} -
      <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
        NexT.{{ theme.scheme }}
      </a>
    </div>
    
    

    删除class 为powered-by的div和theme-info的div即可


    最终内容

    <div class="copyright" >
      {% set current = date(Date.now(), "YYYY") %}
      © {% if theme.since and theme.since != current %} {{ theme.since }} - {% endif %}
      <span itemprop="copyrightYear">{{ current }}</span>
      <span class="with-love">
        <i class="fa fa-heart"></i>
      </span>
      <span class="author" itemprop="copyrightHolder">{{ config.author }}</span>
    </div>
    
    

    相关文章

      网友评论

      本文标题:Next主题(Hexo)

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