Hexo的Next主题详细配置

你的名字 2022-04-25 09:48 248阅读 0赞

# 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/][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 %}
    
      <article class="{
       { post_class }}" itemscope itemtype="http://schema.org/Article">
      {##################}
      {### POST BLOCK ###}
      {##################}
      <div class="post-block">
        <link itemprop="mainEntityOfPage" href="{
       { config.url }}{
       { url_for(post.path) }}">
    
        <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
          <meta itemprop="name" content="{
       { theme.author }}">
          <meta itemprop="description" content="{
       { theme.signature }}">
          <meta itemprop="image" content="{
       { url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}">
        </span>
    
        <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
          <meta itemprop="name" content="{
       { config.title }}">
        </span>
    
        {% if not headlessPost %}
          <header class="post-header">
    
            {# 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 }}
                    <span class="post-sticky-flag" title="{
       { __('post.sticky') }}">
                      <i class="fa fa-thumb-tack"></i>
                    </span>
                  {% endif %}
                  <a class="post-title-link post-title-link-external" target="_blank" href="{
       { url_for(post.link) }}" itemprop="url">
                    {
       { post.title or post.link }}
                    <i class="fa fa-external-link"></i>
                  </a>
                {% else %}{#
                #}{% if is_index %}
                    {% if post.sticky > 0 %}
                      <span class="post-sticky-flag" title="{
       { __('post.sticky') }}">
                        <i class="fa fa-thumb-tack"></i>
                      </span>
                    {% endif %}
                    <a class="post-title-link" href="{
       { url_for(post.path) }}" itemprop="url">{#
                    #}{
       { post.title | default(__('post.untitled'))}}{#
                  #}</a>{#
                #}{% else %}{
       { post.title }}{% endif %}{#
              #}{% endif %}{#
            #}</{% if theme.seo %}h2{% else %}h1{% endif %}>
            {% endif %}
    
            <div class="post-meta">
    			{% if post.top %} 
    				<i class="fa fa-thumb-tack"></i> 
    				<font color=7D26CD>已置顶</font> 
    				<span class="post-meta-divider">|</span> 
    			{% endif %}
    
              <span class="post-time">
                {% if theme.post_meta.created_at %}
                  <span class="post-meta-item-icon">
                    <i class="fa fa-calendar-o"></i>
                  </span>
                  {% if theme.post_meta.item_text %}
                    <span class="post-meta-item-text">{
       { __('post.posted') }}:</span>
                  {% endif %}
                  <time title="{
       { __('post.created') }}" itemprop="dateCreated datePublished" datetime="{
       { moment(post.date).format() }}">
                    {
       { date(post.date, config.date_format) }}
                  </time>
                {% endif %}
    
                {% if theme.post_meta.created_at and theme.post_meta.updated_at %}
                  <span class="post-meta-divider">|</span>
                {% endif %}
    
                {% if theme.post_meta.updated_at %}
                  <span class="post-meta-item-icon">
                    <i class="fa fa-calendar-check-o"></i>
                  </span>
                  {% if theme.post_meta.item_text %}
                    <span class="post-meta-item-text">{
       { __('post.modified') }}:</span>
                  {% endif %}
                  <time title="{
       { __('post.modified') }}" itemprop="dateModified" datetime="{
       { moment(post.updated).format() }}">
                    {
       { date(post.updated, config.date_format) }}
                  </time>
                {% endif %}
              </span>
    		  
    		  
    
              {% if post.categories and post.categories.length and theme.post_meta.categories %}
                <span class="post-category" >
                {% if theme.post_meta.created_at or theme.post_meta.updated_at %}
                  <span class="post-meta-divider">|</span>
                {% endif %}
                  <span class="post-meta-item-icon">
                    <i class="fa fa-folder-o"></i>
                  </span>
                  {% if theme.post_meta.item_text %}                 
                    <span class="post-meta-item-text">{
       { __('post.in') }}:</span>
                  {% endif %}
                  {% for cat in post.categories %}
                    <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                      <a href="{
       { url_for(cat.path) }}" itemprop="url" rel="index">
                        <span itemprop="name">{
       { cat.name }}</span>
                      </a>
                    </span>
    
                    {% set cat_length = post.categories.length %}
                    {% if cat_length > 1 and loop.index !== cat_length %}
                      {
       { __('symbol.comma') }}
                    {% endif %}
                  {% endfor %}
                </span>
              {% endif %}
    
              {% if post.comments %}
                {% if (theme.duoshuo and theme.duoshuo.shortname) or theme.duoshuo_shortname %}
                  <span class="post-comments-count">
                    <span class="post-meta-divider">|</span>
                    <span class="post-meta-item-icon">
                      <i class="fa fa-comment-o"></i>
                    </span>
                    <a href="{
       { url_for(post.path) }}#comments" itemprop="discussionUrl">
                      <span class="post-comments-count ds-thread-count" data-thread-key="{
       { post.path }}" itemprop="commentCount"></span>
                    </a>
                  </span>
                {% elseif theme.facebook_comments_plugin.enable %}
                  <span class="post-comments-count">
                    <span class="post-meta-divider">|</span>
                    <span class="post-meta-item-icon">
                      <i class="fa fa-comment-o"></i>
                    </span>
                    <a href="{
       { url_for(post.path) }}#comments" itemprop="discussionUrl">
                      <span class="post-comments-count fb-comments-count" data-href="{
       { post.permalink }}" itemprop="commentCount">0</span> comments
                    </a>
                  </span>
                {% elseif theme.disqus.enable and theme.disqus.count %}
                  <span class="post-comments-count">
                    <span class="post-meta-divider">|</span>
                    <span class="post-meta-item-icon">
                      <i class="fa fa-comment-o"></i>
                    </span>
                    <a href="{
       { url_for(post.path) }}#comments" itemprop="discussionUrl">
                      <span class="post-comments-count disqus-comment-count"
                            data-disqus-identifier="{
       { post.path }}" itemprop="commentCount"></span>
                    </a>
                  </span>
                {% elseif theme.hypercomments_id %}
                
                  <span class="post-comments-count">
                    <span class="post-meta-divider">|</span>
                    <span class="post-meta-item-icon">
                      <i class="fa fa-comment-o"></i>
                    </span>
                    <a href="{
       { url_for(post.path) }}#comments" itemprop="discussionUrl">
                      <span class="post-comments-count hc-comment-count" data-xid="{
       { post.path }}" itemprop="commentsCount"></span>
                    </a>
                  </span>
                  
                {% elseif theme.changyan.enable and theme.changyan.appid and theme.changyan.appkey %}
                  <span class="post-comments-count">
                  <span class="post-meta-divider">|</span>
                  <span class="post-meta-item-icon">
                    <i class="fa fa-comment-o"></i>
                  </span>
                  {% if is_post() %}
                    <a href="{
       { url_for(post.path) }}#SOHUCS" itemprop="discussionUrl">
                      <span id="changyan_count_unit" class="post-comments-count hc-comment-count" data-xid="{
       { post.path }}" itemprop="commentsCount"></span>
                    </a>
                  {% else %}
                    <a href="{
       { url_for(post.path) }}#SOHUCS" itemprop="discussionUrl">
                      <span id="url::{
       { post.permalink }}" class="cy_cmt_count" data-xid="{
       { post.path }}" itemprop="commentsCount" ></span>
                    </a>
                  {% endif %}
                {% elseif is_post() and theme.gitment.enable and theme.gitment.mint and theme.gitment.count %}
                  <span class="post-comments-count">
                    <span class="post-meta-divider">|</span>
                    <span class="post-meta-item-icon">
                      <i class="fa fa-comment-o"></i>
                    </span>
                    <a href="{
       { url_for(post.path) }}#comments" itemprop="discussionUrl">
                      <span class="post-comments-count gitment-comments-count" data-xid="{
       { url_for(post.path) }}" itemprop="commentsCount"></span>
                    </a>
                  </span>
                {% elseif theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
                  <span class="post-comments-count">
                    <span class="post-meta-divider">|</span>
                    <span class="post-meta-item-icon">
                      <i class="fa fa-comment-o"></i>
                    </span>
    				<span class="post-meta-item-text">{
       { __('post.comments') }}:</span>
                    <a href="{
       { url_for(post.path) }}#comments" itemprop="discussionUrl">
                      <span class="post-comments-count valine-comment-count" data-xid="{
       { url_for(post.path) }}" itemprop="commentCount"></span>
                    </a>
                  </span>
                {% endif %}
              {% endif %}
    
              {# LeanCould PageView #}
              {% if theme.leancloud_visitors.enable %}
                 <span id="{
       { url_for(post.path) }}" class="leancloud_visitors" data-flag-title="{
       { post.title }}">
                   <span class="post-meta-divider">|</span>
                   <span class="post-meta-item-icon">
                     <i class="fa fa-eye"></i>
                   </span>
                   {% if theme.post_meta.item_text %}
                     <span class="post-meta-item-text">{
       {__('post.visitors')}}:</span>
                   {% endif %}
                     <span class="leancloud-visitors-count"></span>
                 </span>
              {% endif %}
    
              {% if not is_index and theme.busuanzi_count.enable and theme.busuanzi_count.page_pv %}
                <span class="post-meta-divider">|</span>
                <span class="page-pv">{
       { theme.busuanzi_count.page_pv_header }}
                <span class="busuanzi-value" id="busuanzi_value_page_pv" ></span>{
       { theme.busuanzi_count.page_pv_footer }}
                </span>
              {% endif %}
    
              {% if theme.post_wordcount.wordcount or theme.post_wordcount.min2read %}
                <div class="post-wordcount">
                  {% if theme.post_wordcount.wordcount %}
                    {% if not theme.post_wordcount.separated_meta %}
                      <span class="post-meta-divider">|</span>
                    {% endif %}
                    <span class="post-meta-item-icon">
                      <i class="fa fa-file-word-o"></i>
                    </span>
                    {% if theme.post_wordcount.item_text %}
                      <span class="post-meta-item-text">{
       { __('post.wordcount') }}:</span>
                    {% endif %}
                    <span title="{
       { __('post.wordcount') }}">
                      {
       { wordcount(post.content) }}字
                    </span>
                  {% endif %}
    
                  {% if theme.post_wordcount.wordcount and theme.post_wordcount.min2read %}
                    <span class="post-meta-divider">|</span>
                  {% endif %}
    
                  {% if theme.post_wordcount.min2read %}
                    <span class="post-meta-item-icon">
                      <i class="fa fa-clock-o"></i>
                    </span>
                    {% if theme.post_wordcount.item_text %}
                      <span class="post-meta-item-text">{
       { __('post.min2read') }} ≈</span>
                    {% endif %}
                    <span title="{
       { __('post.min2read') }}">
                      {
       { min2read(post.content) }}分钟
                    </span>
                  {% endif %}
                </div>
              {% endif %}
    
              {% if post.description and (not theme.excerpt_description or not is_index) %}
                  <div class="post-description">
                      {
       { post.description }}
                  </div>
              {% endif %}
    
            </div>
          </header>
        {% endif %}
    
        {#################}
        {### POST BODY ###}
        {#################}
        <div class="post-body{% if theme.han %} han-init-context{% endif %}{% if post.direction && post.direction.toLowerCase() === 'rtl' %} rtl{% endif %}" itemprop="articleBody">
    
          {# Gallery support #}
          {% if post.photos and post.photos.length %}
            <div class="post-gallery" itemscope itemtype="http://schema.org/ImageGallery">
              {% set COLUMN_NUMBER = 3 %}
              {% for photo in post.photos %}
                {% if loop.index0 % COLUMN_NUMBER === 0 %}<div class="post-gallery-row">{% endif %}
                  <a class="post-gallery-img fancybox"
                     href="{
       { url_for(photo) }}" rel="gallery_{
       { post._id }}"
                     itemscope itemtype="http://schema.org/ImageObject" itemprop="url">
                    <img src="{
       { url_for(photo) }}" itemprop="contentUrl"/>
                  </a>
                {% if loop.index0 % COLUMN_NUMBER === 2 %}</div>{% 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 %}</div>{% endif %}
            </div>
          {% endif %}
    
          {% if is_index %}
            {% if post.description and theme.excerpt_description %}
              {
       { post.description }}
              
              <div class="post-button text-center">
                <a class="btn" href="{
       { url_for(post.path) }}">
                  {
       { __('post.read_more') }} »
                </a>
              </div>
              
            {% elif post.excerpt  %}
              {
       { post.excerpt }}
              
              <div class="post-button text-center">
                <a class="btn" href="{
       { url_for(post.path) }}{% if theme.scroll_to_more %}#{
       { __('post.more') }}{% endif %}" rel="contents">
                  {
       { __('post.read_more') }} »
                </a>
              </div>
              
            {% 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 %}
              
              <div class="post-button text-center">
                <a class="btn" href="{
       { url_for(post.path) }}{% if theme.scroll_to_more %}#{
       { __('post.more') }}{% endif %}" rel="contents">
                  {
       { __('post.read_more') }} »
                </a>
              </div>
              
            {% else %}
              {% if post.type === 'picture' %}
                <a href="{
       { url_for(post.path) }}">{
       { post.content }}</a>
              {% else %}
                {
       { post.content }}
              {% endif %}
            {% endif %}
          {% else %}
            {
       { post.content }}
          {% endif  %}
        </div>
        {#####################}
        {### END POST BODY ###}
        {#####################}
    	<div>
          {% if not is_index %}
            {% include 'my-copyright.swig' %}
          {% endif %}
    	</div>
    
        {% if theme.wechat_subscriber.enabled and not is_index %}
          <div>
            {% include 'wechat-subscriber.swig' %}
          </div>
        {% endif %}
    
        {% if (theme.alipay or theme.wechatpay or theme.bitcoin) and not is_index %}
          <div>
            {% include 'reward.swig' %}
          </div>
        {% endif %}
    
        {% if theme.post_copyright.enable and not is_index %}
          <div>
            {% include 'post-copyright.swig' with { post: post } %}
          </div>
        {% endif %}
    	<div>
    		{% if not is_index %}
    		{% include 'passage-end-tag.swig' %}
    		{% endif %}
    	</div>
    
        <footer class="post-footer">
          {% if post.tags and post.tags.length and not is_index %}
            <div class="post-tags">
              {% for tag in post.tags %}
                <a href="{
       { url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {
       { tag.name }}</a>
              {% endfor %}
            </div>
          {% 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) %}
            <div class="post-widgets">
            {% if theme.rating.enable %}
              <div class="wp_rating">
                <div id="wpac-rating"></div>
              </div>
            {% endif %}
    
            {% if (theme.vkontakte_api.enable and theme.vkontakte_api.like) or (theme.facebook_sdk.enable and theme.facebook_sdk.like_button) %}
              <div class="social-like">
                {% if theme.vkontakte_api.enable and theme.vkontakte_api.like %}
                  <div class="vk_like">
                    <span id="vk_like"></span>
                  </div>
                {% endif %}
    
                {% if theme.facebook_sdk.enable and theme.facebook_sdk.like_button %}
                  <div class="fb_like">
                    <div class="fb-like" data-layout="button_count" data-share="true"></div>
                  </div>
                {% endif %}
              </div>
            {% 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) %}
                <span class="post-meta-divider">|</span>
              {% endif %}
              <div id="needsharebutton-postbottom">
                <span class="btn">
                  <i class="fa fa-share-alt" aria-hidden="true"></i>
                </span>
              </div>
            {% endif %}
            </div>
          {% endif %}
          {% endif %}
    
          {% if not is_index and (post.prev or post.next) %}
            <div class="post-nav">
              <div class="post-nav-next post-nav-item">
                {% if post.next %}
                  <a href="{
       { url_for(post.next.path) }}" rel="next" title="{
       { post.next.title }}">
                    <i class="fa fa-chevron-left"></i> {
       { post.next.title }}
                  </a>
                {% endif %}
              </div>
    
              <span class="post-nav-divider"></span>
    
              <div class="post-nav-prev post-nav-item">
                {% if post.prev %}
                  <a href="{
       { url_for(post.prev.path) }}" rel="prev" title="{
       { post.prev.title }}">
                    {
       { post.prev.title }} <i class="fa fa-chevron-right"></i>
                  </a>
                {% endif %}
              </div>
            </div>
          {% endif %}
    
          {% set isLast = loop.index % page.per_page === 0 %}
          {% if is_index and not isLast %}
            <div class="post-eof"></div>
          {% endif %}
        </footer>
      </div>
      {######################}
      {### END POST BLOCK ###}
      {######################}
      </article>
    
    {% endmacro %}

[index.md]: http://index.md
[http_localhost_4000]: http://localhost:4000/