NexT 主题优化

Posted on |

简单记录一下优化 NexT 主题过程中的一些细节。

There is a negligible beginning in all great action and thought.

圆角设置

此优化仅对 Pisces 和 Gemini 主题适用。

(以 Pisces 为例）修改文件 \themes\next\source\css\_variables\Pisces.styl

将 Borders 下对应位置的 initial 改为

1
2
$border-radius-inner            = 15px 15px 15px 15px;
$border-radius                  = 15px;

背景色更换

修改文件 themes\next\source\css\_custom\custom.styl ，添加：

1
2
3
body {
    background: #F0F0F0;
}

去除顶部细线

修改文件 themes\next\source\css\_custom\custom.styl

添加代码 .headband {display:none;}

页面宽度位置设置

修改文件 themes\next\source\css\_custom\custom.styl ，添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.content-wrap {
    margin: 25px auto;
    padding-top: 40px;
    padding-right: 100px;
    padding-bottom: 40px;
    padding-left: 100px;
    width: calc(100% - 280px);
}

.header-inner {
    margin: 25px auto;
}
.sidebar-inner {
    margin: 25px auto;
}

其实想要修改页面形态效果，直接在对应的网页 Styles上修改，然后复制到 custom.styl 即可。

修改文件 themes\next\layout\_macro\sidebar.swig，找到对应位置：

1
2
3
4
5
<a href="/">
  <img class="site-author-image" itemprop="image"
       src="{{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"
       alt="{{ theme.author }}" />
</a>

找到中间三行，添加第一行 <a href="/"> 和最后一行 </a> 即可，中间部分不用修改。

修改文件 themes/next/layout/_macro/sidebar.swing ，找到对应位置：

1
2
3
4
5
6
7
8
9
10
11
12
{% if config.archive_dir != '/' and site.posts.length > 0 %}
	<div class="site-state-item site-state-posts">
    	{% if theme.menu.archives %}
        	<a href="{{ url_for(theme.menu.archives).split('||')[0] | trim }}">
        {% else %}
            <a href="{{ url_for(config.archive_dir) }}">
        {% endif %}
            	<span class="site-state-item-count">{{ site.posts.length }}</span>
            	<span class="site-state-item-name">{{ __('state.posts') }}</span>
      		</a>
	</div>
{% endif %}

删掉判断部分，保留 else 的内容，即：

1
2
3
4
5
6
7
8
{% if config.archive_dir != '/' and site.posts.length > 0 %}
	<div class="site-state-item site-state-posts">
    	<a href="{{ url_for(config.archive_dir) }}">
        	<span class="site-state-item-count">{{ site.posts.length }}</span>
            <span class="site-state-item-name">{{ __('state.posts') }}</span>
        </a>
    </div>
{% endif %}

修改文件 themes/next/_config.yml ，搜索 social，打开你想要的开关。

貌似一些 Social 开关是隐藏的，比如 QQ ， Wechat 或 Weibo ，仿照格式写就可以。

如果想只显示图标（如本站），打开 social_icons 下的 icons_only 开关即可。

修改文件 themes/next/_config.yml ，搜索关键字 b2t ，把这两个选项改为 true ：

1
2
3
4
5
# Back to top in sidebar
b2t: true

# Scroll percent label in b2t button
scrollpercent: true

pdf 文件显示

参考：Hexo NexT主题内添加pdf 插件

折叠展开功能

参考：Hexo NexT 主题内添加折叠块功能

修改文章 Tag 图标

修改文件 /themes/next/layout/_macro/post.swing

搜索 rel="tag"># 将 # 替换为 <i class="fa fa-envira"></i>，即可显示 fa-tag 图标。

To be continued…