那些年我搭博客所踩的坑

一.博文插入图片

在 Hexo中插入图片时，请按照以下的步骤进行设置

将站点配置文件中的 post_asset_folde 选项的值设置为 true
在站点文件夹中打开 git bash，输入命令 npm install hexo-asset-image --save 安装插件
这样，当使用 hexo new title 创建文章时，将同时在 source/_post 文件夹中生成一个与 title 同名的文件夹，我们只需将图片放进此文件夹中，然后在文章中通过 Markdown 语法进行引用即可
例如，在资源文件夹（就是那个与 title 同名的文件夹）中添加图片 example.PNG，则可以在对应的文章中使用语句 ![示例图片](title/example.PNG "示例图片") 添加图片

二.修改博客标题背景

如果你使用的是pisces模式的话,可以参考下列教程
在\blog\themes\next\source\css\_schemes\Pisces中的_brand.styl文件内.
在.site-meta 下的background后面修改为url(图片链接);

三.插入音乐

在网易云音乐生成外链后插入到你想放的地方即可.
注意:不要打开”阻止第三方 Cookie”这个选项
一旦打开,iframe就加载不出来,插入音乐那一块全白.
网上也没有多少人经历过估计(逼着我学会了看F12…)

四.npm下载超慢的问题

使用cnpm,这是国内的一个镜像,速度很快,但无法使用publish
链接:https://npm.taobao.org/

五.Algolia搜索搭建的问题

next的使用文档已经比较全面了

这个地方要加一句

algolia:
  applicationID: 'applicationID'
  indexName: 'indexName'
  apiKey: 'Search-Only API Key'
  chunkSize: 5000

其次用export,最好不要用set

1 2	export HEXO_ALGOLIA_INDEXING_KEY=你的Search-Only API Key $ hexo algolia

这些都选上

六.头像旋转以及点击头像回到主页

回到主页:在

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

就是在代码上下分别加了

href

1
2
3

2. 旋转
~~这个我也不懂~~
```\themes\next\source\css\_common\components\sidebar\sidebar-author.styl

内添加:

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/


  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}

img:hover {
  /* 鼠标经过停止头像旋转 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

搭建评论区

多说
~~网易云跟帖~~
畅言
~~来必力（LiveRe）~~
~~Disqus~~
~~Hypercomments~~
valine
valine YES!( •̀ ω •́ )y
虽然国内版需要备案,但是我们可以使用国际版的🔗

注册
验证邮箱和手机号
创建一个应用，名字可以随便起
进入应用->设置->应用$key$
复制 $appid$ 和 $appkey$

进入主题配置文件搜索 $valine$

valine:
  enable: 由false改成true
  app_id: 要填
  app_key: 要填
  notify: false # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: 可改
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size

在Leancloud -> 设置 -> 安全中心 -> Web 安全域名把你的域名加进去
$d$一下完成.

先这些,持续更新