From 367b76c246cb114a2bfc962110871f25aad00b20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=B1=E8=BF=9B=E7=A6=84?= Date: Mon, 26 Apr 2021 14:45:26 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8E=9F=E7=94=9FCSS=E5=8F=98=E9=87=8F=20?= =?UTF-8?q?=E8=A1=A5=E5=85=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 6 +-- scaffolds/draft.md | 4 -- scaffolds/page.md | 4 -- scaffolds/post.md | 5 --- scripts/generator.js | 13 ++++++- source/_posts/前端杂烩/原生CSS变量.md | 38 ++++++++++++++++++- .../yilia/layout/_partial/post/category.ejs | 20 +++++----- themes/yilia/layout/_partial/post/date.ejs | 4 +- themes/yilia/layout/_partial/post/share.ejs | 2 - themes/yilia/layout/_partial/post/tag.ejs | 20 +++++----- themes/yilia/layout/_partial/viewer.ejs | 12 +----- 11 files changed, 77 insertions(+), 51 deletions(-) delete mode 100644 scaffolds/draft.md delete mode 100644 scaffolds/page.md delete mode 100644 scaffolds/post.md diff --git a/package.json b/package.json index 636f019..0edbd9c 100644 --- a/package.json +++ b/package.json @@ -3,14 +3,14 @@ "version": "1.1.0", "private": true, "hexo": { - "version": "4.2.0" + "version": "4.2.1" }, "scripts": { "dev": "hexo server", "build": "gulp" }, "dependencies": { - "hexo": "^4.2.0", + "hexo": "^4.2.1", "hexo-generator-archive": "^1.0.0", "hexo-generator-baidu-sitemap": "^0.1.6", "hexo-generator-category": "^1.0.0", @@ -33,4 +33,4 @@ "nunjucks": "^3.2.0", "optimist": "^0.6.1" } -} +} \ No newline at end of file diff --git a/scaffolds/draft.md b/scaffolds/draft.md deleted file mode 100644 index 498e95b..0000000 --- a/scaffolds/draft.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: {{ title }} -tags: ---- diff --git a/scaffolds/page.md b/scaffolds/page.md deleted file mode 100644 index f01ba3c..0000000 --- a/scaffolds/page.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: {{ title }} -date: {{ date }} ---- diff --git a/scaffolds/post.md b/scaffolds/post.md deleted file mode 100644 index 1f9b9a4..0000000 --- a/scaffolds/post.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: {{ title }} -date: {{ date }} -tags: ---- diff --git a/scripts/generator.js b/scripts/generator.js index aab7165..b70494a 100644 --- a/scripts/generator.js +++ b/scripts/generator.js @@ -11,7 +11,18 @@ const searchTmplSrc = path.join(__dirname, '../templates/articles.xml') hexo.extend.generator.register('xml', function(locals){ const searchTmpl = nunjucks.compile(fs.readFileSync(searchTmplSrc, 'utf8'), env) - const posts = locals.posts.sort('-date').toArray().slice(0, 10) + const descCompare = function(value1, value2) { + if(value1 > value2) { + return -1 + } else if(value1 < value2) { + return 1 + } else { + return 0 + } + } + const posts = locals.posts.toArray().sort(function(item1, item2){ + return descCompare(item1.updateDate || item1.date, item2.updateDate || item2.date) + }).slice(0, 10) const xmlData = searchTmpl.render({ posts, root: this.config.root diff --git a/source/_posts/前端杂烩/原生CSS变量.md b/source/_posts/前端杂烩/原生CSS变量.md index f0f500f..bd24027 100644 --- a/source/_posts/前端杂烩/原生CSS变量.md +++ b/source/_posts/前端杂烩/原生CSS变量.md @@ -1,6 +1,7 @@ --- title: 原生CSS变量 date: 2020-10-23 15:10:46 +updateDate: 2021-04-26 11:51:23 tags: - 前端 - css @@ -86,4 +87,39 @@ let value2 = getComputedStyle(box).getPropertyValue('--text-color') --box-width: 300; width: calc(var(--box-width) * 1px); } -``` \ No newline at end of file +``` + + + +### 区分于编程语言中的变量 +原生CSS的变量，将其称为**自定义属性**更为合理 +因为它和编程语言中的变量有很大不同 +比如 + +#### important +```css +.box1 { + --text-color: red !important; + color: var(--text-color); + color: blue; +} +.box2 { + --text-color: red !important; + --text-color: blue; + color: var(--text-color); +} +``` +如果在变量上加`!important`，是作用在这个变量(自定义属性)上，而不属于变量的值 +所以上述代码实际效果是box1是blue，box2是red + +#### 属性的覆盖 +```css +.box { + --s: 10px; + margin: var(--s); + --s: 20px; + padding: var(--s); +} +``` +上述代码的实际效果，margin和padding都会是20px +因为后一次自定义属性的定义覆盖了第一次，与常规编程语言中的变量先定义后使用的逻辑不同 \ No newline at end of file diff --git a/themes/yilia/layout/_partial/post/category.ejs b/themes/yilia/layout/_partial/post/category.ejs index 8930601..1f723e6 100644 --- a/themes/yilia/layout/_partial/post/category.ejs +++ b/themes/yilia/layout/_partial/post/category.ejs @@ -1,12 +1,12 @@ <% if (post.categories && post.categories.length){ %> -
- - -
+
+ + +
<% } %> diff --git a/themes/yilia/layout/_partial/post/date.ejs b/themes/yilia/layout/_partial/post/date.ejs index 9df2b7a..eeb0652 100644 --- a/themes/yilia/layout/_partial/post/date.ejs +++ b/themes/yilia/layout/_partial/post/date.ejs @@ -1,3 +1,5 @@ - + \ No newline at end of file diff --git a/themes/yilia/layout/_partial/post/share.ejs b/themes/yilia/layout/_partial/post/share.ejs index 6172d16..3effd16 100644 --- a/themes/yilia/layout/_partial/post/share.ejs +++ b/themes/yilia/layout/_partial/post/share.ejs @@ -43,5 +43,3 @@ - -<%#
%> \ No newline at end of file diff --git a/themes/yilia/layout/_partial/post/tag.ejs b/themes/yilia/layout/_partial/post/tag.ejs index 4b37492..3d0be9b 100644 --- a/themes/yilia/layout/_partial/post/tag.ejs +++ b/themes/yilia/layout/_partial/post/tag.ejs @@ -1,12 +1,12 @@ <% if (post.tags && post.tags.length){ %> -
- - -
+
+ + +
<% } %> \ No newline at end of file diff --git a/themes/yilia/layout/_partial/viewer.ejs b/themes/yilia/layout/_partial/viewer.ejs index 1646ed2..54e28d4 100644 --- a/themes/yilia/layout/_partial/viewer.ejs +++ b/themes/yilia/layout/_partial/viewer.ejs @@ -6,7 +6,6 @@
-
@@ -14,7 +13,6 @@ -
@@ -23,17 +21,11 @@
- - - - - - + +