我的博客使用的是简约至上的 Maupassant 主题，主题虽好但也想弄点个性化的东西把玩把玩。

修改page页

通过修改 themes\maupassant\_config.yml 可以配置基本的页面布局。

menu:
  - page: 首页
    directory: .
    icon: fa-home
  - page: 归档
    directory: archives/
    icon: fa-archive
  - page: 关于
    directory: about/
    icon: fa-user
  - page: 工具箱
    directory: toolbox/
    icon: fa-book
  - page: 常用社区
    directory: community/
    icon: fa-comments
  - page: rss
    directory: atom.xml
    icon: fa-rss

这里一共配置了六个菜单项，要使自定义的菜单项生效，需要在 hexo 根目录的 source 文件夹中创建与菜单项同名的文件夹并在文件夹内创建 index.md 文件(实测 index.html 也可以，但是不方便下一步的 layout )。为了使菜单页保留 page 的布局，需要在 index.md 的 front-matter 中添加 layout: page 。

菜单项页面布局

在添加了菜单项页面之后，我们需要把他们布局。虽然这是 markdown 文件，但是可以内嵌 html5 的语法。

坑1：在 md 中写 html 时，不要乱换行，不然 markdown 可能会当真，最后可能会影响布局。所以我的页面代码是这种 style 的：（仿佛被压缩了的代码。。。）
坑2：如果页面不生效，先检查页面是不是放错路径了。记得是根目录下的 source 不是主题目录下的 source。
坑3：因为父级元素的布局会干扰你的布局，而你在不知道的情况下布局就会跟玄学一样。布局的时候如果发现位置不对劲，记得使用下面的代码：
1
style = "padding: 0;margin: 0;"
坑4：如果你也想用 font awesome，直接用就好了，主题中已经导入了 font awesome，如果再导入的话会引起侧边栏图标显示错误。
坑5：如果侧边栏语言错乱，记得在 hexo 根目录下的 _config.yml 中指定语言。
坑6：记得在 index.md 的 front-matter 中添加 title ，效果显示如下：

网页ico

在网上找一个 16 × 16 或者 32 × 32 的 ico 文件命名为 favicon.ico 放置在 hexo 的 source 目录下即可。如果没有，可以用 png 在线制作一个(点这里)。如果网页显示不出来的话，大概率是 ico 或者缓存的问题，清理浏览器的缓存试一下。另外 edge 浏览器不用挣扎，我的就没有成功显示过。

点击效果添加

在我的博客中点击的时候会冒出彩色的小爱心，制作方法如下:

添加 clicklove.js
在 themes\maupassant\source\js\ 中创建 clicklove.js 并在文件中添加如下代码：

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

导入 clicklove.js
编辑 themes\maupassant\layout\_partial\after_footer.pug ，在末尾导入 clicklove.js：

1 2	// 添加点击爱心功能 script(type='text/javascript', src=url_for(theme.js) + '/clicklove.js' + '?v=' + theme.version)

开启文章字数统计

在 hexo 根目录下的 _config.yml 中设置 wordcount: true 即可。效果如下：

fancybox

在 hexo 根目录下的 _config.yml 中设置 fancybox: true 即可。效果如下：
但是对于作为超链接的图片我们不需要fancybox，这时只需要在相应 <img> 标签中使用 class="nofancybox" 就可以避免fancybox样式阻止超链接使用的情况。

博客见闻录之主题个性化