improvement: tags 設定彩色顯示後，字型大小將根據tag的文章數量而變化 close #365

improvement: 調整tags頁和categories頁在寬度小於768時的字體大小

layout/page.pug

@@ -7,7 +7,7 @@ block content
         |  - 
         span.tag-cloud__amount= site.tags.length
       .tag-cloud-tags
-        !=cloudTags({source: site.tags, minfontsize: 1, maxfontsize: 2.1, limit: 0, unit: 'em'})
+        !=cloudTags({source: site.tags, minfontsize: 1.2, maxfontsize: 2.1, limit: 0, unit: 'em'})
       if page.comments !== false && theme.comments && theme.comments.use
         - var commentsJsLoad = true
         !=partial('includes/third-party/comments/index', {}, {cache:theme.fragment_cache})

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.2.0-b3",
+  "version": "3.2.0-b4",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {

scripts/helpers/page.js

@@ -34,19 +34,32 @@ hexo.extend.helper.register('injectHtml', function (data) {
 
 hexo.extend.helper.register('cloudTags', function (options = {}) {
   const env = this
-  const source = options.source
+  let source = options.source
   const minfontsize = options.minfontsize
   const maxfontsize = options.maxfontsize
   const limit = options.limit
   const unit = options.unit || 'px'
 
   let result = ''
-  const tagLimit = limit === 0 ? source.length : limit
-  source.sort('name').limit(tagLimit).forEach(function (tags) {
-    const fontSizeRD = Math.random() * (maxfontsize - minfontsize) + minfontsize
-    const fontSize = fontSizeRD.toFixed(2) + unit
+  if (limit > 0) {
+    source = source.limit(limit)
+  }
+
+  const sizes = []
+  source.sort('length').forEach(tag => {
+    const { length } = tag
+    if (sizes.includes(length)) return
+    sizes.push(length)
+  })
+
+  const length = sizes.length - 1
+  source.forEach(tag => {
+    const ratio = length ? sizes.indexOf(tag.length) / length : 0
+    const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
+    let style = `font-size: ${parseFloat(size.toFixed(2))}${unit};`
     const color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
-    result += `<a href='${env.url_for(tags.path)}' style='font-size:${fontSize}; color:${color}'>${tags.name}</a>`
+    style += ` color: ${color}`
+    result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`
   })
   return result
 })

source/css/_page/categories.styl

@@ -9,6 +9,9 @@
       text-align: center
       font-size: 2.57em
 
+      +maxWidth768()
+        font-size: 2em
+
     .category-list
       a
         color: var(--font-color)

source/css/_page/tags.styl

@@ -10,5 +10,11 @@
       color: $text-hover !important
       transform: scale(1.1)
 
+    +maxWidth768()
+      zoom: .85
+
   &__title
     font-size: 2.57em
+
+    +maxWidth768()
+      font-size: 2em