Hexo的Next主题详细配置

next 主题修改

next风格选择

next有四种风格,在站点配置文件搜索字段Scheme Settings可以看到,
根目录themes\next themes\next

# Scheme Settings
# ---------------------------------------------------------------
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

我这里用的是四种:Gemini

中文设置

check hexo根目录下的_config.yml文件。

language行设置为zh-CN(中文)zh-EN(英文 注意 冒号后面要多一个空格

# Sit
language: zh-C

注意如果修改后不起作用,请来到theme/next/languages/目录下查看是否有zh-CN.yml(zh-EN.yml)的文件,如果没有,请直接到next的Github下载相应文件添加即可。

next菜单设置

比如可以看到我的主页有首页、留言、分类、归档、标签等菜单,
在站点配置文件下搜索menu:,可以看到

menu:
  home: / || home
  about: /about/ || user
  message: /message/ || comment
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

home就是首页;message就是留言…一开始只有首页和归档,其余的需要我们手动创建,
在站点根目录下打开命令行,输入hexo new page “about”
并在主题配置文件menu:字段处取消对about的注释
重新部署我们就可以看到主页有关于这个菜单了,其他的类似,
修改D:\hexoblog\source\about\index.md,就可以修改关于界面了
about: /about/ || user中的user是指关于菜单附件的图标用的是图标库里面名为user的图标

添加搜索

安装插件
在自己博客根目录下(我的目录:D:\workspace\hexo),执行如下命令

cnpm install hexo-generator-searchdb --save

修改站点配置文件
修改根目录下的_config.yml(我的目录:D:\workspace\hexo_config.yml),在最底部添加如下配置

search:
  path: search.xml
  field: post
  format: html
  limit: 10000
_config.yml

修改主题配置文件
修改主体下的themes\next_config.yml配置文件(我的目录:D:\workspace\hexo\themes\next_config.yml),搜索local_search,修改enable为true

local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1

预览效果
开启本地server

hexo clean
hexo g
hexo s
访问:http://localhost:4000/ ,即可看到想要的搜索功能了

设置某篇文章置顶

前面的流程走完后,只需要在写文章的时候在文章前面加入top: true
或者top: 100(100只是个例子,数字越大越靠前),就能实现置顶效果了

常见错误

本地预览和同时发布到远程的浏览结果不一致

这是由缓存造成的,需要先hexo clean,再hexo g -d部署到远程

实现文章首页”分类于”、”阅读次数”等效果

在根目录下打开命令行
依次输入以下命令:

npm install hexo-wordcount --save
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save   

打开主题配置文件
打开相关开关:



post_wordcount:
    item_text: true
    wordcount: true
    min2read: true
    totalcount: true

打开…/themes/next/layout/_macro/post.swig文件
把里面的代码用下面的代码替换:

{% macro render(post, is_index, post_extra_class) %}

  {% set headlessPost = Array.prototype.indexOf.call(['quote', 'picture'], post.type) > -1 %}

  {% set post_class = 'post post-type-' + post.type | default('normal') %}
  {% if post_extra_class > 0 %}
    {% set post_class = post_class + ' ' + post_extra_class | default('') %}
  {% endif %}
  {% if post.sticky > 0 %}
    {% set post_class = post_class + ' ' + 'post-sticky' %}
  {% endif %}

  
{##################} {### POST BLOCK ###} {##################}
{% if not headlessPost %}
{# Not to show title for quote posts that do not have a title #} {% if not (is_index and post.type === 'quote' and not post.title) %} <{% if theme.seo %}h2{% else %}h1{% endif %} class="post-title{% if post.direction && post.direction.toLowerCase() === 'rtl' %} rtl{% endif %}" itemprop="name headline">{# #}{# Link posts #}{# #}{% if post.link %} {% if post.sticky > 0 %} {{ post.sticky }} {% endif %} {% else %}{# #}{% if is_index %} {% if post.sticky > 0 %} {% endif %} {# #}{% else %}{{ post.title }}{% endif %}{# #}{% endif %}{# #} {% endif %}
{% endif %} {#################} {### POST BODY ###} {#################}
{# Gallery support #} {% if post.photos and post.photos.length %}
{% set COLUMN_NUMBER = 3 %} {% for photo in post.photos %} {% if loop.index0 % COLUMN_NUMBER === 0 %}
{% endif %} {% if loop.index0 % COLUMN_NUMBER === 2 %}
{% endif %} {% endfor %} {# Append end tag for `post-gallery-row` when (photos size mod COLUMN_NUMBER) is less than COLUMN_NUMBER #} {% if post.photos.length % COLUMN_NUMBER > 0 %}
{% endif %}
{% endif %} {% if is_index %} {% if post.description and theme.excerpt_description %} {{ post.description }}
{{ __('post.read_more') }} »
{% elif post.excerpt %} {{ post.excerpt }}
{{ __('post.read_more') }} »
{% elif theme.auto_excerpt.enable %} {% set content = post.content | striptags %} {{ content.substring(0, theme.auto_excerpt.length) }} {% if content.length > theme.auto_excerpt.length %}...{% endif %}
{{ __('post.read_more') }} »
{% else %} {% if post.type === 'picture' %} {{ post.content }} {% else %} {{ post.content }} {% endif %} {% endif %} {% else %} {{ post.content }} {% endif %}
{#####################} {### END POST BODY ###} {#####################}
{% if not is_index %} {% include 'my-copyright.swig' %} {% endif %}
{% if theme.wechat_subscriber.enabled and not is_index %}
{% include 'wechat-subscriber.swig' %}
{% endif %} {% if (theme.alipay or theme.wechatpay or theme.bitcoin) and not is_index %}
{% include 'reward.swig' %}
{% endif %} {% if theme.post_copyright.enable and not is_index %}
{% include 'post-copyright.swig' with { post: post } %}
{% endif %}
{% if not is_index %} {% include 'passage-end-tag.swig' %} {% endif %}
{% if post.tags and post.tags.length and not is_index %} {% endif %} {% if not is_index %} {% if theme.rating.enable or (theme.vkontakte_api.enable and theme.vkontakte_api.like) or (theme.facebook_sdk.enable and theme.facebook_sdk.like_button) or (theme.needmoreshare2.enable and theme.needmoreshare2.postbottom.enable) %}
{% if theme.rating.enable %}
{% endif %} {% if (theme.vkontakte_api.enable and theme.vkontakte_api.like) or (theme.facebook_sdk.enable and theme.facebook_sdk.like_button) %} {% endif %} {% if theme.needmoreshare2.enable and theme.needmoreshare2.postbottom.enable %} {% if (theme.vkontakte_api.enable and theme.vkontakte_api.like) or (theme.facebook_sdk.enable and theme.facebook_sdk.like_button) %} {% endif %}
{% endif %}
{% endif %} {% endif %} {% if not is_index and (post.prev or post.next) %}
{% if post.next %} {% endif %}
{% if post.prev %} {% endif %}
{% endif %} {% set isLast = loop.index % page.per_page === 0 %} {% if is_index and not isLast %}
{% endif %}
{######################} {### END POST BLOCK ###} {######################} {% endmacro %}

你可能感兴趣的:(Hexo,Next)