精简js

source/_posts/前端杂烩/CSS动画(1)-transform.md

@@ -63,7 +63,7 @@ deg是旋转的角度 , 正数表示顺时针旋转 , 负数表示逆时针旋
 同名函数接受2个参数 , 分别表示在X轴和Y轴上的移动距离 , 正数代表向该轴的正方向移动 , 负数代表向负方向移动
 ```css
 .translate_div {
-  tranform : translate(100px, 20px);
+  transform : translate(100px, 20px);
 }
 ```
 ![translate-x-y](/images/前端杂烩/animation/translate-x-y.png)

themes/yilia/layout/_partial/after-footer.ejs

@@ -1,5 +1,5 @@
 <script>
-window.yiliaConfig = {
+window.themeConfig = {
   isHome: <%=is_home()%>, // 是否为首页
   isPost: <%=is_post()%>, // 是否为文章全文页面
   isArchive: <%=is_archive()%>, // 是否为归档页面
@@ -7,7 +7,8 @@ window.yiliaConfig = {
   isCategory: <%=is_category()%>, // 是否为分类页面
   pageid: <%-page.pageid ? `"${page.pageid}"` : 'undefined'%>, // 页面标识, 用于个性化页面开发
   toc_hide_index: <%=theme.toc_hide_index%>, // 目录序号
-  root: "<%=config.root%>" // 资源根路径
+  root: "<%=config.root%>", // 资源根路径
+  pictureCdn: "<%=config.picture_cdn%>" // 图片存储仓库地址
 }
 </script>
 <%- partial('script') %>

themes/yilia/package-lock.json

@@ -2839,12 +2839,6 @@
         "entities": "^1.1.1"
       }
     },
-    "dom101": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/dom101/-/dom101-1.3.0.tgz",
-      "integrity": "sha1-1/yjBoYkAXG2zxfC6FXWoy+iyck=",
-      "dev": true
-    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",

themes/yilia/package.json

@@ -21,7 +21,6 @@
     "autoprefixer": "^6.5.1",
     "clean-webpack-plugin": "^0.1.15",
     "css-loader": "^2.1.1",
-    "dom101": "^1.3.0",
     "file-loader": "^3.0.1",
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.6.0",

themes/yilia/source-src/css/article-inner.scss

@@ -48,8 +48,8 @@
 
 .article-entry{
   line-height: 1.8em;
-  padding-right: 7.6923%;
-  padding-left: 7.6923%;
+  padding-right: $articlePadding;
+  padding-left: $articlePadding;
   .post-count { // 字数统计
     color: rgb(185, 185, 185);
     font-size: 14px;
@@ -61,7 +61,7 @@
     }
   }
   img {
-    transition: transform 0.2s ease-out,box-shadow 0.5s ease;
+    transition: transform 0.3s ease-out,box-shadow 0.4s ease;
     cursor: zoom-in;
     &:hover {
       transform: scale(1.05,1.05);

themes/yilia/source-src/css/article-main.scss

@@ -86,7 +86,7 @@
 .article-header{
   border-left: 5px solid #4d4d4d;
   padding: 30px 0px 15px 25px;
-  padding-left: 7.6923%;
+  padding-left: $articlePadding;
 }
 
 .article-meta{

themes/yilia/source-src/css/core/_animation.scss

@@ -317,26 +317,11 @@
   from, 60%, 75%, 90%, to {
     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
   }
-
-  0% {
-    transform: translate3d(0, 0, 0);
-  }
-
-  60% {
-    transform: translate3d(325px, 0, 0);
-  }
-
-  75% {
-    transform: translate3d(290px, 0, 0);
-  }
-
-  90% {
-    transform: translate3d(305px, 0, 0);
-  }
-
-  to {
-    transform: translate3d(300px, 0, 0);
-  }
+  0% {transform: translate3d(0, 0, 0);}
+  60% {transform: translate3d(325px, 0, 0);}
+  75% {transform: translate3d(290px, 0, 0);}
+  90% {transform: translate3d(305px, 0, 0);}
+  to {transform: translate3d(300px, 0, 0);}
 }
 
 %anmSmallLeftIn {
@@ -349,26 +334,11 @@
   from, 60%, 75%, 90%, to {
     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
   }
-
-  0% {
-    transform: translate3d(333px, 0, 0);
-  }
-
-  60% {
-    transform: translate3d(-25px, 0, 0);
-  }
-
-  75% {
-    transform: translate3d(10px, 0, 0);
-  }
-
-  90% {
-    transform: translate3d(-5px, 0, 0);
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-  }
+  0% {transform: translate3d(333px, 0, 0);}
+  60% {transform: translate3d(-25px, 0, 0);}
+  75% {transform: translate3d(10px, 0, 0);}
+  90% {transform: translate3d(-5px, 0, 0);}
+  to {transform: translate3d(0, 0, 0);}
 }
 
 %anmSmallLeftOut {

themes/yilia/source-src/css/core/_reset.scss

@@ -73,8 +73,7 @@ progress {
 
 // Address `[hidden]` styling not present in IE 8/9/10.
 // Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
-[hidden],
-template {
+[hidden],template {
   display: none;
 }
 
@@ -103,8 +102,7 @@ abbr[title] {
 }
 
 // Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
-b,
-strong {
+b,strong {
   font-weight: bold;
 }
 
@@ -125,8 +123,7 @@ small {
 }
 
 // Prevent `sub` and `sup` affecting `line-height` in all browsers.
-sub,
-sup {
+sub,sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
@@ -211,8 +208,7 @@ select { // 2
 // All other form control elements do not inherit `text-transform` values.
 // Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 // Correct `select` style inheritance in Firefox.
-button,
-select {
+button,select {
   text-transform: none;
 }
 
@@ -318,8 +314,7 @@ button {
 }
 
 // Android 下 input focus 消除高亮外框
-textarea,
-input {
+textarea,input {
   -webkit-user-modify: read-write-plaintext-only;
 }
 
@@ -362,8 +357,7 @@ table {
   border-spacing: 0;
 }
 
-td,
-th {
+td,th {
   padding: 0;
 }
 

themes/yilia/source-src/css/mobile-slider.scss

@@ -9,21 +9,13 @@
     position: relative;
     overflow: hidden;
     background: #88acdb;
-    -webkit-transition: all 0.2s ease-in;
     transition: all 0.2s ease-in;
-    display: -webkit-box;
-    -webkit-box-orient: horizontal;
-    -webkit-box-pack: center;
-    -webkit-box-align: center;
     text-align: center;
 }
 .header-author {
     text-align: center;
     margin: 0.67em 0;
     font-size: 30px;
-    -webkit-transition: 0.3s;
-    -moz-transition: 0.3s;
-    -ms-transition: 0.3s;
     transition: 0.3s;
 }
 .header-subtitle {

themes/yilia/source-src/css/mobile.scss

@@ -44,14 +44,10 @@ html, body, #container {
       padding: 5px 20px;
     }
   }
-  &.show {
-    .header-menu{
-      &.tools-nav {
+  &.show .header-menu.tools-nav{
     display: block;
   }
 }
-  }
-}
 
 #container .header-author.fixed {
   position: fixed;
@@ -159,7 +155,7 @@ html, body, #container {
     width: auto;
     height: 30px;
     margin-top: -5px;
-    position: ralative;
+    position: relative;
     .article-date{
       font-size: 12px;
       border-radius: 0;
@@ -257,9 +253,9 @@ html, body, #container {
   padding: 10px;
   .archive-year-wrap{
     position: relative;
-    padding: 0 0 0 0;
+    padding: 0;
     a{
-      padding: 0 0 0 0;
+      padding: 0;
     }
   }
   .article-meta{

themes/yilia/source-src/css/tags.scss

@@ -103,7 +103,7 @@
 
 .archive-article-date {
   color: $color9;
-  margin-right: 7.6923%;
+  margin-right: $articlePadding;
   float: right;
   transition: color 0.3s;
   &:hover {

themes/yilia/source-src/js/fix.js

@@ -9,7 +9,7 @@ function init() {
 	}
 
 	// 目录序号
-	if (yiliaConfig && yiliaConfig.toc_hide_index) {
+	if (window.themeConfig && window.themeConfig.toc_hide_index) {
 		let $a = document.querySelectorAll('.toc-number')
 		Array.prototype.forEach.call($a, function($em){
 			$em.style.display = 'none'

themes/yilia/source-src/js/main.js

@@ -15,12 +15,12 @@ Util.addLoadEvent(function() {
 	Aside.init()
 })
 const commentConfig = require("../config/comment.json")
-if(window.yiliaConfig.isPost && commentConfig.valine.enable) {
+if(window.themeConfig.isPost && commentConfig.valine.enable) {
   // 文章详情页面, 并且启用了评论, 则加载评论相关代码
   import(/* webpackChunkName: "comment" */ './comment')
 }
 
-if(window.yiliaConfig.pageid === 'PhotoWall') {
+if(window.themeConfig.pageid === 'PhotoWall') {
   // 自定义的照片墙页面
   import(/* webpackChunkName: "photo-wall" */ './photo-wall')
 }

themes/yilia/source-src/js/mobile.js

@@ -1,6 +1,3 @@
-import addClass from 'dom101/add-class'
-import removeClass from 'dom101/remove-class'
-import after from 'dom101/after'
 // 浏览器判断
 import Browser from './browser'
 // fix hexo 不支持的配置
@@ -14,11 +11,11 @@ function isPathMatch(path, href) {
 }
 
 function tabActive() {
-	let $tabs = document.querySelectorAll('.js-header-menu li a')
+	let tabs = document.querySelectorAll('.js-header-menu li a')
 	let path = window.location.pathname
-	Array.prototype.forEach.call($tabs, function($tab, i){
-		if (isPathMatch(path, $tab.getAttribute('href'))) {
-			addClass($tab, 'active')
+	Array.prototype.forEach.call(tabs, function(tab, i){
+		if (isPathMatch(path, tab.getAttribute('href'))) {
+      tab.classList.add('active')
 		}
 	})
 }
@@ -50,7 +47,12 @@ function scrollStop($dom, top, limit, zIndex, diff) {
 		let $newDom = $dom.$newDom
 		if (!$newDom) {
       $newDom = $dom.cloneNode(true)
-			after($dom, $newDom)
+      let parentNode = $dom.parentNode
+      if(parentNode.lastChild == $dom){ // 将新生成的节点插入到当前节点之后
+        parentNode.appendChild($newDom)
+      }else{
+        parentNode.insertBefore($newDom, $dom.nextSibling)
+      }
 			$dom.$newDom = $newDom
 			$newDom.style.position = 'fixed'
 			$newDom.style.top = (limit || nowTop) + 'px'
@@ -88,14 +90,12 @@ function bindScroll() {
 	handleScroll()
 }
 
-function init() {
+(function () {
 	if (Browser.versions.mobile && window.screen.width < 800) {
 		tabActive()
 		bindScroll()
 	}
-}
-
-init();
+})()
 
 Util.addLoadEvent(function() {
 	Fix.init()

themes/yilia/source-src/js/share.js

@@ -1,5 +1,3 @@
-import addClass from 'dom101/add-class'
-import removeClass from 'dom101/remove-class'
 import QRious from 'qrious'
 
 function generate(url, opts) {
@@ -13,26 +11,24 @@ function generate(url, opts) {
 
 var qrcodeInit = false
 function showWX() {
-  let $wx = document.querySelector('.js-wx-box')
-  let $mask = document.querySelector('.mask')
+  let wx = document.querySelector('.js-wx-box')
+  let mask = document.querySelector('.mask')
   if(!qrcodeInit) {
     new QRious({
       element: document.querySelector('.qrcode-canvas'),
       value: location.href
-    });
+    })
     qrcodeInit = true
   }
-  addClass($wx, 'in')
-  addClass($wx, 'ready')
-  addClass($mask, 'in')
+  wx.classList.add('in', 'ready')
+  mask.classList.add('in')
 }
 
 function hideWX() {
-  let $wx = document.querySelector('.js-wx-box')
-  let $mask = document.querySelector('.mask')
-  removeClass($wx, 'in')
-  removeClass($wx, 'ready')
-  removeClass($mask, 'in')
+  let wx = document.querySelector('.js-wx-box')
+  let mask = document.querySelector('.mask')
+  wx.classList.remove('in', 'ready')
+  mask.classList.remove('in')
 }
 
 function handleClick(type, opts) {

themes/yilia/source-src/js/slider.js

@@ -86,7 +86,7 @@ new Vue({
   },
   filters: {
     urlformat: (str) => {
-      return (window.yiliaConfig && window.yiliaConfig.root) ? window.yiliaConfig.root + str : '/' + str;
+      return (window.themeConfig && window.themeConfig.root) ? window.themeConfig.root + str : '/' + str;
     }
   },
   watch: {
@@ -101,7 +101,7 @@ new Vue({
     }
   },
   mounted () {
-    axios.get(window.yiliaConfig.root + 'content.json?t=' + (+ new Date()))
+    axios.get(window.themeConfig.root + 'content.json?t=' + (+ new Date()))
     .then((res)=>{
       this.items = res.data
     }).catch((err) => {

themes/yilia/source-src/js/viewer.js

@@ -36,6 +36,6 @@ function init() {
 }
 
 // export default { init }
-if(!window.yiliaConfig.pageid) { // 非个性化页面的普通文章
+if(!window.themeConfig.pageid) { // 非个性化页面的普通文章
   Util.addLoadEvent(init)
 }