NexT主题配置

作者: 焰火青春 | 来源:发表于2017-09-21 20:26 被阅读286次

    1、安装NexT

    1.1、下载主题:

    • 通过clone最新版本:(推荐)
      之后的更新就可以使用git pull来更新,而不用再次下载压缩包替换
    cd your-hexo-site     #切换到站点目录
    git clone https://github.com/iissnan/hexo -theme-next themes/next  
    
    • 下载压缩包:
      NexT版本的发布页面
      选择下载 Download 区域下的 Source Code (zip) 到本地
      解压重命名为next,放置到thems目录下

    1.2、 启用主题 :

    打开 站点配置文件, 找到 theme 字段,并将其值更改为 next

    theme: next    
    

    在切换主题之后、验证之前, 我们最好使用 hexo clean 来清除 Hexo 的缓存

    1.3、 验证主题:

    首先启动 Hexo 本地站点,并开启调试模式(即加上 --debug),整个命令是 hexo s --debug。 在服务启动的过程,注意观察命令行输出是否有任何异常信息,如果你碰到问题,这些信息将帮助他人更好的定位错误。 当命令行输出中提示出:

    INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.  
    

    此时即可使用浏览器访问 http://localhost:4000,检查站点是否正确运行。

    2、主题设定

    主题特性

    目前 NexT 支持三种特性,通过修改Scheme可以选择特性,他们分别是:

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

    打开主题配置文件,搜索 scheme 关键字。 你会看到有三行 scheme 的配置,将你需用启用的 scheme 前面注释 # 去除即可。

    #scheme: Muse
    #scheme: Mist
    scheme: Pisces  
    

    设置语言

    编辑站点配置文件,将language设置成你需要的语言,以简体中文为例:

    language: zh-Hans  
    

    目前NexT支持的语言如以下表所示:

    支持的语言

    设置菜单

    菜单配置包括三个部分,第一为菜单项(名称和链接),第二是菜单项显示的文本,第三是菜单项对应的图标,NexT 使用的是 Font Awesome提供的图标。

    编辑主题配置文件,找到menu字段:

    • 设定菜单项名称
    menu:
      home: / || home
      archives: /archives/ || archive
      categories: /categories/ || th
      #schedule: /schedule
      tags: /tags/ || tags
      about: /about/ || user
      #search: /search/
      commonweal: /404.html/ || heartbeat
      #sitemap: /sitemap.xml   
    

    此处填坑:
    item_name后除了名称外,还需要跟一个对应名称图标名字,比如archive的图标名为archive,如若不然图标将显示为?(默认)。
    archives: /archives/ || archive

    NexT默认的菜单项有(标注 的项表示需要手动创建这个页面):

    菜单项设定值及显示文本
    • 设置菜单的显示文本
      若你需要添加一个菜单项,首先要设定菜单项的名称,再设定菜单项的显示文本,最后设定菜单项图标;比如添加一个something,那么就需要到next目录下的language/zh-Hans.yml(以简体中文为例)文件中,找到menu字段,添加一项:
    menu:
      home: 首页
      archives: 归档
      categories: 分类
      tags: 标签
      about: 关于
      search: 搜索
      commonweal: 公益404
      something: 有料        #新添加的
    
    • 设定菜单项图标
      对应字段为menu_icons,此设定格式是 item name: icon name,其中 item name 与上一步所配置的菜单名字对应,icon name 是 Font Awesome 图标的 名字。而 enable 可用于控制是否显示图标,你可以设置成 false 来去掉图标。
    menu_icons:
      enable: true
      # Icon Mapping.
      home: home
      archives: archive
      categories: th
      tags: tags
      about: user
      commonweal: heartbeat
      #search: search  
    

    设置侧栏

    可以通过修改 主题配置文件 中的 sidebar 字段来控制侧栏的行为。侧栏的设置包括两个部分,其一是侧栏的位置, 其二是侧栏显示的时机。

    • 设置侧栏的位置,修改sidebar.position值
    sidebar:  
      position: left     #设定在左边显示
      #position: right  
    
    • 设定侧栏显示时机,修改sdiebar.display的值
    #display: post         #默认行为,在文章页面(拥有目录列表)时显示
    #display: always       #再所以页面都显示
      display: hide        #在所有页面中都隐藏(可以手动展开)
    #display: remove       #完全移除
    

    设置头像

    编辑主题配置文件,修改avatar字段,值设置为头像图片的链接地址。

    avatar: http://example.com/avatar.png  
    

    也可以将图片放置到theme/source/images目录下,命名为avatar.png:

    avatar: /images/avatar.png     #配置
    

    设置作者、描述

    编辑站点配置文件

    # Site
    title:    #博客主页名字
    subtitle:  #副标题(第二个名字)
    description:  #描述
    author:         #作者
    language: zh-Hans
    timezone:    #时区,可不设置
    

    添加标签页面

    • 新建页面:
      前面通过修改next主题下的_config.yml文件中的menu选项,可以在主页面的菜单栏添加标签选项,但是此时点击标签,跳转的页面会显示page not found。
    cd your-hexo-site  
    hexo new page tags    #新建标签页面
    

    输入命令后,在xx.github.io/source会生成一个tags文件夹,其中有个index.md文件。

    • 设置页面类型:
      修改index.md,添加type:tags
    ---
    title: tags
    date: 2016-11-15 19:10:05
    type:  tags
    ---  
    
    • 设置文章的标签:
      当要为某篇文章添加标签时,只需在文章开头设置相应标签即可。
    ---
    title: test1    #文章标签
    date: 2017-09-20 13:29:11
    tags:         #标签
      - test1
      - one
      - two
    categories: 测试     #分类
    ---   
    ps:注意这是在新建文章里添加标签  
    
    标签显示效果

    添加分类、关于页面

    cd your-hexo-site  
    hexo new page categories/about  
    --------------------------------------  
    修改index.md文件中type类型分别为categories和about即可   
    
    • 文章添加分类
    ---
    title: test1
    date: 2017-09-20 13:29:11
    tags:
      - test1
      - one
      - two
    categories: 测试     #添加为测试类
    ---  
    ps:注意这是在新建文章里添加分类  
    
    • 添加关于我
    ---
    title: 关于我
    date: 2017-09-17 10:22:54  
    type: about 
    comments: false
    ---
    一只学习pyhton的小菜鸟,欢迎分享知识。  
    QQ:12345678  
    Email:12345678@qq.com  
    ps:注意这是在about文件夹里修改index.md文件
    

    效果如下:

    关于我

    添加本地搜索功能

    • 安装 hexo-generator-searchdb,在站点的根目录下执行以下命令:
    npm install hexo-generator-searchdb --save  
    
    • 编辑 站点配置文件,新增以下内容到任意位置:
    search:
      path: search.xml
      field: post
      format: html
      limit: 10000  
    
    • 编辑 主题配置文件,启用本地搜索功能:
    # Local search
    local_search:
      enable: true    #true开启
    

    效果如下:

    本地搜索

    3、 引入第三方功能

    加入数据统计与分析功能

    • 注册百度统计:
      在这里使用的是百度统计进行数据统计和分析,
      点击百度统计,注册站长账户,并填写域名,完成注册登录。
    注册站长账户
    • 在跳转的页面中,复制hm.js后的id值:
    hm.js的id值
    • 添加baidu_analytics字段:
      编辑 主题配置文件, 修改字段 baidu_analytics,值设置成你的百度统计脚本 id

    参考文章:
    NexT官网文档
    Hexo的Next主题配置
    基于Hexo+Node.js+github+coding搭建个人博客——进阶篇(从入门到入土)
    nMask's Blog
    hexo参考文档

    相关文章

      网友评论

        本文标题:NexT主题配置

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