那些年我搭博客所踩的坑 | Kyons'Blog 




 
 
 
 



 
 



那些年我搭博客所踩的坑

一.博文插入图片

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

  1. 将 站点配置文件 中的 post_asset_folde 选项的值设置为 true
  2. 在站点文件夹中打开 git bash,输入命令 npm install hexo-asset-image --save 安装插件
  3. 这样,当使用 hexo new title 创建文章时,将同时在 source/_post 文件夹中生成一个与 title 同名的文件夹,我们只需将图片放进此文件夹中,然后在文章中通过 Markdown 语法进行引用即可
  4. 例如,在资源文件夹(就是那个与 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的使用文档已经比较全面了

  1. 这个地方要加一句

    1
    2
    3
    4
    5
    algolia:
    applicationID: 'applicationID'
    indexName: 'indexName'
    apiKey: 'Search-Only API Key'
    chunkSize: 5000
  2. 其次用export,最好不要用set

    1
    2
    export HEXO_ALGOLIA_INDEXING_KEY=你的Search-Only API Key
    $ hexo algolia
  3. 这些都选上


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

  1. 回到主页:在
    1
    2
    3
    4
    5
    6
    ```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

内添加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
.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
    虽然国内版需要备案,但是我们可以使用国际版的🔗
  1. 注册

  2. 验证邮箱和手机号

  3. 创建一个应用,名字可以随便起

  4. 进入应用->设置->应用$key$

  5. 复制 $appid$ 和 $appkey$

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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
  7. 在Leancloud -> 设置 -> 安全中心 -> Web 安全域名 把你的域名加进去
    $d$一下完成.


先这些,持续更新


 


 
 
 





 

 


 


 

 

 

 

 
 

 

 

 //删除Valine核心代码库外链调用 //调用刚下载的本地文件以加速加载速度 //这里改为从本地加载