个人博客相关

发表于 | 分类于 | 阅读次数 |

东西太多了，怕忘记。

想起什么就记录什么，不论简单复杂。

所有记录的都是亲测过的。

换行

在 MD 中 狂敲回车并没有什么软用，可以使用：
</br>

限制图片大小

在 MD 中，图片过大的时候，可以使用：

1
2
3
<div align="center">
 <img src="url..." width = "宽度" height = "高度" alt="图片描述" align="center" />
 </div>

限制宽高并限制居中。

本地预览失败

部署： hexo g
提交： hexo d
启动服务器： hexo s
如果启动失败，可能原因是端口被占用了，可以关闭对应端口的程序，一般是 4000 ，如果发现并没有程序占用该端口，或者关闭不了占用该端口的程序，可以在 hexo 的 _config.yml 配置文件中加上：

1
2
3
4
server:
  port: 4001
  compress: true
  header: true

来修改启动的端口。

然后重新部署在启动就好了。

修改个人头像样式

路径如下：

屏幕快照 2017-05-16 下午11.42.21

在 custom.styl 文件中添加个人头像的 CSS 代码：

1
2
3
4
5
6
7
8
9
10
11
12
.site-author-image {
  border-radius: 100%;
}
.site-author-image:hover{
  animation: scan 4s linear infinite;
}
@keyframes scan
{
  0%{-webkit-transform:rotate(0)} 
  50%{-webkit-transform:rotate(180deg)} 
  100%{-webkit-transform:rotate(360deg)}
}

以上是让图片变成圆形，并且当鼠标移动到头像上时，头像会不停的旋转。

修改代码高亮

修改的只是 中的样式：

例如 code 。

路径如下：

屏幕快照 2017-05-16 下午11.42.21

在 custom.styl 文件中添加代码的 CSS 代码：

1
2
3
4
5
code {
  color: #fc6423;
  background: #fbf7f8;
  margin: 2px;
}

导航栏中的背景图片修改

路径：

屏幕快照 2017-05-16 下午11.51.29

修改 background 中的 url 即可：

1
2
3
.header { background-image: url("http://7xkj6q.com1.z0.glb.clouddn.com/header_background.jpg"); }

.header-inner { position: relative; }

引用样式文本

效果如下：

我是酷酷的引用

插入以下代码就行了：

1
2
3
4
5
{% centerquote %} example example {% endcenterquote %}

或者简写为

{% cq %} example example {% endcq %}

详见 NexT 官方文档

Bootstrap Callout 样式

效果如下：

class_name 是 default

class_name 是 primary

class_name 是 success

class_name 是 info

class_name 是 warning

class_name 是 danger

使用方式为：

1
2
3
{% note class_name %} Example  {% endnote %}

替换 class_name 为自己想要的形式，具体如上。

详见 NexT 官方文档

插入音乐

例如插入网易云音乐：

首先，去官网找到自己喜欢的音乐，点击生成外链播放器：

F96A50B5-9782-462A-889C-A2E2EDC8CDF5

可以选择外观的布局以及是否自动播放等：

屏幕快照 2017-05-17 上午9.00.48

然后复制 HTML 代码到编辑器中就行了，效果如下：

但是许多时候，歌曲有版权的问题，不允许生成外链，那怎么办呢？

可以插入如下代码：

1
<EMBED src="http://on9hzfn6s.bkt.clouddn.com/%E8%B5%B5%E6%B5%B4%E8%BE%B0%20-%20%E5%8F%AF%E4%B9%90.mp3" autostart="true" loop="true" width="400" height="50">

其中 src 中填入音乐的 url ，这里我是将音乐上传到了七牛云中获得了外链，效果如下：

其中 autostart 为是否自动播放， loop 为是否自动循环，这些都可以自己设置，虽然外观有点丑，不过功能齐全，还能下载哦。

如果真的觉得丑可以选择将宽高都设置为 0 ，然后自动播放。（应该还有别的更好的方式，如果你知道，欢迎留言交流）

这个播放器还可以设置别的许多属性，详见这里。

博客置顶

将 node_modules/hexo-generator-index/lib/generator.js 文件改成以下代码：

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
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

然后在文章头部加上 top: 5 就行了。
另外给文章加上 sticky: 1 会有一个固定的图标，本网站首页的那个行万里路就是用这两个属性设置的。

参考链接1
参考链接2