原生CSS变量 补充

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"
   }
-}
+}

scaffolds/draft.md

@@ -1,4 +0,0 @@
----
-title: {{ title }}
-tags:
----

scaffolds/page.md

@@ -1,4 +0,0 @@
----
-title: {{ title }}
-date: {{ date }}
----

scaffolds/post.md

@@ -1,5 +0,0 @@
----
-title: {{ title }}
-date: {{ date }}
-tags:
----

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

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);
 }
-```
+```
+
+
+
+### 区分于编程语言中的变量
+原生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
+因为后一次自定义属性的定义覆盖了第一次，与常规编程语言中的变量先定义后使用的逻辑不同

themes/yilia/layout/_partial/post/category.ejs

@@ -1,12 +1,12 @@
 <% if (post.categories && post.categories.length){ %>
-	<div class="article-category tagcloud">
-		<i class="icon icon-book"></i>
-		<ul class="article-tag-list">
-			<% post.categories.forEach(function(category, i){ %> 
-				<li class="article-tag-list-item">
-					<a href="<%=url_for(category.path) %>" class="js-tag article-tag-list-link color<%= category.name.length % 7 + 1 %>"><%-category.name%></a>
-				</li>
-			<% }) %>
-		</ul>
-	</div>
+<div class="article-category tagcloud">
+  <i class="icon icon-book"></i>
+  <ul class="article-tag-list">
+    <% post.categories.forEach(function(category, i){ %> 
+    <li class="article-tag-list-item">
+      <a href="<%=url_for(category.path) %>" class="js-tag article-tag-list-link color<%= category.name.length % 7 + 1 %>"><%-category.name%></a>
+    </li>
+    <% }) %>
+  </ul>
+</div>
 <% } %>

themes/yilia/layout/_partial/post/date.ejs

@@ -1,3 +1,5 @@
 <a href="<%- url_for('/archives'+date(post.date, '/YYYY/MM')) %>" class="<%= class_name %>">
-  	<time datetime="<%= date_xml(post.date) %>" itemprop="datePublished"><i class="icon icon-calendar"></i><%= date(post.date, date_format) %></time>
+  <time datetime="<%= date_xml(post.date) %>" itemprop="datePublished">
+    <i class="icon icon-calendar"></i><%= date(post.date, date_format) %>
+  </time>
 </a>

themes/yilia/layout/_partial/post/share.ejs

@@ -43,5 +43,3 @@
     <canvas class="qrcode-canvas" style="height:150px;width:150px;"></canvas>
   </div>
 </div>
-
-<%# <div class="mask js-mask"></div> %>

themes/yilia/layout/_partial/post/tag.ejs

@@ -1,12 +1,12 @@
 <% if (post.tags && post.tags.length){ %>
-	<div class="article-tag tagcloud">
-		<i class="icon icon-tags"></i>
-		<ul class="article-tag-list">
-			<% post.tags.forEach(function(tag, i){ %> 
-				<li class="article-tag-list-item">
-					<a href="<%= url_for(tag.path) %>" class="js-tag article-tag-list-link color<%= tag.name.length % 7 + 1 %>"><%-tag.name%></a>
-				</li>
-			<% }) %>
-		</ul>
-	</div>
+<div class="article-tag tagcloud">
+  <i class="icon icon-tags"></i>
+  <ul class="article-tag-list">
+    <% post.tags.forEach(function(tag, i){ %> 
+      <li class="article-tag-list-item">
+        <a href="<%= url_for(tag.path) %>" class="js-tag article-tag-list-link color<%= tag.name.length % 7 + 1 %>"><%-tag.name%></a>
+      </li>
+    <% }) %>
+  </ul>
+</div>
 <% } %>

themes/yilia/layout/_partial/viewer.ejs

@@ -6,7 +6,6 @@
       <div class="pswp__item"></div>
       <div class="pswp__item"></div>
     </div>
-
     <div class="pswp__ui pswp__ui--hidden">
       <div class="pswp__top-bar">
         <div class="pswp__counter"></div>
@@ -14,7 +13,6 @@
         <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>
         <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
         <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
-
         <div class="pswp__preloader">
           <div class="pswp__preloader__icn">
             <div class="pswp__preloader__cut">
@@ -23,17 +21,11 @@
           </div>
         </div>
       </div>
-
       <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
         <div class="pswp__share-tooltip"></div> 
       </div>
-
-      <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
-      </button>
-
-      <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
-      </button>
-
+      <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
+      <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
       <div class="pswp__caption">
         <div class="pswp__caption__center"></div>
       </div>