2019Hexo博客Next主题深度美化 打造一个炫酷博客(2)-奥怪的小栈

本文转载于：

这篇文章告诉你在搭建好博客后,面对网上千篇一律的美化教程怎么才能添加自己独特点,使人眼前一亮.

本站基于hexo+github搭建。
所以你需要准备好hexo+github等相关软件和工具。详细我会在下面放出。

前言

由于网上已经有很多而且很详细的hexo搭博客教程了，我就不再学习他们，把全部过程都放出来了，小白可以看我整理的。
这里主要写一下一些平常没人整理的seo优化和个性化方法。

解决next主题移动端优化

如何调试查看效果:

以360浏览器为例（当然其他浏览器效果也差不多），按下f12进入开发者模式后，点击左下角的手机图标即可。

解决移动端按钮被遮挡:

配置:

在~\themes\next\source\css_customcustom.styl中任意位置加入以下代码即可。

.site-nav-toggle {
  top: 0;
  transform:  translatey(78%);
}

解决分类、标签等页面tablet设备显示异常

next主题中mobile与tablet是通过分辨率区分，ipad mini2竖屏是会触发这种显示错误的。

配置:

在~\themes\next\source\css_schemes\pisces_layout.styl中如下位置，添加float: none;
介意搜索关键字.content-wrap或+tablet() {，回车，在后面加入注释的那行代码即可。

.content-wrap {
     +tablet() {
          float: none; //这行是后添加进去的
     }
}

添加分享文章功能

这个看就有了。
支持jiathis分享、百度分享、addthis分享。

hexo 在subtile和description中实现换行

这个功能是在写代码的时候用的，例如你想说明一句话时候用到换行显示该怎么办。
这里用我的打赏部分做个示例。
习惯更改的文本描述用双引号括起来，同时实现
即可达到换行目的

语法:

reward_comment: "您的支持将用于博客的维护费用。<br>例如：域名续费一年需26￥"

添加lazyload 图片懒加载

懒加载，简言之就是在html加载的时候，若果img标签的src是有内容的，在加载的过程中，img标签就回去请求这个图片，直到加载完，我们的浏览器的刷新那个图标才会停止转动，也就是才算请求完
懒加载能够在你鼠标不动的时候只加载目前电脑窗口内需要展示的图片，电脑屏幕内部需要展示的图片就暂时不加载。
从而达到加快访问网站速度的效果。

配置:

在你的 hexo 目录下，执行以下命令：

npm install hexo-lazyload-image --save

然后在你的 hexo 目录的配置文件 _config.yml 中任意位置添加配置:

lazyload:
  enable: true
  onlypost: false
  loadingimg: 

参数说明:
onlypost:
是否仅文章中的图片做懒加载, 如果为 false, 则主题中的其他图片, 也会做懒加载, 如头像, logo 等任何图片.
loadingimg - 图片未加载时的代替图:
不填写使用默认加载图片,如果需要自定义,添填入loading图片地址.
如果是本地图片，不要忘记把图片添加到你的主题目录下. next 主题需将图片放到~\themes\next\source\images目录下,然后引用时: loadingimg: /images/图片文件名

添加 一言

将下面这段代码放入页面内需要展示一句话的位置即可。
<script type="text/javascript" src="https://api.uixsj.cn/hitokoto/w.php?code=js"></script><div id="xsjhitokoto"><script>xsjhitokoto()</script></div>
中英文版 使用方法同上
<script type="text/javascript" src="https://api.uixsj.cn/hitokoto/en.php?code=js"></script><div id="enhitokoto"><script>enhitokoto()</script></div>
你可以放在文章中，侧栏中。
示例（中英文版）：

添加 每日必应 好图

在需要添加每日必应的页面，将下列代码添加上
<img src="http://images4.10qianwan.com/10qianwan/20190725/b_0_201907250228381638.jpg" width="300px" height="auto">
参数说明
width： 图片宽度，可以自行修改
height="auto": 图片高度，自动。可自行修改。

也可以作为网页的背景
打开文件

~\themes\next\source\css_custom\custom.styl

如果你没有设置过背景，复制粘贴下面的代码进去即可:

body{
    background:url('http://images4.10qianwan.com/10qianwan/20190725/b_0_201907250228381638.jpg');
}

如果你设置过背景，找到关键字background:url将里面的url替换为http://images4.10qianwan.com/10qianwan/20190725/b_0_201907250228381638.jpg即可。
示例：

添加 天气预报

将下面这段代码放入页面内需要展示一句话的位置即可。
<iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tx&skin=sogou" frameborder="0" width="100%" height="30" allowtransparency="true"></iframe>
你可以放在文章中，侧栏中。
示例：

当然你可以更换样式，到直接可以复制代码

添加 地球仪显示访客位置（revolvermaps）插件

这个插件可以显示站点上安装后，来访客的位置。最近的游客位置是动画的，新的游客位置出现在全球现场。
单击“全球”将打开“公共实时统计”页面，提供有关访客的详细信息。
总之就是一个挺炫的东西，可以放在任意位置。（只是好像加载有点慢....我考虑博客速度就没用）

配置

懒得看官网的可以直接复制这段代码放入页面内需要展示的位置即可。放在文章中，侧栏中，底部。就不一一举例了。
<script type="text/javascript" src="//rf.revolvermaps.com/0/0/5.js?i=5b3ac4cx0nk&amp;m=0&amp;c=ff0000&amp;cr1=ffffff" async="async"></script>
放置底部时的效果：

自定义

你可以到 来调试代码，达到你预期的效果，还有多种皮肤等都是能调的。