sookie/blog-web
1
0
Fork 0
Code Issues 12 Pull Requests Projects Releases Wiki Activity

主题包升级webpack4

Browse Source
This commit is contained in:
结发受长生 2019-04-30 12:24:31 +08:00
parent 8d764b4dba
commit e1c0029234
15 changed files with 5126 additions and 2140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7063
themes/yilia/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

27
themes/yilia/package.json
View File

@ -1,7 +1,7 @@
{
"name": "yilia",
"version": "4.0.0",
"description": "a theme for hexo",
"version": "5.1.0",
"description": "Hexo响应式主题",
"scripts": {
"dev": "webpack --watch",
"build": "webpack -p"
@ -20,17 +20,18 @@
"devDependencies": {
"autoprefixer": "^6.5.1",
"clean-webpack-plugin": "^0.1.15",
"cross-env": "^1.0.6",
"css-loader": "^0.28.11",
"css-loader": "^2.1.1",
"dom101": "^1.3.0",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^2.24.1",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.6.0",
"node-sass": "^4.11.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^2.1.5",
"sass-loader": "^7.0.2",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"webpack": "^3.11.0"
"sass-loader": "^7.1.0",
"url-loader": "^1.1.2",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.1"
},
"dependencies": {
"axios": "^0.18.0",
@ -43,14 +44,8 @@
"babel-preset-stage-2": "^6.24.1",
"badjs-report": "^1.2.2",
"es6-promise": "^4.0.5",
"file-loader": "^0.9.0",
"js-cookie": "^2.1.3",
"leancloud-storage": "^3.7.3",
"qrious": "^4.0.2"
},
"config": {
"commitizen": {
"path": "cz-simple-log"
}
}
}

8
themes/yilia/source-src/css/archive.scss
View File

@ -19,7 +19,7 @@
z-index: 1;
}
.archive-year-wrap a{
color: #666;
color: $color6;
font-weight: bold;
padding-left: 48px;
}
@ -46,7 +46,7 @@
.archive-article-title {
font-size: 16px;
color: #333;
color: $colorText;
transition: color 0.3s;
&:hover{
color: #657b83;
@ -88,7 +88,7 @@
width: auto;
.article-date{
time{
color: #aaa;
color: $colorA;
}
}
.archive-article-date, .article-tag-list{
@ -97,7 +97,7 @@
display: inline-block;
vertical-align: middle;
zoom: 1;
color: #666;
color: $color6;
font-size: 14px;
}
.archive-article-date{

6
themes/yilia/source-src/css/article-main.scss
View File

@ -60,7 +60,7 @@
border: 1px solid #ddd;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
background: #fff;
background: $colorBg;
transition: all 0.2s ease-in;
img{
max-width: 100%;
@ -68,7 +68,7 @@
}
#comments {
margin:0 30px;
background-color:#fff;
background-color:$colorBg;
}
.article-inner h1.article-title, .article-title {
color: #696969;
@ -113,7 +113,7 @@
float: right;
a{
background: #4d4d4d;
color: #fff;
color: $colorF;
font-size: 12px;
padding: 5px 8px 5px;
line-height: 16px;

10
themes/yilia/source-src/css/aside.scss
View File

@ -5,7 +5,7 @@
z-index: 999;
font-size: 14px;
.icon-plane {
color: #fff;
color: $colorF;
text-shadow: 1px 1px 1px #509eb7;
opacity: 0.7;
font-size: 52px;
@ -52,7 +52,7 @@
.mod-side-operation__jump-to-top {
.icon-back {
transition: 0.3s;
color: #fff;
color: $colorF;
background: #ccc;
transform: rotate(90deg);
font-size: 32px;
@ -68,7 +68,7 @@
}
.toc-container.tooltip-left{
background: #ccc;
background: $colorC;
margin-top: 10px;
transition: 0.3s;
&:hover {
@ -77,7 +77,7 @@
.icon-font {
font-size: 22px;
line-height: 40px;
color: #fff;
color: $colorF;
}
.tooltip {
width: 40px;
@ -98,7 +98,7 @@
transform-origin: 100% 100%;
transform: translate3d(0, -10px, 0) rotate3d(1, 1, 1, -30deg);
a {
color: #fff;
color: $colorF;
}
&::after {
top: initial;

1
themes/yilia/source-src/css/core/_variables.scss
View File

@ -37,6 +37,7 @@ $colorOverlay: rgba(0,0,0,.7) !default; // 遮罩层颜色
$color3: #333;
$color6: #666;
$color9: #999;
$colorA: #aaa;
$colorC: #ccc;
$colorF: #f5f5f5;

2
themes/yilia/source-src/css/page.scss
View File

@ -6,7 +6,7 @@
height: 30px;
background: #4d4d4d;
display: inline-block;
color: #fff;
color: $colorF;
line-height: 30px;
font-size: 14px;
margin: 0 5px 30px;

6
themes/yilia/source-src/css/reward.scss
View File

@ -8,7 +8,7 @@
height: 56px;
line-height: 56px;
font-size: 20px;
color: #fff;
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);
@ -28,7 +28,7 @@
justify-content: space-around;
}
.reward-p {
color: #fff;
color: $colorF;
font-weight: bold;
text-shadow: 1px 1px 1px #45b9e0;
.icon {
@ -45,7 +45,7 @@
.reward-img {
width: 130px;
height: 130px;
border: 6px solid #fff;
border: 6px solid $colorBorder;
border-radius: 3px;
}
}

10
themes/yilia/source-src/css/share.scss
View File

@ -11,7 +11,7 @@
align-items: center;
flex-wrap: wrap;
a {
border: 1px solid #fff;
border: 1px solid $colorBorder;
border-radius: 50%;
display: -moz-inline-stack;
display: inline-block;
@ -21,21 +21,21 @@
-webkit-transition: 0.3s;
transition: 0.3s;
text-align: center;
color: #fff;
color: $colorF;
opacity: 0.7;
width: 28px;
height: 28px;
line-height: 26px;
text-shadow: 1px 1px 1px #509eb7;
&:active {
color: #fff;
color: $colorF;
}
&:hover {
transform: scale(1.2);
}
&.share-outer {
border: none;
color: #fff;
color: $colorF;
background: #4d4d4d;
text-shadow: none;
}
@ -50,7 +50,7 @@
padding: 20px;
text-align: center;
color: #727272;
background: #fff;
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;

10
themes/yilia/source-src/css/tags.scss
View File

@ -7,7 +7,7 @@
text-decoration:none;
font-weight: normal;
font-size:10px;
color:#fff;
color:$colorF;
height:18px;
line-height:18px;
padding:0 5px 0px 10px;
@ -31,7 +31,7 @@
content:" ";
width:4px;
height:4px;
background-color:#fff;
background-color:$colorF;
border-radius:4px;
box-shadow:0px 0px 0px 1px rgba(0,0,0,.3);
position:absolute;
@ -79,7 +79,7 @@
.article-pop-out{
float: left;
.icon-tuding {
color: #999;
color: $color9;
float: left;
margin-right: 10px;
margin-top: 6px;
@ -91,7 +91,7 @@
float: left;
}
.icon {
color: #999;
color: $color9;
float: left;
margin-right: 10px;
margin-top: 6px;
@ -102,7 +102,7 @@
}
.archive-article-date {
color: #999;
color: $color9;
margin-right: 7.6923%;
float: right;
transition: color 0.3s;

6
themes/yilia/source-src/css/tools.scss
View File

@ -38,16 +38,16 @@
position: relative;
.search-ipt {
width: 310px;
color: #fff;
color: $colorF;
background: none;
border: none;
border-bottom: 2px solid #fff;
border-bottom: 2px solid $colorF;
}
.icon {
position: absolute;
right: 0;
top: 7px;
color: #fff;
color: $colorF;
cursor: pointer;
@extend %trans;
&:hover {

8
themes/yilia/source-src/css/waifu.scss
View File

@ -20,7 +20,7 @@
padding: 5px 10px;
border: 1px solid rgba(107, 107, 107, 0.7);
border-radius: 8px;
background-color: #fff;
background-color: $colorBg;
font-size: 13px;
text-overflow: ellipsis;
position: absolute;
@ -48,9 +48,9 @@
width: 0;
height: 0;
left: 20px;
border-top: 10px white solid;
border-top: 10px $colorBg solid;
border-left: 7px transparent solid;
border-right: 6px white solid;
border-right: 6px $colorBg solid;
border-bottom: 10px transparent solid;
}
}
@ -64,7 +64,7 @@
display: block;
cursor: pointer;
color: rgb(57, 57, 57);
background-color: #fff;
background-color: $colorBg;
border: 1px solid rgb(57, 57, 57);
border-radius: 5px;
padding: 0 4px;

6
themes/yilia/source-src/js/main.js
View File

@ -1,7 +1,7 @@
// 样式
import '../css/main.scss'
// 图片查看器
import Viewer from './viewer'
// 图片查看器 -> 改为单独分块打包
// import Viewer from './viewer'
// 分享
import Share from './share'
// 边缘
@ -11,6 +11,6 @@ import Util from './util'
Util.addLoadEvent(function() {
Share.init()
Viewer.init()
// Viewer.init()
Aside.init()
})

8
themes/yilia/source-src/js/viewer.js
View File

@ -3,6 +3,8 @@ import PhotoSwipeUI_Default from '../lib/photoswipe/photoswipe-ui-default'
import '../lib/photoswipe/photoswipe.css'
import '../lib/photoswipe/default-skin/default-skin.css'
import Util from './util'
function init() {
let pswpElement = document.querySelectorAll('.pswp')[0];
let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img)'))
@ -12,7 +14,6 @@ function init() {
if (document.querySelector('.left-col.show')) return
let items = []
Array.prototype.forEach.call($imgArr, ($em2, i2) => {
let img = $em2.getAttribute('data-idx', i2)
let src = $em2.getAttribute('data-target') || $em2.getAttribute('src')
let title = $em2.getAttribute('alt')
// 获得原图尺寸
@ -34,4 +35,7 @@ function init() {
})
}
export default { init }
// export default { init }
Util.addLoadEvent(function() {
init()
})

95
themes/yilia/webpack.config.js
View File

@ -1,9 +1,8 @@
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanPlugin = require('clean-webpack-plugin')
// 模板压缩
// 详见：https://github.com/kangax/html-minifier#options-quick-reference
const minifyHTML = {
collapseInlineTagWhitespace: true,
@ -11,15 +10,13 @@ const minifyHTML = {
minifyJS:true
}
const mainCss = new ExtractTextPlugin("css/main.[contenthash:8].css")
const extraCss = new ExtractTextPlugin("css/extra.[contenthash:8].css")
module.exports = {
entry: {
main: "./source-src/js/main.js",
slider: "./source-src/js/slider.js",
mobile: ["babel-polyfill", "./source-src/js/mobile.js"],
comment: "./source-src/js/comment.js",
viewer: "./source-src/js/viewer.js",
waifu: "./source-src/js/waifu.js"
},
output: {
@ -27,37 +24,65 @@ module.exports = {
filename: "js/[name].[chunkhash:8].js"
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader?cacheDirectory',
exclude: /node_modules/
},{
test: /\.(scss|sass)$/,
loader: mainCss.extract({fallback:"style-loader",use:["css-loader","postcss-loader","sass-loader?outputStyle=compact"]})
},{
test: /\.css$/,
loaders: extraCss.extract({fallback:"style-loader",use:["css-loader?minimize=true","postcss-loader"]})
},{
test: /\.(png|jpe?g|gif|ico)$/,
loader: "url-loader",
options: {
limit: 1000,
publicPath: "../",
name: "images/[name].[ext]"
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options:{cacheDirectory: true}
},
exclude: /node_modules/
},{
test: /\.(scss|sass)$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"sass-loader"
]
},{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader"
]
},{
test: /\.(png|jpe?g|gif|ico)$/,
use: {
loader: "url-loader",
options: {
limit: 1000,
publicPath: "../",
name: "images/[name].[ext]"
}
}
},{
test: /\.(svg|eot|ttf|woff2?|otf)$/,
use: {
loader: "url-loader",
options: {
limit: 1000,
publicPath: "../",
name: "fonts/[name].[hash:6].[ext]"
}
}
}
},{
test: /\.(svg|eot|ttf|woff2?|otf)$/,
loader: "url-loader",
options: {
limit: 1000,
publicPath: "../",
name: "fonts/[name].[hash:6].[ext]"
}
}]
]
},
plugins: [
mainCss,
extraCss,
new MiniCssExtractPlugin({
filename: "css/[name].[contenthash:8].css",
chunkFilename: "[id].css"
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /viewer\..*?\.css$/g,
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
},
canPrint: true
}),
new HtmlWebpackPlugin({
inject: false,
cache: false,
@ -72,7 +97,7 @@ module.exports = {
template: './source-src/template/css.html',
filename: '../layout/_partial/css.ejs'
}),
new CleanPlugin(['source/js/*.js','source/css/*.css'],{
new CleanPlugin(['source/js/*.js','source/css/*.css','source/fonts/*'],{
verbose: true,
dry: false,
})