【教程篇】Hexo+ NexT 博客美化配置教程 | 第七篇

二叶草 2020年1月26日22:58:45美化教程评论阅读模式

嗨,大家好,今天还是继续next主题的美化教程。加油。

教程:

1.修改主题页面布局为圆角

修改主题页面为圆角,有两种方法:

第一种:

打开文件,路径:/themes/next/source/css/_variables/custom.styl

复制粘贴以下代码:

// 修改主题页面布局为圆角
// Variables of Gemini scheme
// =================================================
@import "Pisces.styl";
// Settings for some of the most global styles.
// --------------------------------------------------
$body-bg-color                   = #eee
// Borders.
// --------------------------------------------------
$box-shadow-inner                 = 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.06), 0 1px 5px 0 rgba(0,0,0,.12)
$box-shadow                       = 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.06), 0 1px 5px 0 rgba(0,0,0,.12), 0 -1px .5px 0 rgba(0,0,0,.09)
$border-radius-inner             = initial
$border-radius                   = initial
$border-radius-inner           = 15px 15px 15px 15px;
$border-radius                 = 15px;

保存后本地预览,可以看到四周都为圆角了。

第二种:

打开文件,路径:themesnextsourcecss_variablesGemini.styl ,添加以下代码:

// 修改主题页面布局为圆角
$border-radius-inner           = 15px 15px 15px 15px;
$border-radius                 = 15px;

保存后本地预览,四周为圆角。

2.去掉顶部黑线

顶部黑线如下图:

打开文件,路径:themesnextsourcecss_customcustom.styl ,添加以下代码:

//去掉顶部黑线:
.headband {display:none;}

保存后本地预览,顶部黑线已经去掉。

3.添加动态背景—粒子漂浮聚合

我还以为把动态背景已经写到了教程里了,结果一看没有,赶紧补上。还有好几种动态背景,之后补上。

该功能由 theme-next-canvas-nest 插件提供,在根目录下执行如下命令:

git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest

然后在主题配置文件中找到canvas_nest,修改为:canvas_nest: true

保存后本地预览,可以看到线条漂浮聚合效果。

4.文章添加结束标记

在路径:themesnextlayout_macro下新建passage-end-tag.swig文件。

打开passage-end-tag.swig,粘贴以下代码:

<div>
{% if not is_index %}
<div style="text-align:center;color:#bfbfbf;font-size:16px;">
<span>-------- 本文结束 </span>
<i class="fa fa-paw"></i>
<span> 感谢阅读 --------</span>
</div>
{% endif %}
</div>

字体、颜色等等我按照我的喜好修改的,你们按照自己的喜好来。

打开文件,路径:themesnextlayout_macropost.swig,在post-body之后,post-footer之前(如果找不到位置的按照我下图的位置添加)添加以下代码:

<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>

打开主题配置文件,在最后位置添加以下代码:

post_end_tag:
enabled: true # 是否开启文末的本文结束标记

保存后本地预览,打开文章后会发现文章结束时出现以下效果。

5.设置标题样式

打开文件,路径:themesnextsourcecss_commoncomponentspostpost.styl

粘贴以下代码:

/*修改博文标题样式*/
.page-post-detail .post-title {
font-size: 26px;
text-align: center;
word-break: break-word;
font-weight: $posts-expand-title-font-weight
background-color: #b9d3ee;
border-radius:.3em;
line-height:1em;
padding-bottom:.12em;
padding-top:.12em;
box-shadow:2px 2px 7px #9fb6cd;
+mobile() {
font-size: 22px;
}
}

保存后本地预览,可以看到文章标题样式效果出现。

如果想把主页文章标题一起修改,那么只要去掉 .page-post-detail即可。

保存后本地预览,可以看到主页文章标题也已经有了样式。

6.修改文章底部#为图标

我们正常写的文章,如果有标签的话会在文章末尾出现标签。

但是#不太好看,我们把它换为图标。

打开文件,路径:/themes/next/layout/_macro/post.swig 搜索找到 rel="tag"># 把#替换为如下代码:

<i class="fa fa-tag"></i>

保存后本地预览,可以看到文章末尾标签不再是#了,换成标签图标了。

7.设置门户的图标

首先访问网站:

https://www.easyicon.net/

找一张(32*32)的ico图标,或者自己制作也行,图标名称改为favicon.ico 。放在路径:/themes/next/source/images 里。

之后打开主题配置文件,搜索并找到favicon,修改为:

favicon:
small: /images/favicon.ico
medium: /images/favicon.ico

保存后本地预览,可以看到门户图标已经不是默认的了。

8.创建标签页

看似最简单的一个问题搞得我差点心态崩了。请看我踩的坑。

新建标签页首先在根目录下执行命令:

hexo new page tags

执行后会在根目录source文件夹里新建tags。而index.md就是标签页。

打开index.md,最后面添加一行type: "tags" 注意冒号后有一空格。

保存之后本地预览,出现了错误,还是显示找不到标签。

这个看似简单的问题真的是搞得我,查找了好多资料。在快要放弃时找到了,原来是Bug。在主题配置文件里,菜单设置里/后面应该没有空格直接跟||。但是主题默认的是有空格的。所以导致找不到标签页。

删除中间的空格。

保存后本地预览,可以看到标签页已经可以使用了。至于标题是英语,换一下标题就行。

tags文件夹里的index.md文件把title修改为标签就OK 了。

看到已经完全OK了。太难了,这个坑的我。

9.创建分类页

创建分类页、关于页等等菜单与第8步一样。

命令:

hexo new page categories

修改.md文件,主要title和type,type为categories。相对应。

10.创建关于页

命令:

hexo new page about

修改.md文件,主要title和type,type为about。相对应。

11.显示当前浏览进度

打开主题配置文件,搜索找到b2tscrollpercent。修改为true

保存后本地预览

12.个性化回到顶部

自己找一张图片,或者直接用我这张。

下载链接:

https://www.lanzous.com/i8nozmh

把图片放在sourceimages 下。

打开文件,路径:themesnextsourcecss_customcustom.styl。在最后粘贴以下代码:

//自定义回到顶部样式
.back-to-top {
right: 60px;
width: 70px; //图片素材宽度
height: 900px; //图片素材高度
top: -900px;
bottom: unset;
transition: all .5s ease-in-out;
background: url("/images/scroll.png");

//隐藏箭头图标
> i {
display: none;
}

&.back-to-top-on {
bottom: unset;
top: 100vh < (900px + 200px) ? calc( 100vh - 900px - 200px ) : 0px;
}
}

保存后本地预览,就可以看到动态效果了,但是这种返回顶部要使第11步的两项为false,否则会出现Bug。

13.修改门户字体

访问网站:

https://fonts.google.com/

找到自己想要设置的字体。

打开主题配置文件,找到font

font:
enable: true

# 外链字体库地址,例如 //fonts.lug.ustc.edu.cn (默认值)
host:

# 全局字体,应用在 body 元素上
global:
external: true
family: Monda

# 标题字体 (h1, h2, h3, h4, h5, h6)
headings:
external: true
family: Roboto Slab

# 文章字体
posts:
external: true
family:

# Logo 字体
logo:
external: true
family:

# 代码字体,应用于 code 以及代码块
codes:
external: true
family:

按照这种形式修改字体类型。字体为刚才网站上的字体名称。修改后保存。

14.添加站内搜索

首先安装插件,输入以下两个命令:

npm install hexo-generator-search --save
npm install hexo-generator-searchdb --save

之后先在站点配置里末尾增加以下代码:

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

再在主题配置文件里搜索找到local_search修改为如下:

local_search:
enable: true

保存后本地预览,效果如下:

15.去掉文章中图片默认的边框

打开文件,路径:/themes/next/source/css/_common/components/post/post-expand.styl

找到img,把border修改为none

保存后本地显示,文章中的图片就没有边框了。

本文来源于:【教程篇】Hexo+ NexT 门户美化配置教程 | 第七篇-变化吧门户
特别声明:以上文章内容仅代表作者本人观点,不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。

  • 赞助本站
  • 微信扫一扫
  • weinxin
  • 加入Q群
  • QQ扫一扫
  • weinxin
二叶草
wordpress主题底部页脚footer美化 美化教程

wordpress主题底部页脚footer美化

什么是SEO,SEO能给企业带来多少收益SEO汉译为搜索引擎优化,是一种方式。利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名,目的是为网站提供生态式的自我营销解决方案,让其在行业内占据领先地位,...
利用Github搭建个人网站(3) 美化教程

利用Github搭建个人网站(3)

网站美化(1) 修改首页 首先我们看一下目录结构 目录截图 再看一眼网站的首页: 网站首页 1、修改网站底部 我们先修改一下网站的底部——网站描述。先看一下提示 Write an awesome de...
linux美化 美化教程

linux美化

很多人有着错误的认识,那就是linux在桌面上进行日常办公的效率低于在windows上办公效率。其实,是你的linux上没有应该有的生产力软件。我自从使用linux后,想方设法的到处找美化linux桌...

发表评论