Hexo-Next主题美化修改（一）

发表于 | 分类于 | 阅读次数

列表图
NexT是Hexo的一套主题。NexT 坚持将复杂的细节隐藏，提供尽量少并且简便的设置，保持最大限度的易用性。使用 第三方服务 来扩展站点的功能， NexT 支持多种常见第三方服务。除了 Markdown 支持的语法之外，NexT 借助 Hexo 提供的标签特性， 为您提供在书写文档时快速插入带特殊样式的内容。

为Hexo-Next主题设置头部图片

第一步：

  • 首先在网上找或者自己PS一张心仪的图片,取名background.jpg，把它放在Hexo\source\image路径下。

第二步：

  1. 进入Hexo\themes\next\source\css_common\components\header目录，找到header.styl文件，双击打开。
  2. 将第一行默认的.header { background: $head-bg; }修改为.header { background: url('../image/background.jpg'); }

让Hexo-Next主题首页不显示全文只显示预览

  1. 进入Hexo\themes\next目录,找到_config.yml文件，搜索”auto_excerpt”,找到如下部分：

    1
    2
    3
    4
    5
    # Automatically Excerpt. Not recommand.
    # Please use <!-- more --> in the post to control excerpt accurately.
    auto_excerpt:
    enable: false
    length: 150

  2. 把enable改为对应的false改为true。

让Hexo-Next主题首页文章列表显示图片

  • 在利用markdown编辑文章时，加入进行手动隔断。
  • 将你希望在首页列表显示的部分放在标签之前。
  • 如果把图片放在之前，这首页文章列表里将显示这张图片。例如：
    1
    2
    3
    ![列表图](170605_2HexoNext程/列表图.png)
    NexT是Hexo的一套主题。NexT 坚持将复杂的细节隐藏，提供尽量少并且简便的设置，保持最大限度的易用性。使用 第三方服务 来扩展站点的功能， NexT 支持多种常见第三方服务。除了 Markdown 支持的语法之外，NexT 借助 Hexo 提供的标签特性， 为您提供在书写文档时快速插入带特殊样式的内容。
    <!-- more -->

这篇文章将在首页列表中显示“列表图”以及后面一段文字，其余的文字将被隐藏在单独的文章详情页面，点击阅读全文访问。

Hexo-Next底部powered by的logo栏更改

第一步：

  • 进入\themes\next\layout_partials\ 目录，找到footer.swig文件，打开会发现，如下图的语句：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <div class="copyright" >
    {% set current = date(Date.now(), "YYYY") %}
    &copy; {% if theme.since and theme.since != current %} {{ theme.since }} - {% endif %}
    <span itemprop="copyrightYear">{{ current }}</span>
    <span class="with-love">
    <i class="fa fa-{{ theme.authoricon }}"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">{{ config.author }}</span>
    </div>
    {% if theme.copyright %}
    <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>
    {% endif %}

第二步：

  1. 第8行，是网页底部的“日期❤ XXX”
    • 如果需要在“XXX”前面或后面加内容，请将内容添加在config.author的大括号前面或后面，不可以更改大括号里面的内容。
    • 如果不需要保留“XXX”，可以将<span>...</span>这部分代码全部删除。
  2. 第13行，是网页底部的“由Hexo驱动”的Hexo链接
    • 删除链接防止跳转（如需跳转到指定网页，请手动修改链接地址）。
    • 注意删除格式不能错，只能删除 <a>...</a> 这部分代码，必须留着两个单引号’’ 。
  3. 第18-20行，是网页底部的“主题-Next.XXX”
    • 直接删除 <a>...</a>这部分代码，删掉之后在上一行-后面可以随意加上你想显示的东西。如无需添加内容，可以删除-，这页面只显示“主题”二字，后期可以把“主题”这两个字修改成你需要的内容。

第三步：

  • 进入\themes\next\languages\目录，找到语言文件zh-Hans.yml（这里以中文为例，有的习惯用英文的配置文件，道理一样，找对应位置即可）打开之后，如图： 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    page:
    totally: 共有
    tags: 标签
    footer:
    powered: "微信 %s maoer9549"
    theme: QQ：2856121694
    counter:
    tag_cloud:
    zero: 暂无标签
    one: 目前共计 1 个标签
    other: "目前共计 %d 个标签"

  • 第六行，powered对应的是“由Hexo驱动”。

  • 第七航，theme对应的是“主题-Next.XXX”中的“主题”二字。

文章由：葱葱葱原创，转载请注明出处，谢谢！