在hexo themes可以找到很多別人提供的框架
點選進去透過git clone 到 自己的themes 資料夾下面
修改_config.yml 下面theme 為clone 下來的資料夾名稱
注意： 在theme: 後面要空一格 在填寫資料夾名稱

1
theme: hexo-theme-beantech

重新啟動server這樣就可以看到框架的改變

Themes landscape 修改

修改Landscape Header圖

在landscape 圖片是放在 landscape/source/css/images 下面
在landscape/source/css/_variables.styl 內有一行

1
banner-url = "images/banner.jpg"

將圖片改名成你要的就可以了 建議圖片是長條延展這樣效果比較好

修改網站 title 顯示的位置

在landscape/source/css/_partial/header.styl內有

1
2
3
4
5
6
7
#header-title
  text-align: center
  height: logo-size
  position: absolute
  top: 50%
  left: 0
  margin-top: logo-size * -0.5

修改top value可以調整上下位置 修改left 正數為向右移 負數為向左移

增加totop功能

發現當文章比較長時,比較習慣有這個功能讓我快點切到最上面去轉換文章
Totop這個功能 在google大關鍵字就可找到範例程式
但是我的blog透過fafeTo()這個功能是失敗的 最後找到目前可以work的方式
首先在增加檔案totop.ejs在/layout/_partial 內容爲

1
2
3
<div id="totop" 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>

增加totop.js(jQuery file) 在/source/js下面 內容爲

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function($) {
 $(window).scroll(function(){
     if ($(window).scrollTop() > 200){
         $("#totop").stop().animate({right:"5px"});
     }else{
         $("#totop").stop().animate({right:"-50px"});
     }
 });
 $("#totop").click(function(){
     $('body,html').animate({
         scrollTop:0
     },300);
     return false;
 });
})(jQuery);

最後在/layout/_partial/after-footer.ejs的最後面加上

1
2
<%- partial('totop') %>
<%- js('js/totop') %>

這樣就可以了