安全加固：升级依赖消除高危漏洞，修复构建兼容性问题

【主项目依赖升级】
- hexo 6.x → 8.1.2：移除 swig-templates、swig-extras、旧版 cheerio、
  hexo-fs/hexo-util 等大量漏洞依赖链，解决 critical/high 级别漏洞
- hexo-renderer-marked 5.x → 7.0.1：修复 dompurify XSS 漏洞（GHSA-hpcv）
- gulp 4.x → 5.0.1：修复 vinyl-fs、glob/glob-stream、chokidar、
  braces 等 high 级漏洞链
- hexo-generator-sitemap 2.2.0 → 3.0.1：同步升级

【替换高危依赖】
- gulp-htmlmin 替换为 gulp-html-minifier-terser@7.1.0：
  gulp-htmlmin 依赖的 html-minifier 存在 ReDoS 高危漏洞且无修复版本，
  改用其维护分支 html-minifier-terser，API 完全兼容
- optimist 替换为 minimist@1.2.8（devDependency）：
  optimist 捆绑的 minimist@<=0.2.3 存在 prototype pollution critical 漏洞，
  直接使用修复版 minimist 替代

【移除无修复版本的高危包】
- 移除 hexo-generator-baidu-sitemap（无维护更新，内部捆绑 hexo@4.x
  导致一系列 critical 漏洞），在 scripts/generator.js 中实现等效的
  自定义 Baidu Sitemap 生成器替代，功能与原包完全一致

【npm overrides 修复传递依赖漏洞】
- 添加 overrides: { ejs: "^6.0.1" }：
  hexo-renderer-ejs@2.x 依赖 ejs@3.x，ejs@3.x 存在 SSTI critical 漏洞
  且引入 jake → filelist → minimatch → brace-expansion 漏洞链；
  ejs@6.x 已无 jake 依赖，critical 漏洞全部消除

【yilia 主题依赖升级】
- @babel/core 7.26.x → 7.29.7：修复 Arbitrary File Read 漏洞
- @babel/plugin-transform-runtime / @babel/preset-env 同步升级至 7.29.x
- postcss 8.5.3 → 8.5.25：修复 XSS 及路径遍历漏洞
- 移除 clean-webpack-plugin（依赖链含 brace-expansion 高危漏洞），
  改用 webpack 5 内置 output.clean 实现等效的增量清理功能
- 添加 overrides: { brace-expansion: "5.0.9" } 修复剩余传递依赖漏洞

【构建兼容性修复】
- scripts/generator.js 新增 jsfiddle tag 注册：
  hexo@8 移除了内置 {% jsfiddle %} tag 导致构建 FATAL，
  重新实现该 tag 保持原有 iframe 嵌入行为
- gulpfile.js generate 任务错误处理修正：
  原代码在 hexo FATAL 时调用 hexo.exit(err) 但不向 gulp 抛出异常，
  导致 series 继续执行后续任务（compressHtml 因 public/ 不存在而报错），
  修改为在 hexo 退出后重新 throw err 确保 gulp 正确感知失败

【修复结果】
- 主项目：56 个漏洞（8 低危、14 中危、25 高危、9 严重）→ 0 个漏洞
- yilia 主题：8 个漏洞 → 1 个低危
  （剩余 1 个为 vue@2.x ReDoS，仅影响构建时自身模板解析，
  修复需整体迁移到 Vue 3 重写主题，暂不处理）

.gitignore

@@ -1,7 +1,6 @@
 .DS_Store
 Thumbs.db
 db.json
-package-lock.json
 *.log
 node_modules/
 public/

gulpfile.js

@@ -1,14 +1,12 @@
 const gulp = require('gulp'),
-  htmlmin = require('gulp-htmlmin'),   // html压缩组件
+  htmlmin = require('gulp-html-minifier-terser'), // html压缩组件
   htmlclean = require('gulp-htmlclean'), // html清理组件
   plumber = require('gulp-plumber'),  // 容错组件（发生错误不跳出任务，并报出错误内容）
   Hexo = require('hexo'),
   log = require('fancy-log') // gulp的日志输出
 
 // 程序执行的传参
-const argv = require('optimist')
+const argv = require('minimist')(process.argv.slice(2))
-  .describe('deployPath', '静态化后发布的目录')
-  .argv
 
 const hexo = new Hexo(process.cwd(), {})
 
@@ -20,7 +18,8 @@ gulp.task('generate', async function() {
     await hexo.call('generate', { watch: false })
     return hexo.exit()
   } catch (err) {
-    return hexo.exit(err)
+    await hexo.exit(err)
+    throw err  // 让 gulp series 感知到失败并终止后续任务
   }
 })
 

package.json

@@ -3,33 +3,35 @@
   "version": "1.1.0",
   "private": true,
   "hexo": {
-    "version": "6.0.0"
+    "version": "8.1.2"
   },
   "scripts": {
     "dev": "hexo server",
     "build": "gulp"
   },
   "dependencies": {
-    "hexo": "^6.0.0",
+    "hexo": "^8.1.2",
     "hexo-generator-archive": "^1.0.0",
-    "hexo-generator-baidu-sitemap": "^0.1.9",
     "hexo-generator-category": "^1.0.0",
     "hexo-generator-feed": "^3.0.0",
     "hexo-generator-index": "^2.0.0",
     "hexo-generator-json-content": "^4.2.3",
-    "hexo-generator-sitemap": "^2.2.0",
+    "hexo-generator-sitemap": "^3.0.1",
     "hexo-generator-tag": "^1.0.0",
     "hexo-renderer-ejs": "^2.0.0",
-    "hexo-renderer-marked": "^5.0.0",
+    "hexo-renderer-marked": "^7.0.1",
     "hexo-server": "^3.0.0",
     "hexo-wordcount": "^6.0.1"
   },
   "devDependencies": {
-    "gulp": "^4.0.2",
+    "gulp": "^5.0.1",
     "gulp-htmlclean": "^2.7.22",
-    "gulp-htmlmin": "^5.0.1",
+    "gulp-html-minifier-terser": "^7.1.0",
     "gulp-plumber": "^1.2.1",
-    "nunjucks": "^3.2.3",
+    "minimist": "^1.2.8",
-    "optimist": "^0.6.1"
+    "nunjucks": "^3.2.3"
+  },
+  "overrides": {
+    "ejs": "^6.0.1"
   }
 }

scripts/generator.js

@@ -2,6 +2,16 @@ const nunjucks = require('nunjucks')
 const path = require('path')
 const fs = require('fs')
 
+// hexo@8 移除了内置 jsfiddle tag，在此重新注册
+hexo.extend.tag.register('jsfiddle', function(args) {
+  const shortcode = args[0]
+  const tabs = args[1] || 'js,resources,html,css,result'
+  const skin = args[2] || 'light'
+  const width = args[3] || '100%'
+  const height = args[4] || '300'
+  return `<iframe style="width: ${width}; height: ${height}px" src="//jsfiddle.net/${shortcode}/embedded/${tabs}/?skin=${skin}" allowfullscreen="allowfullscreen" frameborder="0"></iframe>`
+})
+
 const env = new nunjucks.configure({ autoescape: false })
 env.addFilter('noControlChars', function(str) {
 	return str && str.replace(/[\x00-\x1F\x7F]/g, '')
@@ -32,3 +42,40 @@ hexo.extend.generator.register('xml', function(locals){
     data: xmlData
   }
 })
+
+// 自定义 Baidu Sitemap 生成器（替代已废弃的 hexo-generator-baidu-sitemap）
+hexo.extend.generator.register('baidusitemap', function(locals) {
+  const config = hexo.config.baidusitemap || {}
+  const outputPath = config.path || 'baidusitemap.xml'
+
+  const posts = locals.posts.toArray().filter(function(post) { return !post.draft })
+  const pages = locals.pages.toArray()
+  const allItems = posts.concat(pages).sort(function(a, b) {
+    const dateA = (a.updated || a.date)
+    const dateB = (b.updated || b.date)
+    return dateB - dateA
+  })
+
+  const lines = [
+    '<?xml version="1.0" encoding="UTF-8"?>',
+    '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">'
+  ]
+
+  allItems.forEach(function(item) {
+    const dateObj = item.updated || item.date
+    const dateStr = dateObj && dateObj.format
+      ? dateObj.format('YYYY-MM-DD')
+      : new Date(dateObj).toISOString().split('T')[0]
+    lines.push('  <url>')
+    lines.push('    <loc>' + item.permalink + '</loc>')
+    lines.push('    <lastmod>' + dateStr + '</lastmod>')
+    lines.push('  </url>')
+  })
+
+  lines.push('</urlset>')
+
+  return {
+    path: outputPath,
+    data: lines.join('\n')
+  }
+})

themes/yilia/.babelrc

@@ -1,6 +1,9 @@
 {
   "presets": [
-    "@babel/preset-env"
+    ["@babel/preset-env", {
+      "useBuiltIns": "usage",
+      "corejs": 3
+    }]
   ],
   "plugins": [
     "@babel/transform-runtime"

themes/yilia/package.json

@@ -18,39 +18,38 @@
   "author": "litten",
   "license": "ISC",
   "dependencies": {
-    "babel-polyfill": "^6.23.0",
+    "@babel/runtime": "^7.26.0",
-    "leancloud-storage": "^3.7.3",
+    "core-js": "^3.40.0",
     "photoswipe": "^4.1.3",
     "qrious": "^4.0.2",
-    "scrollreveal": "^4.0.5",
+    "scrollreveal": "^4.0.9",
-    "vue": "^2.6.14"
+    "vue": "^2.7.16"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.5",
+    "@babel/core": "^7.29.7",
-    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/plugin-transform-runtime": "^7.29.0",
-    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-env": "^7.29.0",
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "^10.4.20",
-    "axios": "^0.21.1",
+    "babel-loader": "^9.2.1",
-    "babel-loader": "8.3.0",
+    "css-loader": "^7.1.2",
-    "clean-webpack-plugin": "^4.0.0",
+    "html-webpack-plugin": "^5.6.3",
-    "css-loader": "^5.2.7",
+    "less": "^4.2.2",
-    "file-loader": "^6.2.0",
+    "less-loader": "^12.2.0",
-    "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.9.2",
-    "mini-css-extract-plugin": "^2.6.0",
+    "postcss": "^8.5.25",
-    "postcss-loader": "^6.2.1",
+    "postcss-loader": "^8.1.1",
-    "sass": "^1.49.9",
+    "terser-webpack-plugin": "^5.3.11",
-    "sass-loader": "^12.6.0",
+    "webpack": "^5.97.1",
-    "terser-webpack-plugin": "^5.3.1",
+    "webpack-cli": "^5.1.4"
-    "url-loader": "^4.1.1",
+  },
-    "webpack": "^5.70.0",
+  "overrides": {
-    "webpack-cli": "^4.9.2"
+    "brace-expansion": "5.0.9"
   },
   "browserslist": [
     "> 1%",
     "last 2 versions",
     "not dead",
-    "iOS >= 7",
+    "iOS >= 10",
-    "Android >= 4",
+    "Android >= 5"
-    "not ie <= 8"
   ]
 }

themes/yilia/postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: [
-    "autoprefixer",
+    "autoprefixer"
-    "postcss-preset-env"
   ]
 }

themes/yilia/source-src/css/_core.less

@@ -0,0 +1,6 @@
+@charset "UTF-8";
+
+@import "core/_variables";
+@import "core/_mixin";
+@import "core/_animation";
+@import "core/_reset";

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

@@ -1,7 +0,0 @@
-@charset "UTF-8";
-
-@import "core/variables";
-@import "core/media-queries";
-@import "core/mixin";
-@import "core/animation";
-@import "core/reset";

themes/yilia/source-src/css/archive.less

@@ -3,8 +3,8 @@
   margin: 0 30px;
   padding-right: 60px;
   border-bottom: 1px solid #eee;
-  background: adjust-color($colorBg, $alpha: -0.2);
+  background: fade(@colorBg, 80%);
-  @extend %trans;
+  .trans();
   &:first-child {
     margin-top: 30px;
   }
@@ -20,7 +20,7 @@
     z-index: 1;
   }
   .archive-year-wrap a {
-    color: $color6;
+    color: @color6;
     font-weight: bold;
     padding-left: 48px;
   }
@@ -48,7 +48,7 @@
 
   .archive-article-title {
     font-size: 16px;
-    color: $colorText;
+    color: @colorText;
     transition: color 0.3s;
     &:hover {
       color: #657b83;
@@ -62,7 +62,7 @@
       padding-left: 2px;
       &:before {
         display: inline-block;
-        content: "“";
+        content: "\201C";
         font-family: serif;
         font-size: 30px;
         margin: 4px 4px 0 -12px;
@@ -84,14 +84,14 @@
     position: absolute;
     top: 10px;
     .article-date time {
-      color: $colorA;
+      color: @colorA;
     }
     .archive-article-date, .article-tag-list {
       margin-right: 30px;
       display: inline-block;
       vertical-align: middle;
       zoom: 1;
-      color: $color6;
+      color: @color6;
       font-size: 14px;
     }
     .archive-article-date {

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

@@ -39,8 +39,8 @@
 
 .article-entry {
   line-height: 1.8em;
-  padding-right: $articlePadding;
+  padding-right: @articlePadding;
-  padding-left: $articlePadding;
+  padding-left: @articlePadding;
   .post-count { // 字数统计
     color: rgb(185, 185, 185);
     font-size: 14px;
@@ -71,7 +71,7 @@
     font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", "Microsoft YaHei";
     word-wrap: break-word;
     font-size: 14px;
-    border-radius: $radiusSmall;
+    border-radius: @radiusSmall;
   }
   blockquote {
     padding: 15px 20px;
@@ -91,7 +91,7 @@
       content: "";
       width: 6px;
       height: 6px;
-      border: 1px solid $color9;
+      border: 1px solid @color9;
       border-radius: 10px;
       background: #aaa;
       display: inline-block;

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

@@ -12,8 +12,8 @@
   border-width: 1px;
   border-style: solid;
   border-color: #fff #ddd;
-  background: adjust-color($colorBg, $alpha: -0.2);
+  background: fade(@colorBg, 80%);
-  @extend %trans;
+  .trans();
   img {
     max-width: 100%;
   }
@@ -31,7 +31,7 @@
 .article-header {
   border-left: 5px solid #4d4d4d;
   padding: 30px 0px 15px 25px;
-  padding-left: $articlePadding;
+  padding-left: @articlePadding;
 }
 
 .article-meta {
@@ -55,7 +55,7 @@
   float: right;
   a {
     background-color: #4d4d4d;
-    color: $colorF;
+    color: @colorF;
     font-size: 12px;
     padding: 5px 8px 5px;
     line-height: 16px;
@@ -71,12 +71,12 @@
 }
 .article-info-index.article-info {
   padding-top: 20px;
-	margin: 30px $articlePadding 0 $articlePadding;
+  margin: 30px @articlePadding 0 @articlePadding;
   min-height: 72px;
   border-top: 1px solid #ddd;
 }
 .article-info-post.article-info {
   padding: 0;
   border: none;
-	margin: -30px 0 20px $articlePadding;
+  margin: -30px 0 20px @articlePadding;
 }

themes/yilia/source-src/css/aside.less

@@ -5,7 +5,7 @@
   z-index: 999;
   font-size: 14px;
   .icon {
-    color: $colorF;
+    color: @colorF;
     text-shadow: 1px 1px 1px #509eb7;
     font-size: 24px;
     line-height: 40px;
@@ -72,7 +72,7 @@
     transform-origin: 100% 100%;
     transform: translate3d(0, -10px, 0) rotate3d(1, 1, 1, -30deg);
     a {
-      color: $colorF;
+      color: @colorF;
     }
     &::after {
       top: initial;

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

@@ -0,0 +1,94 @@
+@charset "UTF-8";
+
+//-----------------------------------------------------
+// animate less
+// 提供动画 mixin 及基础 placeholder 类
+//-----------------------------------------------------
+
+// animation-basic 基础动画属性
+.animation-basic() {
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+}
+
+// 公共动画基础属性
+//-----------------------------------------------------
+.anmCommon() {
+  animation-duration: .5s;
+  animation-fill-mode: both;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes leftIn {
+  from {
+    transform: translate(0, 0);
+  }
+  to {
+    transform: translate(333px, 0);
+  }
+}
+
+@keyframes leftOut {
+  from {
+    transform: translate(333px, 0);
+  }
+  to {
+    transform: translate(0, 0);
+  }
+}
+
+.anmLeftIn() {
+  .anmCommon();
+  animation-name: leftIn;
+}
+
+.anmLeftOut() {
+  .anmCommon();
+  animation-name: leftOut;
+}
+
+@keyframes smallLeftIn {
+  from {
+    transform: translate(0, 0);
+    opacity: 0;
+  }
+  to {
+    transform: translate(300px, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes smallleftOut {
+  from {
+    transform: translate(300px, 0);
+    opacity: 1;
+  }
+  to {
+    transform: translate(0, 0);
+    opacity: 0;
+  }
+}
+
+.anmSmallLeftIn() {
+  .anmCommon();
+  animation-name: smallLeftIn;
+}
+
+.anmSmallLeftOut() {
+  .anmCommon();
+  animation-name: smallleftOut;
+}
+
+// 头像旋转动画
+@keyframes profilepic {
+  0% {
+    transform: rotate(360deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+.picRotate() {
+  animation: profilepic 5s linear infinite;
+}

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

@@ -1,328 +0,0 @@
-@charset "UTF-8";
-
-//-----------------------------------------------------
-// animate.scss
-// 提供6组动画 fade-in/out, shrink-in/out, up-in/out, down-in/out, left-in/out, right-in/out
-//-----------------------------------------------------
-
-%animation-basic {
-  animation-duration: 0.3s;
-  animation-fill-mode: both;
-}
-
-// fade in/out
-//-----------------------------------------------------
-
-@mixin animation-fade-in($className: fade, $from: 0) {
-  $name: str-insert(In, $className, 0);
-
-  .#{$className}-in {
-    animation-name: $name;
-    @extend %animation-basic;
-  }
-  @include animation-fade($name: $name, $from: $from);
-}
-
-@mixin animation-fade-out($className: fade, $to: 0) {
-  $name: str-insert(Out, $className, 0);
-
-  .#{$className}-out {
-    animation-name: $name;
-    @extend %animation-basic;
-  }
-
-  @include animation-fade($name: $name, $from: 1, $to: $to);
-}
-
-// shrink in/out
-//-----------------------------------------------------
-
-@mixin animation-shrink-in($className: shrink, $from: 0.815) {
-  $name: str-insert(In, $className, 0);
-  
-  .#{$className}-in {
-    animation-name: $name;
-    @extend %animation-basic;
-  }
-  @keyframes #{$name} {
-    0% {
-      opacity: 0;
-      transform: scale($from);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-}
-
-@mixin animation-shrink-out($className: shrink, $to: 1.185) {
-  $name: str-insert(Out, $className, 0);
-
-  .#{$className}-out {
-    animation-name: $name;
-    @extend %animation-basic;
-  }
-
-  @keyframes #{$name} {
-    0% {
-      opacity: 1;
-      transform: scale(1);
-    }
-    100% {
-      opacity: 0;
-      transform: scale($to);
-    }
-  }
-}
-
-// down in/out
-//-----------------------------------------------------
-
-@mixin animation-down-in($className: down, $value: 100%) {
-  $name: str-insert(In, $className, 0);
-  
-  .#{$className}-in {
-    animation-name: $name;
-    @extend %animation-basic;
-  }
-
-  @keyframes #{$name} {
-    0% {
-      opacity: 0;
-      transform: translate(0, $value);
-    }
-    100% {
-      opacity: 1;
-      transform: translate(0, 0);
-    }
-  }
-}
-
-@mixin animation-down-out($className: down, $value: 100%) {
-  $name: str-insert(Out, $className, 0);
-
-  .#{$className}-out {
-    animation-name: $name;
-    @extend %animation-basic;
-  }
-
-  @keyframes #{$name} {
-    0% {
-      opacity: 1;
-      transform: translate(0, 0);
-    }
-    100% {
-      opacity: 0;
-      transform: translate(0, $value);
-    }
-  }
-}
-
-// up in/out
-//-----------------------------------------------------
-
-@mixin animation-up-in($className: up, $value: -100%) {
-  $name: str-insert(In, $className, 0);
-  
-  .#{$className}-in {
-    animation-name: $name;
-    @extend %animation-basic;
-  }
-
-  @keyframes #{$name} {
-    0% {
-      opacity: 0;
-      transform: translate(0, $value);
-    }
-    100% {
-      opacity: 1;
-      transform: translate(0, 0);
-    }
-  }
-}
-
-@mixin animation-up-out($className: up, $value: -100%) {
-  $name: str-insert(Out, $className, 0);
-
-  .#{$className}-out {
-    animation-name: $name;
-    @extend %animation-basic;
-  }
-
-  @keyframes #{$name} {
-    0% {
-      opacity: 1;
-      transform: translate(0, 0);
-    }
-    100% {
-      opacity: 0;
-      transform: translate(0, $value);
-    }
-  }
-}
-
-// left in/out
-//-----------------------------------------------------
-
-@mixin animation-left-in($className: left, $value: -100%) {
-  $name: str-insert(In, $className, 0);
-  
-  .#{$className}-in {
-    animation-name: $name;
-    @extend %animation-basic;
-  }
-
-  @keyframes #{$name} {
-    0% {
-      opacity: 0;
-      transform: translate($value, 0);
-    }
-    100% {
-      opacity: 1;
-      transform: translate(0, 0);
-    }
-  }
-}
-
-@mixin animation-left-out($className: left, $value: -100%) {
-  $name: str-insert(Out, $className, 0);
-
-  .#{$className}-out {
-    animation-name: $name;
-    @extend %animation-basic;
-  }
-
-  @keyframes #{$name} {
-    0% {
-      opacity: 1;
-      transform: translate(0, 0);
-    }
-    100% {
-      opacity: 0;
-      transform: translate($value, 0);
-    }
-  }
-}
-
-// right in/out
-//-----------------------------------------------------
-
-@mixin animation-right-in($className: right, $value: 100%) {
-  $name: str-insert(In, $className, 0);
-  
-  .#{$className}-in {
-    animation-name: $name;
-    @extend %animation-basic;
-  }
-
-  @keyframes #{$name} {
-    0% {
-      opacity: 0;
-      transform: translate($value, 0);
-    }
-    100% {
-      opacity: 1;
-      transform: translate(0, 0);
-    }
-  }
-}
-
-@mixin animation-right-out($className: right, $value: 100%) {
-  $name: str-insert(Out, $className, 0);
-
-  .#{$className}-out {
-    animation-name: $name;
-    @extend %animation-basic;
-  }
-
-  @keyframes #{$name} {
-    0% {
-      opacity: 1;
-      transform: translate(0, 0);
-    }
-    100% {
-      opacity: 0;
-      transform: translate($value, 0);
-    }
-  }
-}
-
-%anmCommon {
-  animation-duration: .5s;
-  animation-fill-mode: both;
-  animation-timing-function: ease-in-out;
-}
-
-@keyframes leftIn {
-  from {
-    transform: translate(0, 0);
-  }
-  to {
-    transform: translate(333px, 0);
-  }
-}
-
-@keyframes leftOut {
-  from {
-    transform: translate(333px, 0);
-  }
-  to {
-    transform: translate(0, 0);
-  }
-}
-
-%anmLeftIn {
-  @extend %anmCommon;
-  animation-name: leftIn;
-}
-
-%anmLeftOut {
-  @extend %anmCommon;
-  animation-name: leftOut;
-}
-
-@keyframes smallLeftIn {
-  from {
-    transform: translate(0, 0);
-    opacity: 0;
-  }
-  to {
-    transform: translate(300px, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes smallleftOut {
-  from {
-    transform: translate(300px, 0);
-    opacity: 1;
-  }
-  to {
-    transform: translate(0, 0);
-    opacity: 0;
-  }
-}
-
-%anmSmallLeftIn {
-  @extend %anmCommon;
-  animation-name: smallLeftIn;
-}
-
-%anmSmallLeftOut {
-  @extend %anmCommon;
-  animation-name: smallleftOut;
-}
-
-// 头像旋转动画
-@keyframes profilepic {
-  0% {
-    transform: rotate(360deg);
-  }
-  100% {
-    transform: rotate(0deg);
-  }
-}
-%picRotate {
-  animation: profilepic 5s linear infinite;
-}

themes/yilia/source-src/css/core/_media-queries.scss

@@ -1,247 +0,0 @@
-@charset "utf-8";
-
-//----------------------------------------------------- 
-// media queries scss
-// author: Rafal Bromirski
-// github: http://github.com/paranoida/sass-mediaqueries
-// version: 1.6.1
-//-----------------------------------------------------
-
-
-// generator
-// ----------------------------------------------------
-
-@mixin mq($args...) {
-  $media-type: 'only screen';
-  $media-type-key: 'media-type';
-  $args: keywords($args);
-  $expr: '';
-
-  @if map-has-key($args, $media-type-key) {
-    $media-type: map-get($args, $media-type-key);
-    $args: map-remove($args, $media-type-key);
-  }
-
-  @each $key, $value in $args {
-    @if $value {
-      $expr: "#{$expr} and (#{$key}: #{$value})";
-    }
-  }
-
-  @media #{$media-type} #{$expr} {
-    @content;
-  }
-}
-
-
-// screen
-// ----------------------------------------------------
-
-@mixin screen($min, $max, $orientation: false) {
-  @include mq($min-width: $min, $max-width: $max, $orientation: $orientation) {
-    @content;
-  }
-}
-
-@mixin max-screen($max) {
-  @include mq($max-width: $max) {
-    @content;
-  }
-}
-
-@mixin min-screen($min) {
-  @include mq($min-width: $min) {
-    @content;
-  }
-}
-
-@mixin screen-height($min, $max, $orientation: false) {
-  @include mq($min-height: $min, $max-height: $max, $orientation: $orientation) {
-    @content;
-  }
-}
-
-@mixin max-screen-height($max) {
-  @include mq($max-height: $max) {
-    @content;
-  }
-}
-
-@mixin min-screen-height($min) {
-  @include mq($min-height: $min) {
-    @content;
-  }
-}
-
-
-// hdpi
-// ----------------------------------------------------
-
-@mixin hdpi($ratio: 1.3) {
-  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
-  screen and (min-resolution: #{round($ratio*96)}dpi) {
-    @content;
-  }
-}
-
-
-// hdtv
-// ----------------------------------------------------
-
-@mixin hdtv($standard: '1080') {
-  $min-width: false;
-  $min-height: false;
-
-  $standards: ('720p', 1280px, 720px)
-              ('1080', 1920px, 1080px)
-              ('2K', 2048px, 1080px)
-              ('4K', 4096px, 2160px);
-
-  @each $s in $standards {
-    @if $standard == nth($s, 1) {
-      $min-width: nth($s, 2);
-      $min-height: nth($s, 3);
-    }
-  }
-
-  @include mq(
-    $min-device-width: $min-width,
-    $min-device-height: $min-height,
-    $min-width: $min-width,
-    $min-height: $min-height
-  ) {
-    @content;
-  }
-}
-
-
-// iphone 4
-// ----------------------------------------------------
-
-@mixin iphone4($orientation: false) {
-  $min: 320px;
-  $max: 480px;
-  $pixel-ratio: 2;
-  $aspect-ratio: '2/3';
-
-  @include mq(
-    $min-device-width: $min,
-    $max-device-width: $max,
-    $orientation: $orientation,
-    $device-aspect-ratio: $aspect-ratio,
-    $-webkit-device-pixel-ratio: $pixel-ratio
-  ) {
-    @content;
-  }
-}
-
-
-// iphone 5
-// ----------------------------------------------------
-
-@mixin iphone5($orientation: false) {
-  $min: 320px;
-  $max: 568px;
-  $pixel-ratio: 2;
-  $aspect-ratio: '40/71';
-
-  @include mq(
-    $min-device-width: $min,
-    $max-device-width: $max,
-    $orientation: $orientation,
-    $device-aspect-ratio: $aspect-ratio,
-    $-webkit-device-pixel-ratio: $pixel-ratio
-  ) {
-    @content;
-  }
-}
-
-
-// iphone 6
-// ----------------------------------------------------
-
-@mixin iphone6($orientation: false) {
-  $min: 375px;
-  $max: 667px;
-  $pixel-ratio: 2;
-
-  @include mq(
-    $min-device-width: $min,
-    $max-device-width: $max,
-    $orientation: $orientation,
-    $-webkit-device-pixel-ratio: $pixel-ratio
-  ) {
-    @content;
-  }
-}
-
-
-// iphone 6 plus
-// ----------------------------------------------------
-
-@mixin iphone6-plus($orientation: false) {
-  $min: 414px;
-  $max: 736px;
-  $pixel-ratio: 3;
-
-  @include mq(
-    $min-device-width: $min,
-    $max-device-width: $max,
-    $orientation: $orientation,
-    $-webkit-device-pixel-ratio: $pixel-ratio
-  ) {
-    @content;
-  }
-}
-
-
-// ipad (all)
-// ----------------------------------------------------
-
-@mixin ipad($orientation: false) {
-  $min: 768px;
-  $max: 1024px;
-
-  @include mq(
-    $min-device-width: $min,
-    $max-device-width: $max,
-    $orientation: $orientation
-  ) {
-    @content;
-  }
-}
-
-
-// ipad-retina
-// ----------------------------------------------------
-
-@mixin ipad-retina($orientation: false) {
-  $min: 768px;
-  $max: 1024px;
-  $pixel-ratio: 2;
-
-  @include mq(
-    $min-device-width: $min,
-    $max-device-width: $max,
-    $orientation: $orientation,
-    $-webkit-device-pixel-ratio: $pixel-ratio
-  ) {
-    @content;
-  }
-}
-
-
-// orientation
-// ----------------------------------------------------
-
-@mixin landscape() {
-  @include mq($orientation: landscape) {
-    @content;
-  }
-}
-
-@mixin portrait() {
-  @include mq($orientation: portrait) {
-    @content;
-  }
-}

themes/yilia/source-src/css/core/_mixin.less

@@ -0,0 +1,407 @@
+@charset "UTF-8";
+
+//-----------------------------------------------------
+// mixin less
+// 包括常用的 mixin 及辅助样式
+// LESS 中用 .name() 定义 mixin（不会输出到 CSS），用 .name() 调用
+//-----------------------------------------------------
+
+
+// Center-align a block level element
+//-----------------------------------------------------
+.center-block() {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// clearfix
+//-----------------------------------------------------
+.clearfix() {
+  &::before,
+  &::after {
+    content: "";
+    display: table;
+  }
+  &::after {
+    clear: both;
+  }
+}
+
+// Hide only visually, but have it available for screenreaders
+//-----------------------------------------------------
+.hidden-clip() {
+  position: absolute;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+// ellipsis
+//-----------------------------------------------------
+.ellipsis() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+// ellipsis lines (only old webkit flex box)
+//-----------------------------------------------------
+.ellipsis-lines(@lines: 2) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: @lines;
+  -webkit-box-orient: vertical;
+}
+
+// word-break
+//-----------------------------------------------------
+.word-break() {
+  white-space: normal;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
+// disabled
+//-----------------------------------------------------
+.disabled(@disabledText: @colorDisabled-text; @disabledBg: @colorDisabled-bg; @disabledBorder: false) {
+  background-color: @disabledBg !important;
+  color: @disabledText !important;
+  cursor: default !important;
+  pointer-events: none !important;
+}
+
+// image replace text
+//-----------------------------------------------------
+.ir() {
+  font: 0/0 a;
+  text-shadow: none;
+  border: 0 none;
+  color: transparent;
+}
+
+// fixed top or bottom
+//-----------------------------------------------------
+.fixed(@pos: 0) {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: @pos;
+}
+
+.fixed-bottom() {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+// justify 左右对齐
+//-----------------------------------------------------
+.justify() {
+  display: flex;
+  justify-content: space-between;
+}
+
+// retina border 0.5px 实现 (ios9)
+//-----------------------------------------------------
+.retina-one-px() {
+  @supports (border-width: 0.5px) {
+    @media only screen and (-webkit-min-device-pixel-ratio: 2), screen and (-webkit-min-device-pixel-ratio: 3) {
+      border-width: 0.5px;
+    }
+  }
+}
+
+// retina border via linear-gradient
+//-----------------------------------------------------
+.retina-one-px-bg(@direction: top; @color: @colorBorder) {
+  background-repeat: no-repeat;
+}
+
+// retina border via transform
+//-----------------------------------------------------
+.retina-one-px-border(@direction: top; @color: @colorBorder) {
+  position: absolute;
+  left: 0;
+  top: 0;
+  box-sizing: border-box;
+  right: 0;
+  height: 0;
+  transform: scaleY(0.5);
+  border-top: 1px solid @color;
+}
+
+.retina-one-px-border-bottom(@color: @colorBorder) {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 0;
+  box-sizing: border-box;
+  transform: scaleY(0.5);
+  border-top: 1px solid @color;
+}
+
+.retina-one-px-border-all(@color: @colorBorder) {
+  position: absolute;
+  left: 0;
+  top: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  transform-origin: left top;
+  transform: scale(0.5);
+  border: 1px solid @color;
+}
+
+// border top & bottom placeholder
+//-----------------------------------------------------
+.border-tb() {
+  position: relative;
+  &::before {
+    content: "";
+    .retina-one-px-border();
+    z-index: 1;
+  }
+  &::after {
+    content: "";
+    .retina-one-px-border-bottom();
+  }
+}
+
+// border all placeholder
+//-----------------------------------------------------
+.border-all() {
+  position: relative;
+  &::before {
+    content: "";
+    .retina-one-px-border-all();
+    z-index: -1;
+  }
+}
+
+// equal-table
+//-----------------------------------------------------
+.equal-table(@child: ~"li") {
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+  @{child} {
+    display: table-cell;
+  }
+}
+
+// equal-flex
+//-----------------------------------------------------
+.equal-flex(@child: ~"li") {
+  display: flex;
+  @{child} {
+    flex: 1;
+    width: 1%;
+  }
+}
+
+// flex center
+//-----------------------------------------------------
+.center-flex() {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+// translate center
+//-----------------------------------------------------
+.center-translate() {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+}
+
+// triangle 三角箭头
+//-----------------------------------------------------
+.triangle-basic() {
+  content: "";
+  height: 0;
+  width: 0;
+  overflow: hidden;
+}
+
+.triangle(@direction: top; @borderWidth: 6px; @borderColor: @colorC) {
+  .triangle-basic();
+}
+
+// v-arrow 方向箭头
+//-----------------------------------------------------
+.v-arrow(@direction: right; @borderWidth: 2px; @size: 10px) {
+  display: inline-block;
+  vertical-align: middle;
+  width: @size;
+  height: @size;
+  border-top: @borderWidth solid currentColor;
+  border-right: @borderWidth solid currentColor;
+  transform: rotate(45deg);
+}
+
+// btn-size
+//-----------------------------------------------------
+.btn-size(@padding: 1em; @height: @barHeight; @radius: 3px) {
+  padding: 0 @padding;
+  line-height: (@height - 2px);
+  border-radius: @radius;
+}
+
+// btn-color (simplified)
+//-----------------------------------------------------
+.btn-color(@btnColorText: #333; @btnColorBg: #666; @btnColorBorder: false) {
+  color: @btnColorText;
+  background-color: @btnColorBg;
+  &:hover, &:active {
+    background-color: darken(@btnColorBg, 5%);
+  }
+}
+
+// function: tint - 为颜色添加白色
+//-----------------------------------------------------
+.tint(@color; @percent) {
+  // Use mix(white, @color, @percent) equivalent
+  // In LESS: mix(white, @color, @percent)
+}
+
+// function: shade - 为颜色添加黑色
+//-----------------------------------------------------
+.shade(@color; @percent) {
+  // In LESS: mix(black, @color, @percent)
+}
+
+
+// 下面是常用 placeholder 转为 LESS mixin
+//-----------------------------------------------------
+
+// shadow
+.shadow() {
+  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .75);
+}
+
+// trans
+.trans() {
+  transition: all 0.2s ease-in;
+}
+
+// trans8
+.trans8() {
+  transition: all 0.8s ease-in;
+}
+
+// display-flex
+.display-flex() {
+  display: flex;
+}
+
+// transition-all
+.transition-all() {
+  transition: all 0.3s ease-in-out;
+}
+
+// translate3d
+.translate3d() {
+  transform: translate3d(0, 0, 0);
+}
+
+// btn-basic 按钮基本样式
+.btn-basic() {
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer;
+  text-align: center;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  user-select: none;
+  padding: 0 1em;
+  white-space: nowrap;
+}
+
+// bar-line
+.bar-line() {
+  line-height: (@barHeight - 10px);
+  padding: 5px 10px;
+  position: relative;
+  display: block;
+  overflow: hidden;
+  &:active,
+  &:hover {
+    background-color: darken(@colorF, 3%);
+  }
+  &:not(:first-of-type)::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    box-sizing: border-box;
+    right: 0;
+    height: 0;
+    transform: scaleY(0.5);
+    border-top: 1px solid @colorBorder;
+    z-index: 1;
+  }
+}
+
+// item-v-right 右侧箭头
+.item-v-right() {
+  &::after {
+    content: "";
+    display: inline-block;
+    vertical-align: middle;
+    width: 10px;
+    height: 10px;
+    border-top: 2px solid currentColor;
+    border-right: 2px solid currentColor;
+    color: @colorC;
+    position: absolute;
+    right: 15px;
+    top: 50%;
+    margin-top: -1px;
+    transform: rotate(45deg) translate(0, -50%);
+    box-sizing: border-box;
+  }
+}
+
+// gap-item 间隔列表
+.gap-item() {
+  position: relative;
+  background: #fff;
+  margin: 10px 0;
+  &:active,
+  &:hover {
+    background-color: darken(@colorF, 3%);
+  }
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    box-sizing: border-box;
+    right: 0;
+    height: 0;
+    transform: scaleY(0.5);
+    border-top: 1px solid @colorBorder;
+  }
+  &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 0;
+    box-sizing: border-box;
+    transform: scaleY(0.5);
+    border-top: 1px solid @colorBorder;
+  }
+}
+
+// triangle-basic
+.triangle-basic-class() {
+  content: "";
+  height: 0;
+  width: 0;
+  overflow: hidden;
+}

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

@@ -1,694 +0,0 @@
-@charset "UTF-8";
-
-//-----------------------------------------------------  
-// mixin scss
-// 包括常用的mixin, %, @function 及辅助的btn和背景图片icon
-// mixin，通过@include调用，样式通过拷贝的方式使用，尤其适用于传递参数
-// %，通过@extend调用，样式通过组合申明的方式使用，适用于不传参数的代码片段  
-// @function，返回一个值，用于调用
-//-----------------------------------------------------
-
-// mixin & %
-// 既定义了mixin也定义了%，根据需求使用@include或@extend调用
-//-----------------------------------------------------
-
-// Center-align a block level element
-@mixin center-block($extend: true) {
-  @if $extend {
-    @extend %center-block;
-  }
-  @else {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-%center-block {
-  @include center-block(false);
-}
-
-// clearfix
-@mixin clearfix($extend: true) {
-  @if $extend {
-    @extend %clearfix;
-  }
-  @else {
-    &::before,
-    &::after {
-      content: "";
-      display: table;
-    }
-    &::after {
-      clear: both;
-    }
-  }
-}
-
-%clearfix {
-  @include clearfix(false);
-}
-
-// Hide only visually, but have it available for screenreaders
-// 只隐藏于视觉，屏幕浏览器可以阅读
-@mixin hidden-clip($extend: true) {
-  @if $extend {
-    @extend %hidden-clip;
-  }
-  @else {
-    position: absolute;
-    clip: rect(1px, 1px, 1px, 1px);
-  }
-}
-
-%hidden-clip {
-  @include hidden-clip(false);
-}
-
-// ellipsis
-@mixin ellipsis($extend: true) {
-  @if $extend {
-    @extend %ellipsis;
-  }
-  @else {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-}
-
-%ellipsis {
-  @include ellipsis(false);
-}
-
-// ellipsis lines
-// only old webkit flex box
-@mixin ellipsis-lines($lines: 2) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: $lines;
-  -webkit-box-orient: vertical;
-}
-
-// word-break
-@mixin word-break($extend: true) {
-  @if $extend {
-    @extend %word-break;
-  }
-  @else {
-    white-space: normal;
-    word-wrap: break-word;
-    word-break: break-all;
-  }
-}
-
-%word-break {
-  @include word-break(false);
-}
-
-// disabled
-// add !important
-@mixin disabled($colorText: map-get($colorDisabled, text), $colorBg: map-get($colorDisabled, bg), $colorBorder: false) {
-  background-color: $colorBg !important;
-  color: $colorText !important;
-  cursor: default !important;
-  pointer-events: none !important;
-  @if $colorBorder {
-    border: 1px solid map-get($colorDisabled, border);
-  }
-}
-
-%disabled {
-  @include disabled;
-}
-
-// image replace text
-@mixin ir($extend: true) {
-  @if $extend {
-    @extend %ir;
-  }
-  @else {
-    font: 0/0 a;
-    text-shadow: none;
-    border: 0 none;
-    color: transparent;
-  }
-}
-
-%ir {
-  @include ir(false);
-}
-
-// fixed top or bottom or bottom & top
-@mixin fixed($pos: 0) {
-  position: fixed;
-  left: 0;
-  right: 0;
-  @if $pos == bottom {
-    bottom: 0;
-  } @else if $pos == all {
-    top: 0;
-    bottom: 0;
-  } @else {
-    top: $pos;
-  }
-}
-
-%fixed-top {
-  @include fixed;
-}
-
-%fixed-bottom {
-  @include fixed(bottom);
-}
-
-// justify 
-// 左右对齐
-@mixin justify($extend: true) {
-  @if $extend {
-    @extend %justify;
-  }
-  @else {
-    display: flex;
-    justify-content: space-between;
-  }
-}
-
-%justify {
-  @include justify(false);
-}
-
-// retina border
-// 0.5px实现 ios9
-@mixin retina-one-px() {
-  @supports (border-width: 0.5px) {
-    @media only screen and (-webkit-min-device-pixel-ratio: 2), screen and (-webkit-min-device-pixel-ratio: 3) {
-      border-width: 0.5px;
-    }
-  }
-}
-
-// linear-gradient实现
-// 安卓4.3- 不支持background-size的百分比
-@mixin retina-one-px-bg($direction: top, $color: $colorBorder) {
-  background-repeat: no-repeat;
-  @if $direction == top {
-    background-image: linear-gradient(to bottom, $color 50%, transparent 50%);
-    background-size: 100% 1px;
-  }
-  @if $direction == bottom {
-    background-image: linear-gradient(to top, $color 50%, transparent 50%);
-    background-size: 100% 1px;
-    background-position: left bottom;
-  }
-  @if $direction == left {
-    background-image: linear-gradient(to right, $color 50%, transparent 50%);
-    background-size: 1px 100%;
-  }
-  @if $direction == right {
-    background-image: linear-gradient(to left, $color 50%, transparent 50%);
-    background-size: 1px 100%;
-    background-position: right top;
-  }
-  @if $direction == v { // 左右两个边框
-    background-image: linear-gradient(to right, $color 50%, transparent 50%),linear-gradient(to left, $color 50%, transparent 50%);
-    background-size: 1px 100%;
-    background-position: left top, right top;
-  }
-  @if $direction == h { // 上下两个边框
-    background-image: linear-gradient(to bottom, $color 50%, transparent 50%), linear-gradient(to top, $color 50%, transparent 50%);
-    background-size: 100% 1px;
-    background-position: left top, left bottom;
-  }
-  @if $direction == all { // 上下左右四个边框
-    background-image: linear-gradient(to bottom, $color 50%, transparent 50%), linear-gradient(to top, $color 50%, transparent 50%), linear-gradient(to right, $color 50%, transparent 50%),linear-gradient(to left, $color 50%, transparent 50%);
-    background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
-    background-position: left top, left bottom, left top, right top;
-  }
-}
-
-// border和transform实现
-// 注意before和after的层级问题
-@mixin retina-one-px-border($direction: top, $color: $colorBorder) {
-  position: absolute;
-  left: 0;
-  top: 0;
-  box-sizing: border-box;
-
-  @if $direction == top or $direction == bottom{  
-    right: 0;
-    height: 0;
-    transform: scaleY(0.5);
-    border-top: 1px solid $color;
-  }
-  @if $direction == bottom {
-    top: auto;
-    bottom: 0;
-  }
-  @if $direction == right or $direction == left{
-    width: 0;
-    bottom: 0;
-    transform: scaleX(0.5);
-    border-left: 1px solid $color;
-  }
-  @if $direction == right {
-    left: auto;
-    right: 0;
-  }
-  @if $direction == all {
-    width: 200%;
-    height: 200%;
-    transform-origin: left top;
-    transform: scale(0.5);
-    border: 1px solid $color;
-  }
-}
-
-// border top & bottom
-%border-tb {
-  position: relative;
-  &::before {
-    content: "";
-    @include retina-one-px-border(top);
-    z-index: 1;
-  }
-  &::after {
-    content: "";
-    @include retina-one-px-border(bottom);
-  }
-}
-
-// border all
-%border-all {
-  position: relative;
-  &::before {
-    content: "";
-    @include retina-one-px-border(all);
-    z-index: -1;
-  }
-}
-
-// mixin
-// 只定义了mixin，所以只能通过@include来调用
-//-----------------------------------------------------
-
-// table 等
-// $child 参数请使用单引号，因为用于子元素选择器
-@mixin equal-table($child: 'li') {
-  display: table;
-  table-layout: fixed;
-  width: 100%;
-
-  #{unquote($child)} {
-    display: table-cell;
-  }
-}
-
-// flex 等分
-// $child 参数请使用单引号，因为用于子元素选择器
-@mixin equal-flex($child: 'li') {
-  display: flex;
-
-  #{unquote($child)} {
-    flex: 1;
-    width: 1%;
-  }
-}
-
-// line equal gap
-// $child 参数请使用单引号，因为用于子元素选择器
-@mixin line-equal-gap($gap: 10px, $child: 'li', $lr: true) {
-  display: flex;
-
-  @if $lr {
-    padding-left: $gap;
-    padding-right: $gap;
-  }
-
-  #{unquote($child)} {
-    flex: 1;
-    width: 1%;
-    &:not(:first-of-type){
-      margin-left: $gap;
-    }
-  }
-}
-
-// line equal item
-@mixin line-equal-item($lr: true) {
-  display: flex;
-  justify-content: space-between;
-  @if $lr {
-    &::before,
-    &::after {
-      content: "";
-    }
-  }
-}
-
-// flex center
-@mixin center-flex($direction: both) {
-  display: flex;
-  @if $direction == both {
-    justify-content: center;
-    align-items: center;
-  }
-  @else if $direction == x {
-    justify-content: center;
-  }
-  @else if $direction == y {
-    align-items: center;
-  }
-}
-
-// translate center
-@mixin center-translate($direction: both) {
-  position: absolute;
-  @if $direction == both {
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0);
-  }
-  @else if $direction == x {
-    left: 50%;
-    transform: translate3d(-50%, 0, 0);
-  }
-  @else if $direction == y {
-    top: 50%;
-    transform: translate3d(0, -50%, 0);
-  }
-}
-
-// object wrap
-// $child 参数请使用单引号，因为用于子元素选择器
-@mixin object-wrap($percent: 100%, $child: 'img') {
-  position: relative;
-  padding-top: $percent;
-  height: 0;
-
-  #{unquote($child)} {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-}
-
-// triangle 三角箭头
-// 可采用空元素或伪元素生成，具体定位这里不涉及
-%triangle-basic {
-  content: "";
-  height: 0;
-  width: 0;
-  overflow: hidden;
-}
-
-@mixin triangle($direction: top, $borderWidth: 6px, $borderColor: $colorC) {
-  @extend %triangle-basic;
-  @if $direction == top {
-    border-bottom: $borderWidth solid $borderColor;
-    border-left: $borderWidth dashed transparent;
-    border-right: $borderWidth dashed transparent;
-  }
-  @else if $direction == right {
-    border-left: $borderWidth solid $borderColor;
-    border-top: $borderWidth dashed transparent;
-    border-bottom: $borderWidth dashed transparent;
-  }
-  @else if $direction == bottom {
-    border-top: $borderWidth solid $borderColor;
-    border-left: $borderWidth dashed transparent;
-    border-right: $borderWidth dashed transparent;
-  }
-  @else if $direction == left {
-    border-right: $borderWidth solid $borderColor;
-    border-top: $borderWidth dashed transparent;
-    border-bottom: $borderWidth dashed transparent;
-  }
-}
-
-// v arrow 方向箭头
-@mixin v-arrow($direction: right, $borderWidth: 2px, $size: 10px) {
-  display: inline-block;
-  vertical-align: middle;
-  width: $size;
-  height: $size;
-  @if $direction == top {
-    border-top: $borderWidth solid currentColor;
-    border-right: $borderWidth solid currentColor;
-    transform: rotate(-45deg);
-  }
-  @else if $direction == right {
-    border-top: $borderWidth solid currentColor;
-    border-right: $borderWidth solid currentColor;
-    transform: rotate(45deg);
-  }
-  @else if $direction == bottom {
-    border-left: $borderWidth solid currentColor;
-    border-bottom: $borderWidth solid currentColor;
-    transform: rotate(-45deg);
-  }
-  @if $direction == left {
-    border-left: $borderWidth solid currentColor;
-    border-bottom: $borderWidth solid currentColor;
-    transform: rotate(45deg);
-  }
-}
-
-// selector
-// 改变父元素状态，如:hover或.active
-// 父元素不能有组合选择器，如.a, .b{}
-// .parent{
-//   .child{
-//     @include parent-state(":hover"){
-//       color: #f00;
-//     }
-//   }
-// }
-// .parent:hover .child {
-//   color: #f00;
-// }
-@mixin parent-state($states...) {
-  $parent: nth(nth(&, 1), (length(nth(&, 1))-1));
-  
-  @each $state in $states {  
-    @at-root #{selector-replace(&, $parent, str-insert($state, $parent, 0))} {
-      @content;
-    }
-  }
-}
-
-// animation-fade
-// @include animation-fade
-// @include animation-fade($from: false, $to: .5);
-// @include animation-fade($from: 1, $to: 0);
-@mixin animation-fade($name: animationFade, $from: 0, $to: false){
-  @keyframes #{animationFade} {
-  @if $from {
-    from {
-    opacity: $from;
-    }
-  }
-  @if $to {
-    to {
-    opacity: $to;
-    }
-  }
-  }
-}
-
-// animation-translate
-// @include animation-translate
-// @include animation-translate($from: x -100%);
-// @include animation-translate($from: xy -50% -50%, $to: y -100%);
-// @include animation-translate($from: y 100px, $to: y 0px);
-@mixin animation-translate($name: animationTranslate, $from: y -100%, $to: false) {
-  @keyframes #{$name} {
-    @if $from and length($from) > 1 {
-      from {
-        @if nth($from, 1) == x {
-          transform: translate(nth($from, 2), 0);
-        }
-        @if nth($from, 1) == y {
-          transform: translate(0, nth($from, 2));
-        }
-        @if nth($from, 1) == xy or nth($from, 1) == both {
-          transform: translate(nth($from, 2), nth($from, 3));
-        }
-      }
-    }
-    @if $to andd length($to) > 1 {
-      to {
-        @if nth($to, 1) == x {
-          transform: translate(nth($to, 2), 0);
-        }
-        @if nth($to, 1) == y {
-          transform: translate(0, nth($to, 2));
-        }
-        @if nth($to, 1) == xy or nth($to, 1) == both {
-          transform: translate(nth($to, 2), nth($to, 3));
-        }
-      }
-    }
-  }
-}
-
-// %
-// 只定义了%，所以只能通过@extend来调用
-//-----------------------------------------------------
-
-// bar line
-%bar-line {
-  line-height: $barHeight - 10px;
-  padding: 5px 10px;
-  position: relative;
-  display: block;
-  overflow: hidden;
-  @if $activeStateSwitch{
-    &:active,
-    &:hover {
-      background-color: darken($colorF, 3%);
-    }
-  }
-  &:not(:first-of-type)::before {
-    content: "";
-    @include retina-one-px-border;
-  }
-}
-
-// item arrow, 右侧箭头跳转指向
-%item-v-right {
-  &::after {
-    content: "";
-    @include v-arrow;
-    color: $colorC;
-    position: absolute;
-    right: 15px;
-    top: 50%;
-    margin-top: -1px;
-    transform: rotate(45deg) translate(0, -50%);
-    box-sizing: border-box;
-  }
-}
-
-// 间隔列表
-%gap-item{
-  position: relative;
-  background: #fff;
-  margin: 10px 0;
-  @if $activeStateSwitch{
-    &:active,
-    &:hover {
-      background-color: darken($colorF, 3%);
-    }
-  }
-  &::before{
-    content: "";
-    @include retina-one-px-border;
-  }
-  &::after{
-    content: "";
-    @include retina-one-px-border(bottom);
-  }
-}
-
-// 下面的几个%，由于版本或前缀，所以设计成%
-//-----------------------------------------------------
-// flex
-%display-flex {
-  display: flex;
-}
-
-// all-transition
-%transition-all {
-  transition: all 0.3s ease-in-out;
-}
-
-// translate3d
-%translate3d {
-  transform: translate3d(0, 0, 0);
-}
-
-
-// btn
-//----------------------------------------------------
-// btn-basic
-// 按钮基本样式，联合申明
-%btn-basic {
-  display: inline-block;
-  vertical-align: middle;
-  cursor: pointer;
-  text-align: center;
-  border: 1px solid transparent;
-  box-sizing: border-box;
-  user-select: none;
-  padding: 0 1em;
-  white-space: nowrap;
-}
-
-// btn-size
-// 按钮大小
-@mixin btn-size($padding: 1em, $height: $barHeight, $radius: 3px) {
-  padding: 0 $padding;
-  line-height: $height - 2px; // 减掉2px的上下高度
-  @if $radius {
-    border-radius: $radius;
-  }
-}
-
-// btn-color
-// 包括按钮背景色，文本色，是否有边框
-@mixin btn-color($colorText: #333, $colorBg: #666, $colorBorder: false) {
-  color: nth($colorText, 1);
-  background-color: nth($colorBg, 1);
-  @if $colorBorder {
-    border-color: nth($colorBorder, 1);
-  }
-  &:hover,&:active {
-    @if length($colorText) == 2 {
-      color: nth($colorText, 2);
-    }
-    @if length($colorBg) == 2 {
-      background-color: nth($colorBg, 2);
-    } @else {
-      @if lightness($colorBg) > 40% {
-        background-color: darken($colorBg, 5%);
-      }
-      @else {
-        background-color: lighten($colorBg, 5%);
-      }
-    }
-    @if $colorBorder and length($colorBorder) == 2 {
-      border-color: nth($colorBorder, 2); // $colorBorder: #dbdbdb #ccc => #ccc
-    }
-  }
-}
-
-
-//function
-//-----------------------------------------------------
-
-// 为颜色添加白色，以百分比形式
-@function tint($color, $percent) {
-  @return mix(white, $color, $percent);
-}
-
-// 为颜色添加黑色，以百分比形式
-@function shade($color, $percent) {
-  @return mix(black, $color, $percent);
-}
-
-%shadow {
-  box-shadow: 0px 0px 6px 0px rgba(0,0,0,.75);
-}
-
-%trans {
-  transition: all 0.2s ease-in;
-  -ms-transition: all 0.2s ease-in;
-}
-
-%trans8 {
-  transition: all 0.8s ease-in;
-  -ms-transition: all 0.8s ease-in;
-}

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

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 
 //-----------------------------------------------------
-// reset scss
+// reset less
 // 包括normalize，清零重置
 //-----------------------------------------------------
 
@@ -12,8 +12,7 @@
 // 1. Prevent mobile text size adjust after orientation change, without disabling user zoom.
 // 2. Remove the gray background color from tap, default value is inherit
 html {
-  -ms-text-size-adjust: 100%; // 1
+  text-size-adjust: 100%; // 1
-  -webkit-text-size-adjust: 100%; // 1
   -webkit-tap-highlight-color: transparent; // 2
   height: 100%;
 }
@@ -21,20 +20,17 @@ html {
 // 1. Remove default margin
 body {
   margin: 0; // 1
-  font-size: $fontSize;
+  font-size: @fontSize;
-  font-family: $fontFamily;
+  font-family: @fontFamily;
-  line-height: $fontLineHeight;
+  line-height: @fontLineHeight;
-  color: $colorText;
+  color: @colorText;
-  background-color: $colorBg;
+  background-color: @colorBg;
   min-height: 100%;
 }
 
 // HTML5 display definitions
 //-----------------------------------------------------
 
-// Correct `block` display not defined for any HTML5 element in IE 8/9.
-// Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
-// Correct `block` display not defined for `main` in IE 11.
 article,
 aside,
 details,
@@ -86,7 +82,7 @@ progress {
 a {
   background: transparent; // 1
   text-decoration: none;
-  color: nth($colorLink, 1);
+  color: @colorLink;
 
   &:active {
     outline: 0; // 2
@@ -96,33 +92,27 @@ a {
 // Text-level semantics
 //-----------------------------------------------------
 
-// Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 abbr[title] {
   border-bottom: 1px dotted;
 }
 
-// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 b, strong {
   font-weight: bold;
 }
 
-// Address styling not present in Safari and Chrome.
 dfn {
   font-style: italic;
 }
 
-// Address styling not present in IE 8/9.
 mark {
   background: #ff0;
   color: #000;
 }
 
-// Address inconsistent and variable font size in all browsers.
 small {
   font-size: 80%;
 }
 
-// Prevent `sub` and `sup` affecting `line-height` in all browsers.
 sub, sup {
   font-size: 75%;
   line-height: 0;
@@ -156,15 +146,6 @@ svg:not(:root) {
 // Grouping content
 //-----------------------------------------------------
 
-// 1. Contain overflow in all browsers.
-// 2. Improve readability of pre-formatted text in all browsers.
-// pre {
-//   overflow: auto; // 1
-//   white-space: pre; // 2
-//   white-space: pre-wrap; // 2
-//   word-wrap: break-word; // 2
-// }
-
 // 1. Address odd `em`-unit font size rendering in all browsers.
 code,
 kbd,
@@ -177,13 +158,6 @@ samp {
 // Forms
 //-----------------------------------------------------
 
-// Known limitation: by default, Chrome and Safari on OS X allow very limited
-// styling of `select`, unless a `border` property is set.
-
-// 1. Correct color not being inherited.
-//  Known issue: affects color of disabled elements.
-// 2. Correct font properties not being inherited.
-// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 button,
 input,
 optgroup,
@@ -196,33 +170,25 @@ textarea {
 }
 
 // Show the overflow in IE.
-// 1. Show the overflow in Edge.
-// 2. Show the overflow in Edge, Firefox, and IE.
 button,
-input, // 1
+input,
-select { // 2
+select {
   overflow: visible;
 }
 
 // Address inconsistent `text-transform` inheritance for `button` and `select`.
-// 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 {
   text-transform: none;
 }
 
-// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+// 1. Correct inability to style clickable `input` types in iOS.
-//  and `video` controls.
+// 2. Improve usability and consistency of cursor style between image-type `input` and others.
-// 2. Correct inability to style clickable `input` types in iOS.
-// 3. Improve usability and consistency of cursor style between image-type
-//  `input` and others.
 button,
-html input[type="button"], // 1
+html input[type="button"],
 input[type="reset"],
 input[type="submit"] {
-  -webkit-appearance: button; // 2
+  appearance: button; // 1
-  cursor: pointer; // 3
+  cursor: pointer; // 2
 }
 
 // Re-set default cursor for disabled elements.
@@ -237,45 +203,36 @@ input::-moz-focus-inner {
   padding: 0;
 }
 
-// 1. Address Firefox 4+ setting `line-height` on `input` using `!important` in
+// 1. Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet.
-//  the UA stylesheet.
 input {
   line-height: normal; // 1
 }
 
-// It's recommended that you don't attempt to style these elements.
+// 1. Address `box-sizing` set to `border-box` in Safari and Chrome (include `-webkit-`).
-// Firefox's implementation doesn't respect box-sizing, padding, or width.
+// 2. Address `height` property not being respected.
-
-// 1. Address box sizing set to `content-box` in IE 8/9/10.
-// 2. Remove excess padding in IE 8/9/10.
 input[type="checkbox"],
 input[type="radio"] {
   box-sizing: border-box; // 1
   padding: 0; // 2
 }
 
-// Fix the cursor style for Chrome's increment/decrement buttons. For certain
+// Fix the cursor style for Chrome's increment/decrement buttons.
-// `font-size` values of the `input`, it causes the cursor style of the
-// decrement button to change from `default` to `text`.
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
   height: auto;
 }
 
 // 1. Address `appearance` set to `searchfield` in Safari and Chrome.
-// 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+// 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
-//  (include `-moz` to future-proof).
 input[type="search"] {
-  -webkit-appearance: textfield; // 1
+  appearance: textfield; // 1
-  box-sizing: border-box;
+  box-sizing: content-box; // 2
 }
 
 // Remove inner padding and search cancel button in Safari and Chrome on OS X.
-// Safari (but not Chrome) clips the cancel button when the search input has
-// padding (and `textfield` appearance).
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
+  appearance: none;
 }
 
 // Define consistent border, margin, and padding.
@@ -292,15 +249,12 @@ legend {
   padding: 0; // 2
 }
 
-// 1. Remove default vertical scrollbar in IE 8/9/10/11.
+// Remove default vertical scrollbar in IE 8/9/10/11.
 textarea {
-  overflow: auto; // 1
+  overflow: auto;
-  resize: vertical;
-  vertical-align: top;
 }
 
 // Don't inherit the `font-weight` (applied by a rule above).
-// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 optgroup {
   font-weight: bold;
 }
@@ -325,33 +279,32 @@ input::-ms-reveal {
 }
 
 // 表单placeholder样式
-// 注意不可联合申明，否则无效
 // Firefox 19+
 input::-moz-placeholder,
 textarea::-moz-placeholder {
-  color: $colorPlaceholder;
+  color: @colorPlaceholder;
 }
 
 // Internet Explorer 10+
 input:-ms-input-placeholder,
 textarea:-ms-input-placeholder {
-  color: $colorPlaceholder;
+  color: @colorPlaceholder;
 }
 
 // Safari and Chrome
 input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
-  color: $colorPlaceholder;
+  color: @colorPlaceholder;
 }
 
-// 如不支持placeholder添加class 或者 设置提示的placeholder
+// 如不支持placeholder添加class
 .placeholder {
-  color: $colorPlaceholder;
+  color: @colorPlaceholder;
 }
 
 // Tables
 //-----------------------------------------------------
-// Remove most spacing between table cells.
+
 table {
   border-collapse: collapse;
   border-spacing: 0;
@@ -408,5 +361,5 @@ i {
 
 // 清除子元素浮动
 .clearfix {
-  @extend %clearfix;
+  .clearfix();
 }

themes/yilia/source-src/css/core/_variables.less

@@ -0,0 +1,72 @@
+@charset "UTF-8";
+
+//-----------------------------------------------------
+// variables less
+//-----------------------------------------------------
+
+
+// font相关
+//-----------------------------------------------------
+@fontSize:                       14px;
+@fontLineHeight:                 1.5;
+@fontFamily:                     "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;
+// ios华文黑体, Android 4.0之后, Android 4.0之前
+@fontCn:                         STHeiTi, Roboto, "Droid Sans Fallback", Arial;
+// ios4.0+, ios4.0-, Android 4.0+, Android 4.0-
+@fontEn:                         "Helvetica Neue", Helvetica, Roboto, "Droid Sans", Arial;
+
+// 背景色，文本色，边框色，链接色
+//-----------------------------------------------------
+@colorText:                      #333;
+@colorBodyBg:                    #e3d8cc;
+@colorBg:                        #f0eae3;
+@colorBorder:                    #dbdbdb;
+@colorLink:                      #08c;
+@colorPlaceholder:               #999;
+
+// 标签颜色组
+@tagColors:                      #88acdb, #ffa07a, #ca5757, #76becc, #7e608d, #6fc0e4, #bc8f8f;
+@tagcolorsLength:                7;
+
+// disabled state (原 $colorDisabled map)
+@colorDisabled-text:             #999;
+@colorDisabled-bg:               #e3e3e3;
+@colorDisabled-border:           #dbdbdb;
+
+// 基本颜色
+//-----------------------------------------------------
+@color3:                          #333;
+@color6:                          #666;
+@color9:                          #999;
+@colorA:                          #aaa;
+@colorC:                          #ccc;
+@colorF:                          #f5f5f5;
+
+
+// 元素上下间距
+//-----------------------------------------------------
+@gap:                             20px;
+
+
+// header,footer等的高度
+//-----------------------------------------------------
+@barHeight:                       44px;
+
+
+// radius
+//-----------------------------------------------------
+@radiusBase:                      5px;
+@radiusSmall:                     3px;
+
+
+// timing-function
+//-----------------------------------------------------
+@timingFunction:                  cubic-bezier(0.42, 0, 0.58, 1);
+
+
+// active state switch
+//-----------------------------------------------------
+@activeStateSwitch:               true;
+
+
+@articlePadding:                  7.6923%;

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

@@ -1,72 +0,0 @@
-@charset "UTF-8";
-
-//-----------------------------------------------------	
-// variables scss
-//-----------------------------------------------------	
-
-
-// font相关
-//-----------------------------------------------------	
-$fontSize:                       14px !default; 
-$fontLineHeight:                 1.5 !default;
-$fontFamily:                     "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif !default;
-// ios华文黑体,Android 4.0之后,Android 4.0之前
-$fontCn:                         STHeiTi, Roboto, "Droid Sans Fallback", Arial !default; 
-// ios4.0+,ios4.0-,Android 4.0+,Android 4.0-
-$fontEn:                         "Helvetica Neue", Helvetica, Roboto, "Droid Sans", Arial !default; 
-
-
-// 背景色，文本色，边框色，链接色
-//-----------------------------------------------------	
-$colorText:                      #333 !default;
-$colorBodyBg:                    #e3d8cc !default;
-$colorBg:                        #f0eae3 !default;
-$colorBorder:                    #dbdbdb !default;
-$colorLink:                      #08c !default;
-$colorPlaceholder:               #999 !default; // input placeholder color
-$tagcolorList:                   #88acdb #ffa07a #ca5757 #76becc #7e608d #6fc0e4 #bc8f8f; // 标签颜色组
-$colorDisabled:                  (text: #999, bg: #e3e3e3, border: #dbdbdb) !default; // textColor bgColor borderColor
-
-
-// 基本颜色
-// color function : http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
-// lighten($color, $amount)
-// darken($color, $amount)
-// opacity($color, $amount)
-// mix($color1, $color2[, $amount])
-//-----------------------------------------------------	
-$color3:                          #333;
-$color6:                          #666;
-$color9:                          #999;
-$colorA:                          #aaa;
-$colorC:                          #ccc;
-$colorF:                          #f5f5f5;
-
-
-// 元素上下间距
-//-----------------------------------------------------	
-$gap:                             20px !default;
-
-
-// header,footer等的高度
-//-----------------------------------------------------	
-$barHeight:                       44px !default;
-
-
-// radius
-//-----------------------------------------------------	
-$radiusBase:                      5px !default;
-$radiusSmall:                     3px !default;
-
-
-// timing-function
-//-----------------------------------------------------
-$timingFunction:                  cubic-bezier(0.42, 0, 0.58, 1);
-
-
-// active state switch
-//-----------------------------------------------------
-$activeStateSwitch:               true !default;
-
-
-$articlePadding:				  7.6923%;

themes/yilia/source-src/css/font-awsome.css

@@ -1,166 +0,0 @@
-@font-face {
-  font-family: "FontAwesome";
-  src: url("./fonts/fontawsome-thin.eot"); /* IE9 */
-  src: url("./fonts/fontawsome-thin.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
-  url("./fonts/fontawsome-thin.woff") format("woff"), /* chrome、firefox */
-  url("./fonts/fontawsome-thin.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
-  url("./fonts/fontawsome-thin.svg#uxfonteditor") format("svg"); /* iOS 4.1- */
-  font-weight: normal;
-  font-style: normal;
-}
-.icon {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'FontAwesome' !important;
-  speak: none;
-  font-size:16px;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-.icon-search:before {
-  content: "\f002";
-}
-.icon-check:before {
-  content: "\f00c";
-}
-.icon-remove:before,
-.icon-close:before {
-  content: "\f00d";
-}
-.icon-home:before {
-  content: "\f015";
-}
-.icon-twitter-square:before {
-  content: "\f081";
-}
-.icon-iconcebook-square:before {
-  content: "\f082";
-}
-.icon-github-square:before {
-  content: "\f092";
-}
-.icon-ellipsis-v:before {
-  content: "\f142";
-}
-.icon-google-plus-square:before {
-  content: "\f0d4";
-}
-.icon-twitter:before {
-  content: "\f099";
-}
-.icon-facebook:before {
-  content: "\f09a";
-}
-.icon-github:before {
-  content: "\f09b";
-}
-.icon-feed:before,
-.icon-rss:before {
-  content: "\f09e";
-}
-.icon-weibo:before {
-  content: "\f18a";
-}
-.icon-google-plus:before {
-  content: "\f0d5";
-}
-.icon-tag:before {
-  content: "\f02b";
-}
-.icon-tags:before {
-  content: "\f02c";
-}
-.icon-book:before {
-  content: "\f02d";
-}
-.icon-calendar:before {
-  content: "\f073";
-}
-.icon-file-text:before {
-  content: "\f15c";
-}
-.icon-file-text-o:before {
-  content: "\f0f6";
-}
-.icon-clock:before {
-  content: "\f017";
-}
-.icon-eye:before {
-  content: "\f06e";
-}
-.icon-camera:before {
-  content: "\f030";
-}
-.icon-comment:before {
-  content: "\f075";
-}
-.icon-comment-o:before {
-  content: "\f0e5";
-}
-.icon-info:before {
-  content: "\f129";
-}
-.icon-info-circle:before {
-  content: "\f05a";
-}
-.icon-qq:before {
-  content: "\f1d6";
-}
-.icon-wechat:before,
-.icon-weixin:before {
-  content: "\f1d7";
-}
-.icon-spinner:before {
-  content: "\f110";
-}
-.icon-arrow-circle-o-right:before {
-  content: "\f18e";
-}
-.icon-arrow-circle-o-left:before {
-  content: "\f190";
-}
-.icon-share-alt:before {
-  content: "\f1e0";
-}
-.icon-share-alt-square:before {
-  content: "\f1e1";
-}
-.icon-list:before {
-  content: "\f03a";
-}
-.icon-mail:before {
-  content: "\f0e0";
-}
-.icon-mail-o:before {
-  content: "\f003";
-}
-.icon-chevron-up:before {
-  content: "\f077";
-}
-.icon-thumb-tack:before {
-  content: "\f08d";
-}
-.icon-quote-left:before {
-  content: "\f10d";
-}
-.icon-quote-right:before {
-  content: "\f10e";
-}
-.icon-angle-left:before {
-  content: "\f104";
-}
-.icon-github-alt:before {
-  content: "\f113";
-}
-.icon-linkedin-square:before {
-  content: "\f08c";
-}
-.icon-linkedin:before {
-  content: "\f0e1";
-}

themes/yilia/source-src/css/font-awsome.less

@@ -0,0 +1,164 @@
+@font-face {
+  font-family: "FontAwesome";
+  src: url("./fonts/fontawsome-thin.eot"); /* IE9 */
+  src: url("./fonts/fontawsome-thin.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
+  url("./fonts/fontawsome-thin.woff") format("woff"), /* chrome、firefox */
+  url("./fonts/fontawsome-thin.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
+  url("./fonts/fontawsome-thin.svg#uxfonteditor") format("svg"); /* iOS 4.1- */
+}
+.icon {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'FontAwesome';
+  speak: none;
+  font-size:16px;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  &.icon-search:before {
+    content: "\f002";
+  }
+  &.icon-check:before {
+    content: "\f00c";
+  }
+  &.icon-remove:before,
+  &.icon-close:before {
+    content: "\f00d";
+  }
+  &.icon-home:before {
+    content: "\f015";
+  }
+  &.icon-twitter-square:before {
+    content: "\f081";
+  }
+  &.icon-iconcebook-square:before {
+    content: "\f082";
+  }
+  &.icon-github-square:before {
+    content: "\f092";
+  }
+  &.icon-ellipsis-v:before {
+    content: "\f142";
+  }
+  &.icon-google-plus-square:before {
+    content: "\f0d4";
+  }
+  &.icon-twitter:before {
+    content: "\f099";
+  }
+  &.icon-facebook:before {
+    content: "\f09a";
+  }
+  &.icon-github:before {
+    content: "\f09b";
+  }
+  &.icon-feed:before,
+  &.icon-rss:before {
+    content: "\f09e";
+  }
+  &.icon-weibo:before {
+    content: "\f18a";
+  }
+  &.icon-google-plus:before {
+    content: "\f0d5";
+  }
+  &.icon-tag:before {
+    content: "\f02b";
+  }
+  &.icon-tags:before {
+    content: "\f02c";
+  }
+  &.icon-book:before {
+    content: "\f02d";
+  }
+  &.icon-calendar:before {
+    content: "\f073";
+  }
+  &.icon-file-text:before {
+    content: "\f15c";
+  }
+  &.icon-file-text-o:before {
+    content: "\f0f6";
+  }
+  &.icon-clock:before {
+    content: "\f017";
+  }
+  &.icon-eye:before {
+    content: "\f06e";
+  }
+  &.icon-camera:before {
+    content: "\f030";
+  }
+  &.icon-comment:before {
+    content: "\f075";
+  }
+  &.icon-comment-o:before {
+    content: "\f0e5";
+  }
+  &.icon-info:before {
+    content: "\f129";
+  }
+  &.icon-info-circle:before {
+    content: "\f05a";
+  }
+  &.icon-qq:before {
+    content: "\f1d6";
+  }
+  &.icon-wechat:before,
+  &.icon-weixin:before {
+    content: "\f1d7";
+  }
+  &.icon-spinner:before {
+    content: "\f110";
+  }
+  &.icon-arrow-circle-o-right:before {
+    content: "\f18e";
+  }
+  &.icon-arrow-circle-o-left:before {
+    content: "\f190";
+  }
+  &.icon-share-alt:before {
+    content: "\f1e0";
+  }
+  &.icon-share-alt-square:before {
+    content: "\f1e1";
+  }
+  &.icon-list:before {
+    content: "\f03a";
+  }
+  &.icon-mail:before {
+    content: "\f0e0";
+  }
+  &.icon-mail-o:before {
+    content: "\f003";
+  }
+  &.icon-chevron-up:before {
+    content: "\f077";
+  }
+  &.icon-thumb-tack:before {
+    content: "\f08d";
+  }
+  &.icon-quote-left:before {
+    content: "\f10d";
+  }
+  &.icon-quote-right:before {
+    content: "\f10e";
+  }
+  &.icon-angle-left:before {
+    content: "\f104";
+  }
+  &.icon-github-alt:before {
+    content: "\f113";
+  }
+  &.icon-linkedin-square:before {
+    content: "\f08c";
+  }
+  &.icon-linkedin:before {
+    content: "\f0e1";
+  }
+}

themes/yilia/source-src/css/footer.less

@@ -0,0 +1,17 @@
+#footer {
+  font-size: 14px;
+  position: absolute;
+  bottom: 30px;
+  opacity: 0.6;
+  width: 100%;
+  text-align: center;
+  .outer {
+    padding: 0 30px;
+  }
+}
+.footer-left {
+  float: left;
+}
+.footer-right {
+  float: right;
+}

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

@@ -1,17 +0,0 @@
-#footer {
-	font-size: 14px;
-	position: absolute;
-	bottom: 30px;
-	opacity: 0.6;
-	width: 100%;
-	text-align: center;
-	.outer{
-		padding: 0 30px;
-	}
-}
-.footer-left{
-  float: left;
-}
-.footer-right{
-  float: right;
-}

themes/yilia/source-src/css/grid.less

@@ -0,0 +1,58 @@
+body, button, input, select, textarea {
+  color: #1a1a1a;
+  font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 1.75;
+}
+body {
+  overflow-y: hidden;
+  background: @colorBodyBg;
+}
+html, body, #container {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+#mobile-nav, .js-mobile-btnctn {
+  display: none;
+}
+#container {
+  position: relative;
+  min-height: 100%;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  background-color: @colorBodyBg;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: right;
+  &.show {
+    overflow-y: hidden;
+  }
+}
+body:not(.night) #container.show {
+  background-image: linear-gradient(200deg, #5aa5c6, #a4854b) !important;
+}
+.body-wrap {
+  padding-top: 30px;
+  margin-bottom: 80px;
+}
+.mid-col {
+  position: absolute;
+  right: 0;
+  min-height: 100%;
+  left: 300px;
+  width: auto;
+  &.show {
+    .anmLeftIn();
+    .article {
+      .trans();
+      // transition: opacity .3s ease-in, background-color .3s ease-in;
+      opacity: 0.5 !important;
+      pointer-events: none;
+    }
+  }
+  &.hide {
+    .anmLeftOut();
+  }
+}

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

@@ -1,58 +0,0 @@
-body, button, input, select, textarea {
-	color: #1a1a1a;
-	font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
-	font-size: 16px;
-	font-size: 1rem;
-	line-height: 1.75;
-}
-body {
-	overflow-y: hidden;
-	background:$colorBodyBg;
-}
-html, body, #container {
-	height: 100%;
-	overflow-x: hidden;
-	overflow-y: auto;
-}
-#mobile-nav,.js-mobile-btnctn {
-	display: none;
-}
-#container{
-	position:relative;
-	min-height:100%;
-  scroll-behavior: smooth;
-	-webkit-overflow-scrolling: touch;
-	background-color: $colorBodyBg;
-	background-repeat: no-repeat;
-	background-size: contain;
-	background-position: right;
-  &.show {
-		overflow-y: hidden;
-  }
-}
-body:not(.night) #container.show {
-	background-image: linear-gradient(200deg,#5aa5c6,#a4854b) !important;
-}
-.body-wrap{
-  padding-top: 30px;
-  margin-bottom: 80px;
-}
-.mid-col {
-	position:absolute;
-	right:0;
-	min-height:100%;
-	left: 300px;
-  width: auto;
-	&.show {
-    @extend %anmLeftIn;
-		.article {
-			@extend %trans;
-      // transition: opacity .3s ease-in, background-color .3s ease-in;
-      opacity: 0.5 !important;
-      pointer-events: none;
-		}
-	}
-	&.hide {
-		@extend %anmLeftOut;
-	}
-}

themes/yilia/source-src/css/left.less

@@ -0,0 +1,120 @@
+.left-col {
+  background-color: @colorBg;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: top;
+  width: 300px;
+  position: fixed;
+  opacity: 1;
+  .trans();
+  height: 100%;
+  z-index: 999;
+  .shadow();
+
+  .intrude-less {
+    width: 76%;
+    text-align: center;
+    margin: 62px auto 0;
+  }
+
+  #header {
+    width: 100%;
+    height: 300px;
+    position: relative;
+    a {
+      color: #696969;
+      transition: color 0.3s;
+      &:hover {
+        color: #B0A0AA;
+      }
+    }
+    .header-subtitle {
+      text-align: center;
+      color: @color9;
+      font-size: 14px;
+      line-height: 25px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+    .header-menu {
+      font-weight: 300;
+      line-height: 31px;
+      text-transform: uppercase;
+      float: none;
+      min-height: 150px;
+      margin-left: -12px;
+      text-align: center;
+      position: relative;
+      ul {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        li {
+          cursor: default;
+          a {
+            font-size: 14px;
+            min-width: 300px;
+          }
+        }
+      }
+    }
+    .header-smart-menu {
+      font-size: 16px;
+      margin-bottom: 20px;
+      a {
+        &:after {
+          content: '/';
+          margin-left: 4px;
+        }
+        &:last-child {
+          &:after {
+            content: ''
+          }
+        }
+      }
+    }
+    .profilepic {
+      text-align: center;
+      display: block;
+      border: 5px solid @colorF;
+      border-radius: 300px;
+      width: 128px;
+      height: 128px;
+      margin: 0 auto;
+      position: relative;
+      overflow: hidden;
+      background: #88acdb;
+      .trans();
+      display: -webkit-box;
+      -webkit-box-orient: horizontal;
+      -webkit-box-pack: center;
+      -webkit-box-align: center;
+      text-align: center;
+      &:hover {
+        .picRotate();
+      }
+      img {
+        border-radius: 300px;
+        width: 100%;
+        height: 100%;
+        opacity: 1;
+        .trans();
+        &.show {
+          width: 100%;
+          height: 100%;
+          opacity: 1;
+        }
+      }
+    }
+    .header-author {
+      text-align: center;
+      margin: 0.67em 0;
+      font-size: 30px;
+      transition: 0.3s;
+    }
+  }
+}

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

@@ -1,120 +0,0 @@
-.left-col {
-  background-color: $colorBg;
-	background-repeat: no-repeat;
-	background-size: cover;
-	background-position: top;
-	width: 300px;
-	position:fixed;
-	opacity:1;
-	@extend %trans;
-	height:100%;
-  z-index: 999;
-  @extend %shadow;
-
-	.intrude-less {
-		width: 76%;
-		text-align: center;
-		margin: 62px auto 0;
-	}
-
-	#header{
-		width:100%;
-		height: 300px;
-		position: relative;
-		a {
-			color: #696969;
-			transition: color 0.3s;
-			&:hover {
-				color: #B0A0AA;
-			}
-		}
-		.header-subtitle{
-			text-align: center;
-			color:$color9;
-			font-size: 14px;
-			line-height: 25px;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			display: -webkit-box;
-			-webkit-line-clamp: 2;
-			-webkit-box-orient: vertical;
-		}
-		.header-menu{
-			font-weight: 300;
-			line-height: 31px;
-			text-transform: uppercase;
-			float:none;
-			min-height: 150px;
-			margin-left: -12px;
-			text-align: center;
-			position: relative;
-			ul {
-				position: absolute;
-				left: 50%;
-				top: 50%;
-				transform: translateX(-50%) translateY(-50%);
-				li{
-					cursor: default;
-					a{
-						font-size: 14px;
-						min-width: 300px;
-					}
-				}
-			}
-		}
-		.header-smart-menu {
-			font-size: 16px;
-			margin-bottom: 20px;
-			a {
-				&:after {
-					content: '/';
-					margin-left: 4px;
-				}
-				&:last-child {
-					&:after {
-						content: ''
-					}
-				}
-			}
-		}
-		.profilepic{
-			text-align: center;
-			display: block;
-			border: 5px solid $colorF;
-			border-radius: 300px;
-			width: 128px;
-			height: 128px;
-			margin: 0 auto;
-			position: relative;
-			overflow: hidden;
-			background: #88acdb;
-			@extend %trans;
-			display: -webkit-box;
-			-webkit-box-orient: horizontal;
-			-webkit-box-pack: center;
-			-webkit-box-align: center;
-			text-align: center;
-			&:hover {
-				@extend %picRotate;
-			}
-			img{
-				border-radius: 300px;
-				width: 100%;
-				height: 100%;
-				opacity: 1;
-				@extend %trans;
-				&.show{
-					width: 100%;
-					height: 100%;
-					opacity: 1;
-				}
-			}
-		}
-		.header-author{
-			text-align: center;
-			margin: 0.67em 0;
-			font-size: 30px;
-			transition: 0.3s;
-		}
-	}
-}

themes/yilia/source-src/css/main.less

@@ -1,4 +1,5 @@
-@import 'core';
+@import './_core';
+@import './font-awsome.less';
 @import './grid';
 @import './left';
 @import './scroll';
@@ -19,7 +20,7 @@
 @import './waifu';
 @import './night';
 @import './page/photo-wall';
-@import './page/categories.scss';
+@import './page/categories.less';
 @media screen and (max-width: 800px) {
   @import './mobile';
   @import './mobile-slider';

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

@@ -1,7 +1,7 @@
 .profilepic {
   text-align: center;
   display: block;
-  border: 5px solid $colorF;
+  border: 5px solid @colorF;
   border-radius: 300px;
   width: 128px;
   height: 128px;
@@ -20,13 +20,13 @@
 }
 .header-subtitle {
   text-align: center;
-  color: $color9;
+  color: @color9;
   font-size: 14px;
   line-height: 25px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
+  line-clamp: 2;
   -webkit-box-orient: vertical;
 }
 .header-subtitle {

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

@@ -3,7 +3,7 @@
   margin-bottom: 0;
 }
 #container {
-  background: $colorBodyBg;
+  background: @colorBodyBg;
 }
 .left-col {
   display: none;
@@ -120,7 +120,7 @@
   padding: 10px;
   border: 0;
   font-size: 16px;
-  background: #{$colorBg};
+  background: @colorBg;
   .article-more-link {
     margin: 0;
   }

themes/yilia/source-src/css/night.less

@@ -0,0 +1,183 @@
+/*
+* 夜间模式配色
+*/
+@mainBg_night: #1f2e3c;
+@articleBg_night: #15202b;
+@borderColor_night: #38444d;
+@textColor_night: #d5d5d5;
+
+@keyframes leftIn_night {
+  from {
+    transform: translate(0, 0);
+    background: @mainBg_night;
+  }
+  to {
+    transform: translate(333px, 0);
+    background: none;
+  }
+}
+
+@keyframes leftOut_night {
+  from {
+    transform: translate(333px, 0);
+    background: none;
+  }
+  to {
+    transform: translate(0, 0);
+    background: @mainBg_night;
+  }
+}
+
+.anmLeftIn_night() {
+  .anmCommon();
+  animation-name: leftIn_night;
+}
+
+.anmLeftOut_night() {
+  .anmCommon();
+  animation-name: leftOut_night;
+}
+
+body.night {
+  background: @mainBg_night;
+  // 展开菜单之后的背景
+  #container, #container.show {
+    background-color: @mainBg_night;
+  }
+  // 文章区域
+  .article {
+    background: fade(@articleBg_night, 80%);
+    border-color: @borderColor_night;
+    color: @textColor_night;
+    .article-title {
+      color: @colorF;
+    }
+    .article-entry {
+      table {
+        border-color: @borderColor_night;
+        th, td {
+          border-color: @borderColor_night;
+        }
+        thead tr {
+          background: @mainBg_night;
+        }
+        tbody tr:hover {
+          background: lighten(@mainBg_night, 10%);
+        }
+      }
+      blockquote {
+        background: #2c2c2c;
+      }
+    }
+    h1, h2, h3, h4, h5, h6 {
+      color: @colorC;
+      border-bottom-color: @borderColor_night;
+    }
+  }
+  // 归档列表
+  .archives-wrap {
+    background: fade(@articleBg_night, 80%);
+    border-bottom-color: @borderColor_night;
+    .archive-article {
+      border-color: @borderColor_night;
+    }
+    a.archive-article-title {
+      color: @textColor_night;
+    }
+  }
+  // 左侧栏
+  .left-col {
+    background-color: @articleBg_night;
+    background-image: none !important;
+  }
+  #mobile-nav {
+    background: none;
+    .overlay {
+      display: none;
+    }
+  }
+  // 头像 看板娘 图标 -> 降低亮度滤镜
+  .profilepic, .waifu, #header .header-nav .social a {
+    filter: brightness(30%);
+  }
+  // 文章信息栏
+  .article-info-index.article-info {
+    border-top-color: @borderColor_night;
+  }
+  #footer {
+    color: @textColor_night;
+  }
+  // 高亮关键字
+  .article-entry p code, .article-entry li code {
+    background: @mainBg_night;
+    color: #bf7676;
+  }
+  // 分类列表
+  .category-list li.category-list-item {
+    border-color: @borderColor_night;
+  }
+  // 标签颜色组 (unrolled from @for loop, darken(color, 25%))
+  .tagcloud {
+    a.color1 {
+      background: darken(#88acdb, 25%);
+      &::before {
+        border-right-color: darken(#88acdb, 25%);
+      }
+    }
+    a.color2 {
+      background: darken(#ffa07a, 25%);
+      &::before {
+        border-right-color: darken(#ffa07a, 25%);
+      }
+    }
+    a.color3 {
+      background: darken(#ca5757, 25%);
+      &::before {
+        border-right-color: darken(#ca5757, 25%);
+      }
+    }
+    a.color4 {
+      background: darken(#76becc, 25%);
+      &::before {
+        border-right-color: darken(#76becc, 25%);
+      }
+    }
+    a.color5 {
+      background: darken(#7e608d, 25%);
+      &::before {
+        border-right-color: darken(#7e608d, 25%);
+      }
+    }
+    a.color6 {
+      background: darken(#6fc0e4, 25%);
+      &::before {
+        border-right-color: darken(#6fc0e4, 25%);
+      }
+    }
+    a.color7 {
+      background: darken(#bc8f8f, 25%);
+      &::before {
+        border-right-color: darken(#bc8f8f, 25%);
+      }
+    }
+  }
+  // 滚动条
+  ::-webkit-scrollbar {
+    background-color: @articleBg_night;
+  }
+  .page-modal {
+    background: @mainBg_night;
+    color: @textColor_night;
+    .close {
+      color: @textColor_night;
+    }
+  }
+  #search-panel {
+    .search-input > input[type=text] {
+      color: @textColor_night;
+    }
+    .more-item {
+      background: linear-gradient(-180deg, @articleBg_night 10%, rgba(255, 255, 255, 0) 100%);
+    }
+  }
+}

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

@@ -1,149 +0,0 @@
-/*
-* 夜间模式配色
-*/
-$mainBg_night: #1f2e3c; // 主背景色
-$articleBg_night: #15202b; // 文章背景色
-$borderColor_night: #38444d; // 边框颜色
-$textColor_night: #d5d5d5; // 文字颜色
-
-@keyframes leftIn_night {
-  from {
-    transform: translate(0, 0);
-    background:$mainBg_night;
-  }
-  to {
-    transform: translate(333px, 0);
-    background: none;
-  }
-}
-
-@keyframes leftOut_night {
-  from {
-    transform: translate(333px, 0);
-    background: none;
-  }
-  to {
-    transform: translate(0, 0);
-    background:$mainBg_night;
-  }
-}
-
-%anmLeftIn_night {
-  @extend %anmCommon;
-  animation-name: leftIn_night;
-}
-
-%anmLeftOut_night {
-  @extend %anmCommon;
-  animation-name: leftOut_night;
-}
-
-body.night {
-  background: $mainBg_night;
-  // 展开菜单之后的背景
-  #container, #container.show {
-    background-color: $mainBg_night;
-  }
-  // 文章区域
-  .article{
-    background: adjust-color($articleBg_night, $alpha: -0.2);
-    border-color: $borderColor_night;
-    color: $textColor_night;
-    .article-title { // 主标题
-      color: $colorF;
-    }
-    .article-entry {
-      table { // 表格
-        border-color: $borderColor_night;
-        th,td {
-          border-color: $borderColor_night;
-        }
-        thead tr { // 表头
-          background: $mainBg_night;
-        }
-        tbody tr:hover { // 表格行指向
-          background: lighten($mainBg_night, 10%);
-        }
-      }
-      blockquote{ // 引用
-        background: #2c2c2c;
-      }
-    }
-    h1,h2,h3,h4,h5,h6 { // 章节标题
-      color: $colorC;
-      border-bottom-color: $borderColor_night;
-    }
-  }
-  // 归档列表
-  .archives-wrap {
-    background: adjust-color($articleBg_night, $alpha: -0.2);
-    border-bottom-color: $borderColor_night;
-    .archive-article {
-      border-color: $borderColor_night;
-    }
-    a.archive-article-title {
-      color: $textColor_night;
-    }
-  }
-  // 左侧栏
-  .left-col {
-    background-color: $articleBg_night;
-    background-image: none !important;
-  }
-  #mobile-nav {
-    background: none;
-    .overlay {
-      display: none;
-    }
-  }
-  // 头像 看板娘 图标 -> 降低亮度滤镜
-  .profilepic, .waifu, #header .header-nav .social a {
-    filter: brightness(30%);
-  }
-  // 文章信息栏
-  .article-info-index.article-info {
-    border-top-color: $borderColor_night;
-  }
-  #footer {
-    color: $textColor_night;
-  }
-  // 高亮关键字
-  .article-entry p code, .article-entry li code {
-    background: $mainBg_night;
-    color: #bf7676;
-  }
-  // 分类列表
-  .category-list li.category-list-item {
-    border-color: $borderColor_night;
-  }
-  // 标签颜色组
-  .tagcloud {
-    @for $index from 1 to length($tagcolorList)+1 {
-      a.color#{$index}{
-        background: darken(nth($tagcolorList,$index), 25%);
-        &::before{
-          border-right-color: darken(nth($tagcolorList,$index), 25%);  
-        }
-      }
-    }
-  }
-  // 滚动条
-  ::-webkit-scrollbar {
-    background-color: $articleBg_night;
-  }
-  .page-modal {
-    background: $mainBg_night;
-    color: $textColor_night;
-    .close {
-      color: $textColor_night;
-    }
-  }
-  #search-panel {
-    .search-input > input[type=text] {
-      color: $textColor_night;
-    }
-    .more-item {
-      background: linear-gradient(-180deg,$articleBg_night 10%,rgba(255, 255, 255, 0) 100%);
-    }
-  }
-}

themes/yilia/source-src/css/page.less

@@ -0,0 +1,39 @@
+#page-nav {
+  text-align: center;
+  margin-top: 30px;
+  .page-number {
+    width: 25px;
+    height: 30px;
+    background: #4d4d4d;
+    display: inline-block;
+    color: @colorF;
+    line-height: 30px;
+    font-size: 14px;
+    margin: 0 5px 30px;
+    border-radius: 2px;
+    &:hover {
+      background: #5e5e5e;
+    }
+  }
+  .current {
+    background: #88acdb;
+    cursor: default;
+    &:hover {
+      background: #88acdb;
+    }
+  }
+  .extend {
+    color: #4d4d4d;
+    margin: 0 27px;
+    opacity: 1;
+    &:hover {
+      color: #5e5e5e;
+    }
+  }
+  .prev.disabled, .next.disabled {
+    visibility: hidden;
+  }
+  &:hover .extend {
+    opacity: 1;
+  }
+}

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

@@ -1,39 +0,0 @@
-#page-nav{
-	text-align: center;
-	margin-top: 30px;
-	.page-number{
-		width: 25px;
-		height: 30px;
-		background: #4d4d4d;
-		display: inline-block;
-		color: $colorF;
-		line-height: 30px;
-		font-size: 14px;
-		margin: 0 5px 30px;
-		border-radius: 2px;
-		&:hover{
-			background: #5e5e5e;
-		}
-	}
-	.current{
-		background: #88acdb;
-		cursor: default;
-		&:hover{
-			background: #88acdb;
-		}
-	}
-	.extend{
-		color: #4d4d4d;
-		margin: 0 27px;
-		opacity: 1;
-		&:hover{
-			color: #5e5e5e;
-		}
-	}
-	.prev.disabled,.next.disabled {
-		visibility: hidden;
-	}
-	&:hover .extend {
-		opacity: 1;
-	}
-}

themes/yilia/source-src/css/page/categories.less

@@ -5,9 +5,9 @@
     display: inline-block;
     margin: 0 1em .5em 0;
     padding: 4px;
-    border: 1px solid $colorBorder;
+    border: 1px solid @colorBorder;
     font-size: 1.2rem;
-    @extend %trans;
+    .trans();
     &:hover {
       background: rgba(204, 204, 204, 0.3);
     }
@@ -39,7 +39,7 @@
       right: 0;
       bottom: 0;
       height: 2px;
-      background: $colorLink;
+      background: @colorLink;
       transition: width .3s ease;
     }
   }

themes/yilia/source-src/css/page/photo-wall.less

@@ -20,7 +20,7 @@
   }
 }
 #load-tip {
-  color: $color9;
+  color: @color9;
   text-align: center;
   display: none;
 }

themes/yilia/source-src/css/reward.less

@@ -8,7 +8,7 @@
     height: 56px;
     line-height: 56px;
     font-size: 20px;
-    color: $colorF;
+    color: @colorF;
     background: #f44336;
     border-radius: 50%;
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
@@ -27,7 +27,7 @@
     justify-content: space-around;
   }
   .reward-p {
-    color: $colorF;
+    color: @colorF;
     font-weight: bold;
     text-shadow: 1px 1px 1px #45b9e0;
     .icon {
@@ -44,7 +44,7 @@
   .reward-img {
     width: 130px;
     height: 130px;
-    border: 6px solid $colorBorder;
+    border: 6px solid @colorBorder;
-    border-radius: $radiusSmall;
+    border-radius: @radiusSmall;
   }
 }

themes/yilia/source-src/css/scroll.less

@@ -0,0 +1,65 @@
+/* 设置滚动条的样式 */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+  background-color: @colorBg;
+}
+
+::-webkit-scrollbar-button {
+  width: 0;
+  height: 0;
+}
+
+::-webkit-scrollbar-button:start:increment, ::-webkit-scrollbar-button:end:decrement {
+  display: none;
+}
+
+::-webkit-scrollbar-corner {
+  display: block;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+  background-color: rgba(0, 0, 0, .3);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  border-radius: 8px;
+  background-color: rgba(0, 0, 0, .5);
+}
+
+::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
+  border-right: 1px solid transparent;
+  border-left: 1px solid transparent;
+}
+
+::-webkit-scrollbar-track:hover {
+  background-color: rgba(0, 0, 0, .15);
+}
+::-webkit-scrollbar-button:start {
+  width: 10px;
+  height: 10px;
+  background: url(./img/scrollbar_arrow.png) no-repeat 0 0;
+}
+
+::-webkit-scrollbar-button:start:hover {
+  background: url(./img/scrollbar_arrow.png) no-repeat -15px 0;
+}
+
+::-webkit-scrollbar-button:start:active {
+  background: url(./img/scrollbar_arrow.png) no-repeat -30px 0;
+}
+
+::-webkit-scrollbar-button:end {
+  width: 10px;
+  height: 10px;
+  background: url(./img/scrollbar_arrow.png) no-repeat 0 -18px;
+}
+
+::-webkit-scrollbar-button:end:hover {
+  background: url(./img/scrollbar_arrow.png) no-repeat -15px -18px;
+}
+
+::-webkit-scrollbar-button:end:active {
+  background: url(./img/scrollbar_arrow.png) no-repeat -30px -18px;
+}

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

@@ -1,65 +0,0 @@
-/* 设置滚动条的样式 */
-::-webkit-scrollbar {
-	width: 10px;
-	height: 10px;
-	background-color: $colorBg;
-}
-
-::-webkit-scrollbar-button {
-	width: 0;
-	height: 0;
-}
-
-::-webkit-scrollbar-button:start:increment,::-webkit-scrollbar-button:end:decrement {
-	display: none;
-}
-
-::-webkit-scrollbar-corner {
-	display: block;
-}
-
-::-webkit-scrollbar-thumb {
-	border-radius: 8px;
-	background-color: rgba(0,0,0,.3);
-}
-
-::-webkit-scrollbar-thumb:hover {
-	border-radius: 8px;
-	background-color: rgba(0,0,0,.5);
-}
-
-::-webkit-scrollbar-track,::-webkit-scrollbar-thumb {
-	border-right: 1px solid transparent;
-	border-left: 1px solid transparent;
-}
-
-::-webkit-scrollbar-track:hover {
-	background-color: rgba(0,0,0,.15);
-}
-::-webkit-scrollbar-button:start {
-	width: 10px;
-	height: 10px;
-	background: url(./img/scrollbar_arrow.png) no-repeat 0 0;
-}
-
-::-webkit-scrollbar-button:start:hover {
-	background: url(./img/scrollbar_arrow.png) no-repeat -15px 0;
-}
-
-::-webkit-scrollbar-button:start:active {
-	background: url(./img/scrollbar_arrow.png) no-repeat -30px 0;
-}
-
-::-webkit-scrollbar-button:end {
-	width: 10px;
-	height: 10px;
-	background: url(./img/scrollbar_arrow.png) no-repeat 0 -18px;
-}
-
-::-webkit-scrollbar-button:end:hover {
-	background: url(./img/scrollbar_arrow.png) no-repeat -15px -18px;
-}
-
-::-webkit-scrollbar-button:end:active {
-	background: url(./img/scrollbar_arrow.png) no-repeat -30px -18px;
-}

themes/yilia/source-src/css/share.less

@@ -11,30 +11,28 @@
   align-items: center;
   flex-wrap: wrap;
   a {
-    border: 1px solid $colorBorder;
+    border: 1px solid @colorBorder;
     border-radius: 50%;
-    display: -moz-inline-stack;
     display: inline-block;
     vertical-align: middle;
-    zoom: 1;
     margin: 10px;
     transition: 0.3s;
     text-align: center;
-    color: $colorF;
+    color: @colorF;
     opacity: 0.7;
     width: 28px;
     height: 28px;
     line-height: 26px;
     text-shadow: 1px 1px 1px #509eb7;
     &:active {
-      color: $colorF;
+      color: @colorF;
     }
     &:hover {
       transform: scale(1.2);
     }
     &.share-outer {
       border: none;
-      color: $colorF;
+      color: @colorF;
       background: #4d4d4d;
       text-shadow: none;
     }
@@ -49,7 +47,7 @@
   padding: 20px;
   text-align: center;
   color: #727272;
-  background: $colorBg;
+  background: @colorBg;
   border-radius: 4px;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
   opacity: 0;

themes/yilia/source-src/css/social.less

@@ -12,9 +12,7 @@
       border-radius: 50%;
       display: inline-block;
       vertical-align: middle;
-      *vertical-align:auto;
       zoom: 1;
-      *display:inline;
       margin: 0 8px 15px 8px;
       transition: 0.3s;
       text-align: center;
@@ -24,7 +22,7 @@
       height: 28px;
       line-height: 28px;
       &:hover {
-        opacity:1
+        opacity: 1;
       }
     }
     a.weibo {

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

@@ -0,0 +1,120 @@
+// tags.less
+// 标签颜色组：将 @for 循环手动展开
+// @tagColors: #88acdb, #ffa07a, #ca5757, #76becc, #7e608d, #6fc0e4, #bc8f8f
+
+#header .tagcloud a {
+  color: #fff;
+}
+.tagcloud {
+  a.js-tag {
+    display: inline-block;
+    text-decoration: none;
+    font-weight: normal;
+    font-size: 10px;
+    color: @colorF;
+    height: 18px;
+    line-height: 18px;
+    padding: 0 5px 0px 10px;
+    position: relative;
+    border-radius: 0 5px 5px 0;
+    margin: 5px 9px 5px 8px;
+    font-family: Menlo, Monaco, "Andale Mono", "lucida console";
+    &:hover {
+      opacity: 0.8;
+    }
+    &::before {
+      content: " ";
+      width: 0px;
+      height: 0px;
+      position: absolute;
+      top: 0;
+      left: -18px;
+      border: 9px solid transparent;
+    }
+    &::after {
+      content: " ";
+      width: 4px;
+      height: 4px;
+      background-color: @colorF;
+      border-radius: 4px;
+      box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, .3);
+      position: absolute;
+      top: 7px;
+      left: 2px;
+    }
+  }
+
+  // 手动展开 @for $index from 1 to 8 的 7 个标签颜色
+  a.color1 {
+    background: #88acdb;
+    &::before { border-right-color: #88acdb; }
+  }
+  a.color2 {
+    background: #ffa07a;
+    &::before { border-right-color: #ffa07a; }
+  }
+  a.color3 {
+    background: #ca5757;
+    &::before { border-right-color: #ca5757; }
+  }
+  a.color4 {
+    background: #76becc;
+    &::before { border-right-color: #76becc; }
+  }
+  a.color5 {
+    background: #7e608d;
+    &::before { border-right-color: #7e608d; }
+  }
+  a.color6 {
+    background: #6fc0e4;
+    &::before { border-right-color: #6fc0e4; }
+  }
+  a.color7 {
+    background: #bc8f8f;
+    &::before { border-right-color: #bc8f8f; }
+  }
+}
+
+
+.article-tag-list {
+  .article-tag-list-item {
+    float: left;
+  }
+}
+.article-pop-out {
+  float: left;
+  .icon-thumb-tack {
+    color: @color9;
+    float: left;
+    margin-right: 10px;
+    margin-top: 6px;
+  }
+}
+.article-tag, .article-category {
+  float: left;
+  .article-tag-list {
+    float: left;
+  }
+  .icon {
+    color: @color9;
+    float: left;
+    margin-right: 10px;
+    margin-top: 8px;
+  }
+}
+.article-pop-out {
+  float: left;
+}
+
+.archive-article-date {
+  color: @color9;
+  margin-right: @articlePadding;
+  float: right;
+  transition: color 0.3s;
+  &:hover {
+    color: #b5b5b5;
+  }
+  .icon {
+    margin: 5px 5px 5px 0;
+  }
+}

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

@@ -1,95 +0,0 @@
-#header .tagcloud a{
-  color:#fff; 
-}
-.tagcloud{
-  a.js-tag{
-    display:inline-block;  
-    text-decoration:none;  
-    font-weight: normal;
-    font-size:10px;  
-    color:$colorF;   
-    height:18px;  
-    line-height:18px;  
-    padding:0 5px 0px 10px;  
-    position:relative;  
-    border-radius:0 5px 5px 0; 
-    margin: 5px 9px 5px 8px;
-    font-family: Menlo, Monaco, "Andale Mono", "lucida console";
-    &:hover{
-      opacity: 0.8;
-    }
-    &::before{
-      content: " ";
-      width: 0px;
-      height: 0px;
-      position: absolute;
-      top: 0;
-      left: -18px;
-      border: 9px solid transparent;
-    }
-    &::after{  
-      content:" ";  
-      width:4px;  
-      height:4px;  
-      background-color:$colorF;  
-      border-radius:4px;  
-      box-shadow:0px 0px 0px 1px rgba(0,0,0,.3);  
-      position:absolute;  
-      top: 7px;
-      left: 2px;
-    }  
-  }
-
-  @for $index from 1 to length($tagcolorList)+1 {
-    a.color#{$index}{
-      background: nth($tagcolorList,$index);
-      &::before{
-        border-right-color: nth($tagcolorList,$index);  
-      }
-    }
-  }
-}
-
-
-.article-tag-list{
-  .article-tag-list-item{
-    float: left;
-  }
-}
-.article-pop-out{
-  float: left;
-  .icon-thumb-tack {
-    color: $color9;
-    float: left;
-    margin-right: 10px;
-    margin-top: 6px;
-  }
-}
-.article-tag, .article-category{
-  float: left;
-  .article-tag-list{
-    float: left;
-  }
-  .icon {
-    color: $color9;
-    float: left;
-    margin-right: 10px;
-    margin-top: 8px;
-  }
-}
-.article-pop-out {
-  float: left;
-}
-
-.archive-article-date {
-  color: $color9;
-  margin-right: $articlePadding;
-  float: right;
-  transition: color 0.3s;
-  &:hover {
-    color: #b5b5b5;
-  }
-  .icon {
-    margin: 5px 5px 5px 0;
-  }
-}

themes/yilia/source-src/css/tools.less

@@ -8,13 +8,12 @@
   padding: 0;
   opacity: 0;
   -webkit-overflow-scrolling: touch;
-  overflow-scrolling: touch;
+  .trans();
-  @extend %trans;
   &.show {
-    @extend %anmSmallLeftIn;
+    .anmSmallLeftIn();
   }
   &.hide {
-    @extend %anmSmallLeftOut;
+    .anmSmallLeftOut();
   }
   .tools-nav {
     display: none;
@@ -33,11 +32,11 @@
     .search-wrap {
       margin: 20px 20px 10px 20px;
       position: relative;
-      border-bottom: 2px solid $colorF;
+      border-bottom: 2px solid @colorF;
       display: flex;
       flex-wrap: wrap;
       .search-ipt {
-        color: $colorF;
+        color: @colorF;
         background: none;
         border: none;
         flex-grow: 1;
@@ -48,9 +47,9 @@
         position: absolute;
         right: 0;
         bottom: 7px;
-        color: $colorF;
+        color: @colorF;
         cursor: pointer;
-        @extend %trans;
+        .trans();
         &:hover {
           transform: scale(1.2);
         }
@@ -64,7 +63,7 @@
         font-size: 14px;
         line-height: 25px;
         > .icon-close {
-          color: darken($colorF, 15%);
+          color: darken(@colorF, 15%);
           font-size: 12px;
           position: relative;
           margin-right: 3px;
@@ -79,7 +78,7 @@
       text-align: center;
       position: relative;
       .article-tag-list {
-        @extend %trans;
+        .trans();
         margin: 15px 10px 0;
         padding: 10px;
         background: rgba(255, 255, 255, 0.2);
@@ -95,7 +94,6 @@
       margin-top: 10px;
       color: rgba(77, 77, 77, 0.75);
       -webkit-overflow-scrolling: touch;
-      overflow-scrolling: touch;
       overflow-y: auto;
       .search-li {
         padding: 10px 20px;
@@ -117,7 +115,7 @@
         }
         &:hover {
           color: #fff;
-          @extend %trans;
+          .trans();
         }
       }
       .search-time, .search-tag, .search-category {
@@ -133,7 +131,7 @@
           margin-right: 5px;
           &:hover {
             color: #fff;
-            @extend %trans;
+            .trans();
           }
         }
       }
@@ -153,17 +151,18 @@
     text-shadow: 1px 1px rgba(77, 77, 77, 0.45);
   }
 }
-// 按钮开关
+
-@mixin borderRadius($radius:20px) {
+// 按钮开关相关 mixin
-  border-radius: $radius;
+.borderRadius(@radius: 20px) {
-  border-top-left-radius: $radius;
+  border-radius: @radius;
-  border-top-right-radius: $radius;
+  border-top-left-radius: @radius;
-  border-bottom-left-radius: $radius;
+  border-top-right-radius: @radius;
-  border-bottom-right-radius: $radius;
+  border-bottom-left-radius: @radius;
+  border-bottom-right-radius: @radius;
 }
 
-$duration: .4s;
+@duration: .4s;
-$checkedColor: #64bd63;
+@checkedColor: #64bd63;
 label.bui-switch-label {
   input {
     position: absolute;
@@ -171,9 +170,9 @@ label.bui-switch-label {
     visibility: hidden;
   }
   input:checked {
-    border-color: $checkedColor;
+    border-color: @checkedColor;
-    box-shadow: $checkedColor 0 0 0 16px inset;
+    box-shadow: @checkedColor 0 0 0 16px inset;
-    background-color: $checkedColor;
+    background-color: @checkedColor;
     &:before {
       left: 27px;
     }
@@ -201,13 +200,10 @@ label.bui-switch-label {
     border: 1px solid #dfdfdf;
     background-color: #fdfdfd;
     box-shadow: #dfdfdf 0 0 0 0 inset;
-    @include borderRadius();
+    .borderRadius();
     background-clip: content-box;
     display: inline-block;
-    -webkit-appearance: none;
+    appearance: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
     outline: none;
     &:before {
@@ -216,28 +212,28 @@ label.bui-switch-label {
       height: 18px;
       position: absolute;
       left: 1px;
-      @include borderRadius();
+      .borderRadius();
       background-color: #fff;
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
     }
   }
   input:checked + .bui-switch {
-    border-color: $checkedColor;
+    border-color: @checkedColor;
-    box-shadow: $checkedColor 0 0 0 16px inset;
+    box-shadow: @checkedColor 0 0 0 16px inset;
-    background-color: $checkedColor;
+    background-color: @checkedColor;
     &:before {
       left: 30px;
     }
   }
   &.bui-switch-animbg {
-    transition: background-color ease $duration;
+    transition: background-color ease @duration;
     .bui-switch:before {
       transition: left 0.3s;
     }
     input:checked + .bui-switch {
       box-shadow: #dfdfdf 0 0 0 0 inset;
-      background-color: $checkedColor;
+      background-color: @checkedColor;
-      transition: border-color $duration, background-color ease $duration;
+      transition: border-color @duration, background-color ease @duration;
       &:before {
         transition: left 0.3s;
       }
@@ -273,10 +269,10 @@ label.bui-switch-label {
     position: relative;
     .search-result-item {
       text-align: left;
-      border-bottom: 1px dashed $colorC;
+      border-bottom: 1px dashed @colorC;
       padding: 10px 10px 0;
       &:hover {
-        border-bottom-color: $colorA;
+        border-bottom-color: @colorA;
       }
     }
     .tip {
@@ -285,7 +281,7 @@ label.bui-switch-label {
     .more-item {
       cursor: pointer;
       transform: rotate(180deg) translateY(60px);
-      background: linear-gradient(-180deg,$colorBg 10%,rgba(255, 255, 255, 0) 100%);
+      background: linear-gradient(-180deg, @colorBg 10%, rgba(255, 255, 255, 0) 100%);
       position: absolute;
       height: 70px;
       width: 100%;

themes/yilia/source-src/css/tooltip.less

@@ -83,12 +83,12 @@
 
   .tooltip-west .tooltip-content::before,
   .tooltip-west .tooltip-content::after {
-    right: 99%; /* because of FF, otherwise we have a gap */
+    right: 99%;
   }
 
   .tooltip-east .tooltip-content::before,
   .tooltip-east .tooltip-content::after {
-    left: 99%; /* because of FF, otherwise we have a gap */
+    left: 99%;
   }
 
   .tooltip-east .tooltip-content::after {
@@ -112,7 +112,6 @@
     bottom: 100%;
     left: 50%;
     pointer-events: none;
-    -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
   }
 

themes/yilia/source-src/css/waifu.less

@@ -20,7 +20,7 @@
     padding: 5px 10px;
     border: 1px solid rgba(107, 107, 107, 0.7);
     border-radius: 8px;
-    background-color: $colorBg;
+    background-color: @colorBg;
     font-size: 13px;
     text-overflow: ellipsis;
     position: absolute;
@@ -48,14 +48,14 @@
       width: 0;
       height: 0;
       left: 20px;
-      border-top: 10px $colorBg solid;
+      border-top: 10px @colorBg solid;
       border-left: 7px transparent solid;
-      border-right: 6px $colorBg solid;
+      border-right: 6px @colorBg solid;
       border-bottom: 10px transparent solid;
     }
   }
   .waifu-tool {
-    color: $colorA;
+    color: @colorA;
     top: 80px;
     right: 60px;
     font-size: 14px;
@@ -64,13 +64,13 @@
       display: block;
       cursor: pointer;
       color: rgb(57, 57, 57);
-      background-color: $colorBg;
+      background-color: @colorBg;
       border: 1px solid rgb(57, 57, 57);
       border-radius: 5px;
       padding: 0 4px;
       margin-bottom: 4px;
       line-height: 20px;
-      @extend %trans;
+      .trans();
       animation-duration: 30s;
       animation-iteration-count: infinite;
       animation-name: shake;

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

@@ -1,6 +1,5 @@
 // 样式
-import '../css/main.scss'
+import '../css/main.less'
-import '../css/font-awsome.css'
 // 分享
 import Share from './share'
 // 边缘

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

@@ -20,23 +20,23 @@ function tabActive() {
 	})
 }
 
-function getElementLeft(element) {　　　　
+function getElementLeft(element) {
-	var actualLeft = element.offsetLeft　　　　
+	var actualLeft = element.offsetLeft
-	var current = element.offsetParent　　　　
+	var current = element.offsetParent
-	while (current !== null) {　　　　　　
+	while (current !== null) {
-		actualLeft += current.offsetLeft　　　　
+		actualLeft += current.offsetLeft
-		current = current.offsetParent　　
+		current = current.offsetParent
-	}　　
+	}
 	return actualLeft
-}　　
+}
-function getElementTop(element) {　　　　
+function getElementTop(element) {
-	var actualTop = element.offsetTop　　　　
+	var actualTop = element.offsetTop
-	var current = element.offsetParent　　　　
+	var current = element.offsetParent
-	while (current !== null) {　　　　　　
+	while (current !== null) {
-		actualTop += current.offsetTop　　　　　　
+		actualTop += current.offsetTop
-		current = current.offsetParent　　　　
+		current = current.offsetParent
-	}　　　　
+	}
-	return actualTop　　
+	return actualTop
 }
 
 function scrollStop($dom, top, limit, zIndex, diff) {

themes/yilia/source-src/js/photo-wall.js

@@ -1,4 +1,4 @@
-import axios from 'axios'
+import http from './request'
 import PhotoSwipe from 'photoswipe'
 import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default'
 
@@ -27,10 +27,10 @@ function loadMoreItems(step) {
   scrollLock = true //加载过程中锁定滚动加载
   loadTip.style.display = 'block'
   // 滚动到底部时调用
-  axios.get(`${themeConfig.root}api/v2/common/photos`, {params: {start:totalIndex, limit:step}}).then(res => {
+  http.get('/api/v2/common/photos', {params: {start:totalIndex, limit:step}}).then(res => {
     var itemContainer = document.createElement('div')
-    for(let index = 0 ; index<res.data.data.length && totalIndex<res.data.total ; index++,totalIndex++ ) {
+    for(let index = 0 ; index<res.list.length && totalIndex<res.total ; index++,totalIndex++ ) {
-      let imgHeight = null, imgFile = res.data.data[index],
+      let imgHeight = null, imgFile = res.list[index],
         imgSrc = `${themeConfig.pictureCdn}/${imgFile.name}`,
         imgThumbnail = imgFile.thumbnail ? `${themeConfig.pictureCdn}/${imgFile.thumbnail}` : imgSrc
       let wrapperWidth = photoWallWrapper.getBoundingClientRect().width
@@ -69,7 +69,7 @@ function loadMoreItems(step) {
     itemContainer.classList.add('item-container')
     // itemContainer.insertAdjacentHTML('beforeend', imgItems)
     photoWallWrapper.appendChild(itemContainer)
-    if( totalIndex >= res.data.total ) {
+    if( totalIndex >= res.total ) {
       loadTip.textContent = '没有更多图片啦/(ㄒoㄒ)/~~'
     } else {
       setTimeout(()=>{

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

@@ -0,0 +1,52 @@
+const DEFAULT_TIMEOUT = 10000
+
+function serializeParams(params) {
+  if (!params) return ''
+  const query = Object.entries(params)
+    .filter(([, v]) => v !== undefined && v !== null)
+    .flatMap(([k, v]) => Array.isArray(v) ? v.map(item => `${encodeURIComponent(k)}=${encodeURIComponent(item)}`) : [`${encodeURIComponent(k)}=${encodeURIComponent(v)}`])
+    .join('&')
+  return query ? '?' + query : ''
+}
+
+function handleResponse(res) {
+  if (!res.ok) {
+    return Promise.reject(new Error(`HTTP ${res.status}`))
+  }
+  return res.json().then(responseBody => {
+    // 统一响应格式处理
+    switch (responseBody.code) {
+      case 0:
+        // 成功，直接返回数据
+        return responseBody.data
+      case -1:
+        return Promise.reject(new Error(responseBody.message || '请求失败'))
+      default:
+        // 其他情况，兼容没有包装格式的响应
+        return responseBody
+    }
+  })
+}
+
+async function request(url, options = {}) {
+  const controller = new AbortController()
+  const timer = setTimeout(() => controller.abort(), DEFAULT_TIMEOUT)
+  return fetch(url, { ...options, signal: controller.signal })
+    .then(res => { clearTimeout(timer); return handleResponse(res) })
+    .catch(err => { clearTimeout(timer); return Promise.reject(err) })
+}
+
+const http = {
+  get(url, { params } = {}) {
+    return request(url + serializeParams(params))
+  },
+  post(url, data) {
+    return request(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data)
+    })
+  }
+}
+
+export default http

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

@@ -1,4 +1,4 @@
-import axios from 'axios'
+import http from './request'
 import Vue from 'vue/dist/vue.esm'
 import waifuTips from '../config/waifu-tip.json'
 
@@ -99,16 +99,15 @@ const vm = new Vue({
         limit: this.fullTextSearch.limit,
         words: this.fullTextSearchWords
       }
-      axios.get(window.themeConfig.root + 'api/v2/common/search', {params}).then(res => {
+      http.get('/api/v2/common/search', {params}).then(res => {
         this.fullTextSearch.isLoading = false
         fullTextSearchTimer = null
-        let result = res.data
+        if(!Array.isArray(res.list) || !res.list.length) {
-        if(!Array.isArray(result.data) || !result.data.length) {
           this.fullTextSearch.tip = '未搜索到匹配文章'
         } else {
-          this.fullTextSearchItems.push(...result.data)
+          this.fullTextSearchItems.push(...res.list)
         }
-        this.fullTextSearch.hasMore = (result.total > this.fullTextSearch.pageNum * this.fullTextSearch.limit)
+        this.fullTextSearch.hasMore = (res.total > this.fullTextSearch.pageNum * this.fullTextSearch.limit)
       }).catch(err => {
         this.fullTextSearch.tip = '加载失败, 请刷新重试'
         this.fullTextSearch.isLoading = false
@@ -169,8 +168,8 @@ const vm = new Vue({
     }
   },
   mounted () {
-    axios.get(window.themeConfig.root + 'content.json').then((res)=>{
+    fetch(window.themeConfig.root + 'content.json').then(res => res.json()).then(resJson=>{
-      this.items = res.data
+      this.items = resJson
     }).catch(err => {
       console.warn('加载文章列表失败')
     })
@@ -225,8 +224,7 @@ function handleSearch(searchItems) {
 
 async function welcomeMessage() {
   let now = new Date().getHours()
-  return axios.get(`${window.themeConfig.root}api/v2/common/config/waifu_tip`).then(res => {
+  return http.get('/api/v2/common/config/waifu_tip').then(textTimes => {
-    let textTimes = res.data
     let text = null
     Array.prototype.sort.call(textTimes, (item1, item2) => {
       if(item1.start>item2.start) {
@@ -273,8 +271,8 @@ const waifuTools = {
   },
   'tools.chart'() {
     // 一言
-    axios.get(`${window.themeConfig.root}api/v2/common/hitokoto?length=40&format=json`).then(res => {
+    http.get('/api/v2/common/hitokoto', { params: {format: 'json'} }).then(res => {
-      this.showMessage(res.data.hitokoto + (res.data.from?`　　——${res.data.from}`:''))
+      this.showMessage(res.hitokoto + (res.from?`　　——${res.from}`:''))
     })
   },
   'tools.search'() {

themes/yilia/webpack.config.js

@@ -1,7 +1,6 @@
 const TerserPlugin = require('terser-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 
 
 const htmlPluginConfig = {
@@ -24,7 +23,7 @@ module.exports = function(env, argv) {
       })]
     },
     entry: {
-      main: ['babel-polyfill', './source-src/js/main.js'],
+      main: './source-src/js/main.js',
       slider: './source-src/js/slider.js',
       mobile: './source-src/js/mobile.js',
       viewer: './source-src/js/viewer.js'
@@ -32,44 +31,31 @@ module.exports = function(env, argv) {
     output: {
       publicPath: '/',
       path: __dirname + '/source',
-      filename: isProd ? 'js/[name].[chunkhash].js' : 'js/[name].js'
+      filename: isProd ? 'js/[name].[chunkhash].js' : 'js/[name].js',
+      clean: isProd ? { keep: (asset) => !/^(js|css|fonts|images)\//.test(asset) } : false
     },
     module: {
       rules: [{
           test: /\.js$/,
-          use: {
+          use: 'babel-loader',
-            loader: 'babel-loader',
-            options: {
-              presets: ['@babel/preset-env'],
-              plugins: ['@babel/plugin-proposal-class-properties'],
-            },
-          },
           exclude: /node_modules/
         },{
-          test: /\.(scss|sass)$/,
+          test: /\.less$/,
-          use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
+          use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
         },{
           test: /\.css$/,
-          use: [MiniCssExtractPlugin.loader, 'css-loader']
+          use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
         },{
           test: /\.(png|jpe?g|gif|ico)$/,
-          use: {
+          type: 'asset/resource',
-            loader: 'file-loader',
+          generator: {
-            options: {
+            filename: 'images/[name].[contenthash:6][ext]'
-              name: '[name].[contenthash:6].[ext]',
-              outputPath: 'images',
-              esModule: false  // 不使用es6的模块语法
-            }
           }
         },{
           test: /\.(svg|eot|ttf|woff2?|otf)$/,
-          use: {
+          type: 'asset/resource',
-            loader: 'file-loader',
+          generator: {
-            options: {
+            filename: 'fonts/[name].[contenthash:6][ext]'
-              name: '[name].[contenthash:6].[ext]',
-              outputPath: 'fonts',
-              esModule: false  // 不使用es6的模块语法
-            }
           }
         }
       ]
@@ -83,11 +69,6 @@ module.exports = function(env, argv) {
         template: './source-src/template/css.html',
         filename: '../layout/_partial/css.ejs'
       }, htmlPluginConfig)),
-      new CleanWebpackPlugin({
-        cleanOnceBeforeBuildPatterns: ['js/*','css/*','fonts/*','images/*'],
-        verbose: true,
-        dry: false,
-      }),
       new MiniCssExtractPlugin({
         filename: 'css/[name].[contenthash:6].css'
       })