传送门包括：教程、案例、 实用资源站

内容包括：主题、配色、字体、图标、动画特效等元素，pug、ejs 语法教程。

一、切换主题

好的也就是说利于 seo 的模板应该具备以下几种条件：
1.模板的性能好，也就是说网站的速度快。
2.同样模板的网站最好不要太多，因为模板也是影响网站原创度的一部分。如果太多人使用同样的模板，而你的网站内容又是一个原创度不高的网站，那么很有可能会影响你对搜索引擎的友好度。
至于 zblog 和 wordpress 程序本身对 seo 的影响，其实并不能分出上下。
当然，虽然模板主题对 seo 有影响，但影响其实并不大，可以说是非常的小。所以说，我们在运营网站的时候不能舍本逐末了，内容才是一个网站好坏的根源。搜索引擎的工作是把用户需要的内容展现给用户，我们要做的就是生产用户需要的内容，其他的都是锦上添花。
——zblogphp好用吗？个人站长使用zblog和wordpress对比后我的选择 - 搜赚吧博客

好看的hexo主题推荐

安装好主题后，清除缓存，预览主题：

  • hexo clean
  • hexo s --debug 或者 hexo g & hexo s
  • 修改样式至满意后，同步仓库，部署网站：hexo g -d

二、自定义样式

查漏补缺⭐大佬们的教程集合

样式教程

样式打包

全过程指导

⑴ 元素调整

在浏览器的网站页面按F12开启调试模式，可直观找到所要更改元素的代码名。

使用CSS修改：

字体设置

字体配置方案可参考这篇文章：如何优雅的选择字体(font-family)

引用方法：Hexo自定义字体（Matery主题与Butterfly主题）

⑵ 局部区域修换

addListener 已弃用，参考 javascript - matchMedia().addListener marked as deprecated, addEventListener equivalent? - Stack Overflow 的回答修改。

磁贴卡片

可定制分类、GitHub 提交日历、置顶文章轮播、双栏文章布局、那年今日、电子时钟等各类内容。

动态响应内容

⑶ 整体 UI 版式设计

布局

横排多栏 + 竖排内容的混合布局参考教程：

背景图片

三、动效专题

⑴ 元素动效

前端实现动画效果的几种方式（有实例）：JS,SVG,CSS3,Canvas

css 动画效果：CSS3（三）Animation 入门详解 - CSDN，注意动效中 animation 属性的动画需要 JS 实现重复触发（见 如何使css3动画重新执行 - CSDN、js实现每次点击都重复执行CSS动画——animation - CSDN），可以通过 transition 属性替代动效（见 CSS Transitions）。

⑵ 背景动效

四、语法参考

需要注意的细节：
1、代码格式要正确，styl每层级缩进一个Tab，yml每个冒号后面一个空格。👉yml/yaml在线校验
2、个人文件/图片放在根目录的\source\中，升级或更换主题时才不会被覆盖。或者把图片放到其他云存储位置。

杂七杂八教程集锦：

Stylus

代码精简＋兼容性匹配，使用stylus的扩展(@extend)规则集、变量属性、插值法表达式等语法，将重复的属性值继承起来。

例如设定n行文本超出部分显示省略号：
在\source\css\_global\function.styl定义函数lnp()：

lnp(n)
  overflow:hidden
  text-overflow:ellipsis
  if n == 1
    white-space:nowrap
  if n != 1
    word-break:break-all
    display:-webkit-box
    -webkit-line-clamp:n
    -webkit-box-orient:vertical

在需要控制文本的地方使用函数，例如👇

.toc-link
  lnp(1)
  display: block
  transition: all .2s ease !important

.post-title
  lnp(3)
  margin:4% 0

编译为：

 .toc-link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  transition: all 0.2s ease !important;
}
.post-title {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin: 4% 0;
}

参考笔记：