• Hexo下Next主题配置与优化


    使用Next主题

    • 在这里Downloads Next主题代码
    • 将下载的代码放在myBlog/theme/next目录下
    • 设置站点myBlog/_config.yml的theme字段值为next
    • 生成新页面hexo g
    • 开启服务hexo s –debug
    • 发布代码hexo d

    注:此时登录网站,发现是空白的,打开控制台,提示很多vendors目录下的文件404,解决办法是将next主题下即myBlog/themes/next/source下的vendors目录名改为lib,并修改myBlog/themes/next/_config.yml的_internal: vendors改为_internal: lib。

    参考:iissnan的回答

    主题配置

    主题风格设定

    通过修改next主题下的_config.yml的scheme字段,配置不同的风格。

    # Schemes
    scheme: Muse
    #scheme: Mist
    #scheme: Pisces

    本站点使用的是默认的Muse,显示效果如下:
    hexo默认主题

    菜单设置

    通过修改next主题下的_config.yml的menu字段,选定显示的菜单项。

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

    其中,home代表主页,categories代表分类页,about代表关于页面,archives代表归档页,commonweal代表404页面(page not found时候显示的页面)。

    菜单项文本修改是在对next主题下的language文件夹下的文件进行修改,若当前语言是简体中文,直接修改language/zh-Hans.yml里的对应字段即可。

    本站点显示主页,分类页,关于页面和归档页。

    头像设置

    在主题下的source/images/下放置头像文件avatar.gif即可。

    设置文章代码主题

    Next主题总共支持5种主题,默认主题是白色的normal。通过修改next主题下的_config.yml的highlight字段,来设置代码主题。

    本站点使用的是night主题。即令highlight为night。

    添加标签页面

    前面通过修改next主题下的_config.yml文件中的menu选项,可以在主页面的菜单栏添加标签选项,但是此时点击标签,跳转的页面会显示page not found。

    添加标签页面的具体方法是:

    • 新建页面
      输入如下命令:
    $ cd myBlog
    $ hexo new page tags

    输入命令后,在myBlog/source下会新生成一个新的文件夹tags,在该文件夹下会有一个index.md文件。

    • 设置页面类型
      在上步新生成的myBlog/source/tags/index.md中添加type: “tags”,index.md文件内容如下:
    ---
    title: tags
    date: 2016-11-15 19:10:05
    type: "tags"
    ---
    • 设置具体文章的tags
      当要为某一篇文章添加标签,只需在myBlog/source/_post目录下的具体文章的tags中添加标签即可,如:
    ---
    title: 基于Hexo和Github搭建博客
    date: 2016-11-09
    tags: [npm, hexo, github]
    categories: 搭建博客
    ---

    本站添加为标签后的效果如下:
    添加标签后

    添加分类页面

    步骤与添加标签页面类似,具体如下:

    • 新建页面
      输入如下命令:
    $ cd myBlog
    $ hexo new page categories
    

    输入命令后,在myBlog/source下会新生成一个新的文件夹categories,在该文件夹下会有一个index.md文件。

    • 设置页面类型
      在上步新生成的myBlog/source/categories/index.md中添加type: “categories”,index.md文件内容如下:
    ---
    title: categories
    date: 2016-11-15 19:11:13
    type: "categories"
    ---
    • 设置具体文章的categories
      当要为某一篇文章添加分类,只需在myBlog/source/_post目录下的具体文章的categories中添加分类即可,如:
    ---
    title: 基于Hexo和Github搭建博客
    date: 2016-11-09
    tags: [npm, hexo, github]
    categories: 搭建博客
    ---

    本站添加为标签后的效果如下:
    分类

    添加关于我页面

    步骤与添加标签页面类似,具体如下:

    • 新建页面
    $ cd myBlog
    $ hexo new page about

    输入命令后,在myBlog/source下会新生成一个新的文件夹about,在该文件夹下会有一个index.md文件。

    • 修改about/index.md
      本站点index.md如下:
    ---
    title: about
    date: 2016-11-15 19:08:50
    ---
    ## 关于我
    一只学习后端的小菜鸟,欢迎分享知识。

    参考链接

  • 相关阅读:
    2级联动下拉列表写法
    select选中获取索引三种写法
    判断设备-安卓|苹果|微信
    限制输入字符个数的jq插件
    面试题:1.清空字符串前后的空格;2.找出出现最多的字符
    css3玩转各种效果【资源】
    利用jquery.touchSwipe.js实现的移动滑屏效果。
    【leetcode刷题笔记】Letter Combinations of a Phone Number
    【leetcode刷题笔记】Linked List Cycle
    【leetcode刷题笔记】Length of Last Word
  • 原文地址:https://www.cnblogs.com/haifeiWu/p/9079580.html
Copyright © 2020-2023  润新知