白乐天

道阻且长，行则将至。

NexT主题美化

发表于 更新于 分类于
本文字数： 9.6k 阅读时长 ≈ 9 分钟

NexT主题

从博客目录打开终端，执行命令

1
git clone https://github.com/next-theme/hexo-theme-next themes/next

下载好了之后会在themes目录下生成一个next目录，里面是next主题的配置文件。
修改主题只需要在博客根目录下的_config.yml配置文件里找到theme，将其修改为next即可。

修改布局

在next目录下的_config.yml文件里搜索Scheme，有四种默认局部

主题颜色

白色模式和黑色模式

false为白色模式，true为黑色模式

增加标签页和分类页

在next目录下的_config.yml文件里搜索menu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: true

把tags和categories前面的#去掉
进一步配置
创建两个文件，一个是tags，一个是categories

1
2
hexo n page tags
hexo n page categories

文件内容稍作修改

关于

把menu下的about前面的#去掉

1
2
3
4
5
6
7
8
9
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

新建页面

1
hexo new page about

在source目录下生成了一个about文件夹，里面有一个index.md文件，可以对about页面进行修改。

侧边栏位置

侧边栏中包含多种配置，可通过修改主题_config.yml实现

1
2
3
4
sidebar:
  # Sidebar Position.
  position: left
  #position: right

头像

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/android.svg
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: true
  • url：图像地址。默认为NexT包下/source/images/avatar.gif，也可放置在站点路径/source/uploads文件夹内
  • rounded：是否显示为圆形图标
  • rotated：光标移动到图标是否旋转

返回顶部

1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true
  • enable：默认为true。在右下角显示返回顶部图标
  • sidebar：默认为false。在侧边栏显示
  • scrollpercent：默认为false。是否显示进度

代码块

1
2
3
4
5
6
7
8
9
10
11
12
codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: normal
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style: mac

自定义主页

  • 在根目录的source目录下，新建一个index.md文档
    这个source目录下的index.md文档即是我们自定义的主页。在文档中做出的任何修改均会体现在自定义主页中。
  • 修改根目录下的_config.yml文件的index_generator项
    打开根目录下的 _config.yml 文件，将 index_generator 项下的 path 项的值修改为一个无效值，例如：我将这一项修改为了default-index。目的是使Hexo框架的默认主页指向一个无效值。
  • 启用home（默认已启用）
    打开 themes/next/ 目录下的 _config.yml 文件，将 menu 项下的 home 项的值修改为/ || fa fa-home 。使得点击页面中的Home菜单时，可以返回自定义主页。

添加网站运行时间

在\themes\next\layout\_partials目录下，找到footer.swig文件，添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("7/18/2023 10:00:00"); //修改为你的网站开始运行的时间
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒.";
    }
setInterval("createtime()",250);
</script>

去除文章底部带#的标签

文章底部的标签前会有一个#,我们可以将其修改
根据路径找到这个文件\MyBlog\themes\next\layout\_macro\post.swig，
找到对应文件后全文搜索footer，原内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <footer class="post-footer">
    {%- if post.tags and post.tags.length %}
      {%- if theme.tag_icon %}
        {%- set tag_indicate = '<i class="fa fa-tag"></i>' %}
      {% else %}
        {%- set tag_indicate = '#' %}
      {%- endif %}
      <div class="post-tags">
        {%- for tag in post.tags.toArray() %}
          <a href="{{ url_for(tag.path) }}" rel="tag">{{ tag_indicate }} {{ tag.name }}</a>
        {%- endfor %}
      </div>
    {%- endif %}

    {{ partial('_partials/post/post-footer.swig', {}, {cache: theme.cache.enable}) }}

    {{ post_nav(post) }}
  </footer>
{% else %}
  <footer class="post-footer">
    <div class="post-eof"></div>
  </footer>
{%- endif %}

修改后的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <footer class="post-footer">
    {%- if post.tags and post.tags.length %}
      {%- if theme.tag_icon %}
        {%- set tag_indicate = '<i class="fa fa-tag"></i>' %}
      {% else %}
        {%- set tag_indicate = '' %}
      {%- endif %}
      <div class="post-tags">
        {%- for tag in post.tags.toArray() %}
          <a href="{{ url_for(tag.path) }}" rel="tag">{{ tag_indicate }} {{ tag.name }}</a>
        {%- endfor %}
      </div>
    {%- endif %}

    {{ partial('_partials/post/post-footer.swig', {}, {cache: theme.cache.enable}) }}

    {{ post_nav(post) }}
  </footer>
{% else %}
  <footer class="post-footer">
    <div class="post-eof"></div>
  </footer>
{%- endif %}

字数统计及阅读时长

安装插件hexo-wordcount

1
npm install hexo-symbols-count-time --save

配置NexT目录下的_config.yml

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
    separated_meta: true
    item_text_post: true
    item_text_total: false
    awl: 2
    wpm: 275

自定义文件的路径

修改主题配置文件 custom_file_path 部分

1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
  head: source/_data/head.swig #添加自定义内容在 head
  #header: source/_data/header.swig #添加自定义内容在顶栏
  #sidebar: source/_data/sidebar.swig #添加自定义内容在边栏
  #postMeta: source/_data/post-meta.swig #添加自定义文章的 meta 信息
  postBodyEnd: source/_data/post-body-end.swig #添加自定义内容在文章尾部
  footer: source/_data/footer.swig #添加自定义内容在页脚
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl #添加自定义css

文章图片圆角

添加以下内容到 source/_data/styles.styl

1
2
3
4
// 图片圆角
.post-body img {
  border-radius: 1em 
}

首页文章阴影(卡片化)效果

添加以下内容到source/_data/styles.styl

1
2
3
4
5
6
// 主页文章添加阴影效果
.post-block {
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }

鼠标点击出现小红心

将如下内容保存到source/js/love.js（没有这个文件就自己创建）

1
"use strict";!function(e,r,t){function a(){for(var e=0;e<i.length;e++)i[e].alpha<=0?(r.body.removeChild(i[e].el),i.splice(e,1)):(i[e].y--,i[e].scale+=.004,i[e].alpha-=.013,i[e].el.style.cssText="left:"+i[e].x+"px;top:"+i[e].y+"px;opacity:"+i[e].alpha+";transform:scale("+i[e].scale+","+i[e].scale+") rotate(45deg);background:"+i[e].color+";z-index:99999");requestAnimationFrame(a)}var o,i=[];e.requestAnimationFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)},function(t){var a=r.createElement("style");a.type="text/css";try{a.appendChild(r.createTextNode(t))}catch(e){a.styleSheet.cssText=t}r.getElementsByTagName("head")[0].appendChild(a)}(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o="function"==typeof e.onclick&&e.onclick,e.onclick=function(e){var t,a;o&&o(),t=e,(a=r.createElement("div")).className="heart",i.push({el:a,x:t.clientX-5,y:t.clientY-5,scale:1,alpha:1,color:"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}),r.body.appendChild(a)},a()}(window,document);

在 source/_data/head.swig 添加以下内容

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/love.js"></script>

自定义背景

把想设置的背景放入./themes/next/source/images中，命名为background.jpg。在根目录的source文件夹下新建source/_data/styles.styl，添加如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 整体背景设置
body {
	background:url(/images/background.png);// 设定背景图片,images同处于source文件夹下
	background-repeat: no-repeat;// 设定背景图片非重复填充
	background-attachment:fixed;// 设置背景图片不随页面滚动
	background-position:50% 50%;// 设置背景图片位置
	background-size: cover// 设置保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
}

// 设置透明度
.main-inner{
	opacity: 0.9;
}
.header-inner{
	opacity: 0.9;
	z-index: 10;
}

添加本地搜索服务

使用NexT自带的本地搜索服务，执行如下命令

1
cnpm install hexo-generator-searchdb --save

在Hexo目录下的配置文件中添加如下内容

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

在Next配置文件中进行修改

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
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
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

把enable的值改为true即可