这篇文章告诉你在搭建好博客后,面对 上千篇一律的美化教程怎么才能添加自己独特点,使人眼前一亮.
本站基于HEXO+Github搭建。
所以你需要准备好HEXO+Github等相关软件和工具。详细我会在下面放出。
前言
由于 上已经有很多而且很详细的hexo搭博客教程了，我就不再学习他们，把全部过程都放出来了，小白可以看我整理的这篇文章。
这里主要写一下一些平常没人整理的SEO优化和个性化方法。
Next主题移动端优化
参考
如何调试查看效果:
以360浏览器为例（当然其他浏览器效果也差不多），按下F12进入开发者模式后，点击左下角的手机图标即可。
即可
这里只是简单进行了一下改进，想要更进一步的话可以看这里，但是没有一定基础的同学就不要轻易尝试了。
设置文章目录全部展开
使用Hexo + Next 主题编写文章时, Next主题会自动给文章生成TOC目录，只有当你下拉浏览到相应的目录级时, TOC目录才会展开。
当我想通过目录快速定位某段文章的时候就很不友好了。那么如何去修改呢/p>
配置
打开文件~/themes/next/source/css/_common/components/sidebar/sidebar-toc.styl
找到如下的代码
.post-toc .nav .nav-child { display: none; }
修改为
.post-toc .nav .nav-child { display: block; }
即可达到效果
添加 一言
将下面这段代码放入页面内需要展示一句话的位置即可。
中英文版 使用方法同上
你可以放在文章中，侧栏中。
示例（中英文版）：
添加 天气预
代码来自这里，更多天气预 样式可以在这里查看
将下面这段代码放入页面内需要展示一句话的位置即可。
你可以放在文章中，侧栏中。
示例：
当然你可以更换样式，到这里直接可以复制代码
添加 地球仪显示访客位置（RevolverMaps）插件
官
这个插件可以显示站点上安装后，来访客的位置。最近的游客位置是动画的，新的游客位置出现在全球现场。
单击“全球”将打开“公共实时统计”页面，提供有关访客的详细信息。
总之就是一个挺炫的东西，可以放在任意位置。（只是好像加载有点慢…我考虑博客速度就没用）
配置
懒得看官 的可以直接复制这段代码放入页面内需要展示的位置即可。放在文章中，侧栏中，底部。就不一一举例了。
放置底部时的效果：
Hexo 在subtile和description中实现换行
这个功能是在写代码的时候用的，例如你想说明一句话时候用到换行显示该怎么办。
这里用我的打赏部分做个示例。
习惯更改的文本描述用双引 括起来，同时实现
即可达到换行目的
语法:
添加lazyload 图片懒加载
懒加载，简言之就是在html加载的时候，若果img标签的src是有内容的，在加载的过程中，img标签就回去请求这个图片，直到加载完，我们的浏览器的刷新那个图标才会停止转动，也就是才算请求完
懒加载能够在你鼠标不动的时候只加载目前电脑窗口内需要展示的图片，电脑屏幕内部需要展示的图片就暂时不加载。
从而达到加快访问 站速度的效果。
配置:
在你的 Hexo 目录下，执行以下命令：
然后在你的 Hexo 目录的配置文件 _config.yml 中任意位置添加配置:
参数说明:
onlypost:
是否仅文章中的图片做懒加载, 如果为 false, 则主题中的其他图片, 也会做懒加载, 如头像, logo 等任何图片.
loadingImg – 图片未加载时的代替图:
不填写使用默认加载图片,如果需要自定义,添填入loading图片地址.
如果是本地图片，不要忘记把图片添加到你的主题目录下. Next 主题需将图片放到~themesnextsourceimages目录下,然后引用时: loadingImg: /images/图片文件名
调换文章上一篇下一篇的顺序
参考
看完一篇文章后，在文章底部，有上下篇的链接（），但是点 > 发现进入的居然是页面中的的上面那篇文章br> 大概是因为博客是从时间角度设计的，> 英语叫 next，而 next 是更新的。不过别扭就改成习惯的好了，从空间位置角度设计。
打开文件 ~/themes/next/layout/_macro/post.swig
分别搜索并修改
改为
再搜索（就在下方一点）
改为
其实就是把两处地方的代码互调即可。
在目录~/themes/next/source/css/_common/components/post/下添加my-post-copyright.styl，内容如下:
修改~/themes/next/layout/_macro/post.swig,如下：
在代码
之前，新增如下代码：
打开~/themes/next/source/css/_common/components/post/post.styl 文件，在最后一行增加代码：
设置新建文章自动开启 copyright ，即新建文章自动显示自定义的版权声明，设置 ~/scaffolds/post.md文件，如下：
注意：如果你之前发布有文章请一一在文章配置内添加代码 copyright: true ，例如：
SEO优化——nofollow标签
nofollow标签是由谷歌领头创新的一个反垃圾链接的标签，并被百度、yahoo等各大搜索引擎广泛支持，引用nofollow标签的目的是：用于指示搜索引擎不要追踪（即抓取） 页上的带有nofollow属性的任何出站链接，以减少垃圾链接的分散 站权重。
络爬虫会在当前页面搜索所有的链接，然后一个个查看，所以就很有可能跳到别的 站就不回来了。这个时候nofollow就起作用了。
那么我们如何给添加出站链接加上nofollow标签呢/p>
配置
打开文件 ~themesnextlayout_macrosidebar.swig,将搜索将下面（三处）代码中的a标签，并加上rel=”external nofollow”属性即可。
修改前：
修改后:
写作:Markdown 技巧与内置样式
基础语法
看这里
分隔线和空行
效果
这是文字
上面是分隔线
上面是空行(什么不见于我用了压缩代码所以没了8
引用
效果
引用内容
引用内容
居中和右对齐
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！