[SiteLog]新风格启用和 pjax 的再次使用

作者：路杨 发布于 2017-05-11 21:56
版权声明：可以任意转载,但请务必以超链接形式标明文章原始出处、作者信息及本版权声明。
本文地址：https://easun.org/blog/archives/sitelog_new_style_pjax.html

因为大屏幕的普及和数年没有更新界面，这次决定重新设计一个比较现代的风格。
Movable Type 的小众化导致想要的风格并不多，虽然，官方设计了比较人性化的换风格模式。但是禁不起风格稀少。。。。

本人对配色、审美啥的并不擅长，找了一圈，决定参考 屈光宇(JerryQu) 的网站风格进行移植,再次鸣谢 QuQu 。

修改风格其主要体现在以下：

  1. 布局由上下变成左右。
  2. 对于1024以下分辨率彻底移除 sidebar。
  3. 对于 sidebar，仅在主页、归档页、Tag页面显示，其他页面均为2栏。

其实，目的主要是适配1024以上大屏。 MT的框架还是不错的，换主题仅简单换了 css 和局部细小修改。。

新旧风格抓图如下：
新风格：

旧风格：

关于pjax

曾经启用过一段时间 pjax ，这次想了想，还是启用吧。
重新启用了 pjax 比较简单，因为其实原来的 js 中已经有完整的配置。这次，只是重新启用而已。 当然，由于本站 js 重新调整过，相对的 js 也做了调整。 难点主要是页面更替后对新页面的新的脚本的处理。
因为在 这里 已有分析，于是不再做更多解释。
直接贴上本站 pjax 实现的部分代码，共同好者分析之。 

JS/* 菜单切换  */
function ToggleMainNav()
{
var pjax_type = $('#content #pjax-type').data("type");
if ( pjax_type !="entry" ) { $('body').removeClass("mt-entry-archive");}
else {  $('body').addClass("mt-entry-archive"); }

var hit =  (pjax_type == "home") ? "site_home" 
      : ( (pjax_type == "blog") ||(pjax_type == "entry")||(pjax_type == "search") ) ? "blog_index"
      : ( pjax_type == "archive" ) ? "archives"
      : ( pjax_type == "Tag" ) ? "tags"
      : ( pjax_type == "page" ) ? "about"
      :  'no' ;
   if (hit == 'no') return;
    var $el = $("#main-nav li#top_" +hit);  
   if ($el.length == 0) {
   $("#main-nav li").removeClass("on");
return;
   } 
   if ($el.hasClass("on")) return;
   $("#main-nav li").removeClass("on");
   $el.addClass("on");
}

/*  More_JS */
function reRunJS_after_Pjax_for_MoreJS()
{
  util.AttachEvent('usersignin', mtUserOnLoad); 
  $(document).ready(function(){ mtEntryOnLoad(); }); 
   load_Comments("force");
   if ( $("#ubb_span").length ) NewUbbico(0);
}

function reRunJS_after_Pjax()
{
   if( window._gaq ) {
_gaq.push(['_trackPageview', window.location.href]);
}
 ToggleMainNav();

$(document).ready(function(){ util.check_hljs(); util.new_archives(); }); 
if (! easunConfig.lightbox_loaded) { $(document).ready(function(){util.check_LightBox();}); }
if ($("#trackbacks-link").length ) { show_tb_url();} 

if ($("#signin-widget-content").length ){
$(document).ready(function(){ mtAttachEvent('usersignin', mtUpdateSignInWidget);mtUpdateSignInWidget(); }); 
 } 
  if ( $("#comments-open").length ){
 if (!easunConfig.More_JS_loaded) {  
 $.getScript("//static.easunlee.cn/js/mt_comments.mini.js", function() { reRunJS_after_Pjax_for_MoreJS();  easunConfig.More_JS_loaded = true; });
 }else{
reRunJS_after_Pjax_for_MoreJS(); 
 }
  } 


  if ( $("#search-results").length ) {
var url = $("#search-results").data("baseurl");
console.log(url);
var type= $('#search-results').attr("data-type") || "index";
console.log(type);
if(url) { pagination.init(url,type);}
  }
  esLazyImg.init(); 
}

function easun_pjax()
{
 $.pjax.defaults.version = '1';

 $(document).pjax('[data-pjax] a, a[data-pjax]','#content', {fragment:"#content", timeout:6000});   

 $(document).on('pjax:send', function() {
   $('#content').fadeTo(700,0.0);  if ($("#comments-open").length ){ mtEntryOnUnload(); }
  });
$(document).on('pjax:complete', function() { $('#content').fadeTo(700,1); reRunJS_after_Pjax();});

}

$.getScript("//static.easunlee.cn/js/jquery.pjax.js", function() { $(function() { easun_pjax(); }); });

Categories:

Tags:

--EOF--