记下使用hexo来的一些使用经验和主题修改,针对的是默认的landscape主题。
忽略目录或文件的渲染
我们通常会用一个REMEME.md文件来描述项目,或者我们想放上一些自定义demo展示页面,但是source
目录下的文件默认都会在执行hexo deploy
命令时被渲染,因此Hexo也提供了忽略个别文件的配置方法:
- 在根目录下
_config.yml
文件中添加以下配置,代表不渲染source
目录下的README.md文件:skip_render: README.md
- 如果想配置不渲染多个文件,则可以这样配置:
其中,demo/**
代表不渲染source/demo/
下的所有目录和文件skip_render: - 'README.md' - 'demo/**'
- 此外,配置中还可以使用正则来匹配:
skip_render: demo/*.html
添加回顶部功能
- 在
themes/landscape/layout/_partial/
下新建totop.ejs
,代码如下:<!-- 回顶部 --> <div id="to-top" style="position:fixed;bottom:30px;right:-50px;z-index:999;cursor:pointer;"> <span style="color:#fff;background:#333;border-radius:3px;display:block;height:40px;width:40px;line-height:40px;text-align:center;">TOP</span> </div>
- 在
themes/landscape/source/js/
下新建totop.js
,代码如下:(function($) { $(window).scroll(function(){ if ($(window).scrollTop() > 200){ $("#to-top").stop().animate({right:"5px"}); }else{ $("#to-top").stop().animate({right:"-50px"}); } }); $("#to-top").click(function(){ $('body,html').animate({ scrollTop:0 },300); return false; }); })(jQuery);
- 在
themes/landscape/layout/_partial/after_footer.ejs
最后添加如下代码:<%- partial('totop') %> <%- js('js/totop') %>
添加新浪微博组件
- 在 新浪开放平台 选择需要添加的微博组件
- 设置组件的样式,复制生成的代码
- 在
theme/landscape/layout/_widget/
下新建weibo.ejs
文件,文件内容为上一步所复制的代码 在
theme/landscape/_config.yml
中添加如下代码:widges: - weibo