[feat] new tag-plugin: okr

_config.yml

@@ -251,6 +251,28 @@ tag_plugins:
   # {% hashtag %}
   hashtag:
     default_color: # red, orange, yellow, green, cyan, blue, purple
+  # {% okr o1 percent:0.5 status:normal %}
+  okr:
+    border: true # 是否显示边框
+    status: # 可以自行增加
+      # 进行中状态
+      in_track:
+        color: blue # red, orange, yellow, green, cyan, blue, purple
+        label: 正常
+      at_risk: 
+        color: yellow
+        label: 风险
+      off_track:
+        color: orange
+        label: 延期
+      # 结果状态
+      finished:
+        color: green
+        label: 已完成
+      unfinished:
+        color: red
+        label: 未完成
+      
 
 
 ######## JS Plugins ########

layout/_partial/main/navbar/breadcrumb.ejs

@@ -24,7 +24,7 @@ function layoutDiv() {
     el += '<div id="breadcrumb">';
     el += '<a class="cap breadcrumb" href="' + config.root + '">' + home_title + '</a>';
     el += '<span class="sep"></span>';
-    el += '<a class="cap breadcrumb" href="' + config.root + '">' + __("btn.blog") + '</a>';
+    el += '<a class="cap breadcrumb" href="' + config.index_generator.path + '">' + __("btn.blog") + '</a>';
     if (page.layout == "post" && page.categories && page.categories.length > 0) {
       el += '<span class="sep"></span>';
       el += list_categories(page.categories, {
@@ -37,8 +37,14 @@ function layoutDiv() {
     el += '</div>';
     // 发布日期
     el += '<div id="post-meta">';
-    el += __("meta.created") + '&nbsp;<time datetime="' + date_xml(page.date) + '">' + date(page.date, config.date_format) + '</time>';
+    el += `
+    <span>${__("meta.created")}&nbsp;<time datetime="${date_xml(page.date)}">${date(page.date, config.date_format)}</time></span>
+    `;
+    el += `
+    <span>${__("meta.updated")}&nbsp;<time datetime="${date_xml(page.updated)}">${date(page.updated, config.date_format)}</time></span>
+    `;
     el += '</div>';
+    
     el += '</div>';
     el += '</div>';
   } else if (page.layout === "wiki" && page.wiki && page.wiki.length > 0) {
@@ -72,7 +78,9 @@ function layoutDiv() {
     el += '</div>';
     // 更新日期
     el += '<div id="post-meta">';
-    el += __("meta.updated") + '&nbsp;<time datetime="' + date_xml(page.updated) + '">' + date(page.updated, config.date_format) + '</time>';
+    el += `
+    <span>${__("meta.updated")}&nbsp;<time datetime="${date_xml(page.updated)}">${date(page.updated, config.date_format)}</time></span>
+    `;
     el += '</div>';
     el += '</div>';
 

layout/_partial/main/navbar/list_post.ejs

@@ -4,9 +4,9 @@ function layoutDiv() {
   el += '<div class="nav-wrap">';
   el += '<nav class="sub post cap">';
   if (is_home()) {
-    el += '<a class="active" href="' + url_for("/") + '">' + __("btn.recent_publish") + '</a>';
+    el += '<a class="active" href="' + url_for(config.index_generator.path) + '">' + __("btn.recent_publish") + '</a>';
   } else {
-    el += '<a href="' + url_for("/") + '">' + __("btn.recent_publish") + '</a>';
+    el += '<a href="' + url_for(config.index_generator.path) + '">' + __("btn.recent_publish") + '</a>';
   }
 
   if (site.categories && site.categories.length > 0) {

scripts/tags/index.js

@@ -33,5 +33,5 @@ hexo.extend.tag.register('note', require('./lib/note')(hexo))
 hexo.extend.tag.register('poetry', require('./lib/poetry')(hexo), true)
 hexo.extend.tag.register('quot', require('./lib/quot')(hexo))
 hexo.extend.tag.register('hashtag', require('./lib/hashtag')(hexo))
-
+hexo.extend.tag.register('okr', require('./lib/okr')(hexo), {ends: true})
 // others

scripts/tags/inline-labels.js

@@ -29,7 +29,7 @@ hexo.extend.tag.register('psw', function(args) {
 hexo.extend.tag.register('sup', function(args) {
   args = hexo.args.map(args, ['color'], ['text'])
   var el = ''
-  el += '<sup class="tag-plugin sup"' + ' ' + hexo.args.joinTags(args, ['color']).join(' ') + '>'
+  el += '<sup class="tag-plugin colorful sup"' + ' ' + hexo.args.joinTags(args, ['color']).join(' ') + '>'
   el += args.text
   el += '</sup>'
   return el
@@ -37,7 +37,7 @@ hexo.extend.tag.register('sup', function(args) {
 hexo.extend.tag.register('sub', function(args) {
   args = hexo.args.map(args, ['color'], ['text'])
   var el = ''
-  el += '<sub class="tag-plugin sub"' + ' ' + hexo.args.joinTags(args, ['color']).join(' ') + '>'
+  el += '<sub class="tag-plugin colorful sub"' + ' ' + hexo.args.joinTags(args, ['color']).join(' ') + '>'
   el += args.text
   el += '</sub>'
   return el

scripts/tags/lib/ablock.js

@@ -17,7 +17,7 @@ module.exports = ctx => function(args, content) {
   }
   var el = ''
   // header
-  el += '<div class="tag-plugin note"'
+  el += '<div class="tag-plugin colorful note"'
   el += ' ' + ctx.args.joinTags(args, ['color', 'child']).join(' ')
   el += '>'
   // title

scripts/tags/lib/checkbox.js

@@ -13,7 +13,7 @@ module.exports = (ctx, type) => function(args) {
   args = ctx.args.map(args, ['color', 'checked', 'symbol'], ['text'])
   var el = ''
   // div
-  el += '<div class="tag-plugin checkbox"'
+  el += '<div class="tag-plugin colorful checkbox"'
   el += ' ' + ctx.args.joinTags(args, ['color', 'symbol']).join(' ')
   el += '>'
   // input

scripts/tags/lib/folders.js

@@ -15,7 +15,7 @@
 module.exports = ctx => function(args, content) {
   args = ctx.args.map(args, ['color'])
   var el = ''
-  el += '<div class="tag-plugin folders"'
+  el += '<div class="tag-plugin colorful folders"'
   el += ' ' + ctx.args.joinTags(args, ['color']).join(' ')
   el += '>'
   

scripts/tags/lib/folding.js

@@ -13,7 +13,7 @@ module.exports = ctx => function(args, content) {
   args = ctx.args.map(args, ['color', 'child', 'open'], ['title'])
   var el = ''
   // header
-  el += '<details class="tag-plugin folding"'
+  el += '<details class="tag-plugin colorful folding"'
   el += ' ' + ctx.args.joinTags(args, ['color', 'child']).join(' ')
   if (args.open && args.open == 'true') {
     el += ' open'

scripts/tags/lib/hashtag.js

@@ -26,7 +26,7 @@ module.exports = ctx => function(args) {
     }
   }
   var el = ''
-  el += '<a class="tag-plugin hashtag"'
+  el += '<a class="tag-plugin colorful hashtag"'
   el += ' ' + ctx.args.joinTags(args, ['color', 'href']).join(' ')
   el += '>'
   el += '<svg t="1701408144765" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4228" width="200" height="200"><path d="M426.6 64.8c34.8 5.8 58.4 38.8 52.6 73.6l-19.6 117.6h190.2l23-138.6c5.8-34.8 38.8-58.4 73.6-52.6s58.4 38.8 52.6 73.6l-19.4 117.6H896c35.4 0 64 28.6 64 64s-28.6 64-64 64h-137.8l-42.6 256H832c35.4 0 64 28.6 64 64s-28.6 64-64 64h-137.8l-23 138.6c-5.8 34.8-38.8 58.4-73.6 52.6s-58.4-38.8-52.6-73.6l19.6-117.4h-190.4l-23 138.6c-5.8 34.8-38.8 58.4-73.6 52.6s-58.4-38.8-52.6-73.6l19.4-117.8H128c-35.4 0-64-28.6-64-64s28.6-64 64-64h137.8l42.6-256H192c-35.4 0-64-28.6-64-64s28.6-64 64-64h137.8l23-138.6c5.8-34.8 38.8-58.4 73.6-52.6z m11.6 319.2l-42.6 256h190.2l42.6-256h-190.2z" p-id="4229"></path></svg>'

scripts/tags/lib/mark.js

@@ -14,7 +14,7 @@ module.exports = ctx => function(args) {
     args.color = ctx.theme.config.tag_plugins.mark.default_color
   }
   var el = ''
-  el += '<mark class="tag-plugin mark"'
+  el += '<mark class="tag-plugin colorful mark"'
   el += ' ' + ctx.args.joinTags(args, ['color']).join(' ')
   el += '>'
   el += args.text

scripts/tags/lib/note.js

@@ -19,7 +19,7 @@ module.exports = ctx => function(args) {
   }
   var el = ''
   // header
-  el += '<div class="tag-plugin note"'
+  el += '<div class="tag-plugin colorful note"'
   el += ' ' + ctx.args.joinTags(args, ['color', 'child']).join(' ')
   el += '>'
   // title

scripts/tags/lib/okr.js

@@ -0,0 +1,138 @@
+/**
+ * okr.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 
+ * {% okr o1 percent:0.5 status:delay %}
+ * title (only one line)
+ * note
+ * <!-- okr kr1 percent:1 -->
+ * title (only one line)
+ * note
+ * {% endokr %}
+ * 
+ */
+
+'use strict'
+
+function splitContentAndNote(input) {
+  var arr = input.trim().split('\n').filter(item => item.trim().length > 0)
+  if (arr.length == 0) {
+    return {title:'', note:''}
+  }
+  const title = arr.shift()
+  const note = arr.join('\n')
+  return {title:title, note:note}
+}
+
+function generateKRList(ctx, contentArray) {
+  if (contentArray.length < 3) {
+    console.error('invalid okr tag:', contentArray);
+    return []
+  }
+  var result = []
+  var krTagIndexes = []
+  for (let index = 0; index < contentArray.length; index++) {
+    const element = contentArray[index];
+    if (element.startsWith('kr')) {
+      krTagIndexes.push(index)
+    }
+  }
+  for (let index of krTagIndexes) {
+    if (index >= contentArray.length) {
+      break
+    }
+    const tagStr = contentArray[index]
+    const contentStr = contentArray[index+1]
+    if (contentStr.startsWith('kr')) {
+      continue
+    }
+    result.push({
+      krMeta: ctx.args.map(tagStr.split(/\s+/), ['percent', 'status'], 'krIndex'),
+      krBody: splitContentAndNote(contentStr)
+    })
+  }
+  return result
+}
+
+function layoutItem(ctx, type, index, title, note, color, label, percent) {
+  return `
+  <div class="okr-item ${type}">
+    <div class="okr-left">
+      <span class="title">${index.toUpperCase()}</span>
+    </div>
+    <div class="okr-center">
+      <span class="title">${title}</span>
+      <div class="note">${ctx.render.renderSync({text: note, engine: 'markdown'}).split('\n').join('')}</div>
+    </div>
+    <div class="okr-right colorful" color="${color}">
+      <div class="labels">
+        <span class="status label">${label}</span>
+        <span class="status percent">${percent * 100}%</span>
+      </div>
+      <div class="progress">
+        <div class="fill" style="width:${percent * 100}%;"></div>
+      </div>
+    </div>
+  </div>
+  `
+}
+
+module.exports = ctx => function(args, content = '') {
+  args = ctx.args.map(args, ['percent', 'status', 'color'], 'oIndex')
+  var contentArray = content.split(/<!--\s*okr (.*?)\s*-->/g).filter(item => item.trim().length > 0)
+  if (contentArray.length < 3) {
+    console.error('invalid okr tag:', contentArray);
+    return ''
+  }
+  const statusList = ctx.theme.config.tag_plugins.okr.status
+  const oMeta = args
+  const oBody = splitContentAndNote(contentArray.shift())
+  const krList = generateKRList(ctx, contentArray)
+  
+  var el_krs = ''
+  var krPercentList = []
+  for (let kr of krList) {
+    const { krMeta, krBody } = kr
+    const krPercent = Number(krMeta.percent) || 0
+    if (krMeta == null || krBody == null) {
+      continue
+    }
+    var status = null
+    if (krMeta.status && statusList[krMeta.status]) {
+      status = statusList[krMeta.status] 
+    }
+    if (status == null) {
+      if (krPercent >= 1) {
+        status = statusList['finished']
+      } else {
+        status = statusList['in_track']
+      }
+    }
+    krPercentList.push(krPercent)
+    el_krs += layoutItem(ctx, 'kr', krMeta.krIndex, krBody.title, krBody.note, status.color, status.label, krPercent)
+  }
+  const krPercentSum = krPercentList.reduce(
+    (accumulator, currentValue) => accumulator + currentValue,
+    0,
+  );
+  const oPercent = Number(oMeta.percent) || (krPercentSum / krPercentList.length)
+  var status = null
+  if (args.status != null && args.status && statusList[args.status]) {
+    status = statusList[args.status] 
+  }
+  if (status == null) {
+    if (oPercent >= 1) {
+      status = statusList['finished']
+    } else {
+      status = statusList['in_track']
+    }
+  } 
+  
+  var el = ''
+  el += '<div class="tag-plugin colorful okr"'
+  el += ' ' + ctx.args.joinTags(args, ['color']).join(' ')
+  el += '>'
+  el += layoutItem(ctx, 'o', oMeta.oIndex, oBody.title, oBody.note, status.color, status.label, oPercent)
+  el += el_krs
+  el += '</div>'
+  return el
+}

source/css/_defines/theme.styl

@@ -39,7 +39,6 @@ set_text_light()
   --block-border: hsl($color-block-h, $color-block-s, 90)
   --block-hover: hsl($color-block-h, $color-block-s, 92)
   set_text_dark()
-  --theme-bg2: $color-theme
   --theme-link: $color-link
 
 set_darkmode()

source/css/_layout/partial/bread-nav.styl

@@ -19,6 +19,13 @@
       color: $color-hover
   div#post-meta
     margin-top: 2px
+    span+span
+      margin-left: 8px
+      visibility: hidden
+  &:hover
+    div#post-meta
+      span+span
+        visibility: visible
 
 .bread-nav .ghrepo
   font-size: $fs-13

source/css/_layout/partial/paginator.styl

@@ -9,11 +9,16 @@
   border-radius: $border-card
   overflow: hidden
   box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.03)
+  color: var(--text-p3)
   .page-number
     padding: 4px 8px
     border-radius: 8px
-    background: var(--block)
     margin: 2px
+  a.page-number
+    color: var(--text-p3)
+    &:hover
+      color: var(--text-p1)
+      background: var(--block)
   .extend
     text-align: center
     background-size: contain
@@ -29,9 +34,8 @@
       background-image: url('https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.4/arrow/f049bbd4e88ec.svg')
   .current
     font-family: $ff-code
-    color: var(--text-p3)
+    background: var(--block)
   .extend
-    color: var(--text-p3)
     padding: 1rem
     line-height: 0
     filter: grayscale(100%)

source/css/_layout/tag-plugins/common.styl

@@ -13,8 +13,7 @@ set_text_black()
 
 set_dynamic_color($theme)
   --theme: $theme
-  --theme-bg1: hsl(hue($theme), 90, 90)
-  --theme-bg2: hsl(hue($theme), 90, 92)
+  --theme-block: hsl(hue($theme), 90, 92)
   --theme-border: hsl(hue($theme), 50, 80)
   --text-p0: hsl(hue($theme), 55, 16)
   --text-p1: hsl(hue($theme), 55, 20)
@@ -23,85 +22,79 @@ set_dynamic_color($theme)
 .tag-plugin
   --theme: var(--text-p1)
   --theme-border: var(--block-border)
-  --theme-bg1: hsl(hue($color-theme), 90, 90)
-  --theme-bg2: var(--block)
+  --theme-block: var(--block)
 
-.tag-plugin[color='red']
+.colorful[color='red']
   set_dynamic_color($c-red)
-.tag-plugin[color='orange']
+.colorful[color='orange']
   set_dynamic_color($c-orange)
-.tag-plugin[color='yellow']
+.colorful[color='yellow']
   set_dynamic_color($c-yellow)
-.tag-plugin[color='green']
+.colorful[color='green']
   set_dynamic_color($c-green)
-.tag-plugin[color='cyan']
+.colorful[color='cyan']
   set_dynamic_color($c-cyan)
-.tag-plugin[color='blue']
+.colorful[color='blue']
   set_dynamic_color($c-blue)
-.tag-plugin[color='purple']
+.colorful[color='purple']
   set_dynamic_color($c-purple)
 
-.tag-plugin[color='light']
-  --theme-bg1: hsl(0 0 88%)
-  --theme-bg2: white
+.colorful[color='light']
+  --theme-block: white
   set_text_black()
 
-.tag-plugin[color='dark']
-  --theme-bg1: hsl(0 0 12%)
-  --theme-bg2: #333
+.colorful[color='dark']
+  --theme-block: #333
   set_text_white()
 
-.tag-plugin[color='warning']
+.colorful[color='warning']
   --theme: $c-yellow
   --theme-border: #ffe659
-  --theme-bg2: #ffe659
+  --theme-block: #ffe659
   --theme-link: #ff453a
 
-.tag-plugin[color='error']
+.colorful[color='error']
   --theme: $c-yellow
   --theme-border: #ff453a
-  --theme-bg2: #ff453a
+  --theme-block: #ff453a
   --theme-link: #ffe659
   set_text_white()
 
 set_darkmode_tags()
   set_dynamic_color($theme)
     --theme: $theme
-    --theme-bg1: hsl(hue($theme), 50, 16)
-    --theme-bg2: hsl(hue($theme), 16, 16)
+    --theme-block: hsl(hue($theme), 16, 16)
     --theme-border: hsl(hue($theme), 50, 24)
     --text-p0: hsl(hue($theme), 100, 85)
     --text-p1: hsl(hue($theme), 50, 75)
     --text-p2: hsl(hue($theme), 80, 72)
   .tag-plugin.tag
     set_dynamic_color($color-theme)
-  .tag-plugin[color='red']
+  .colorful[color='red']
     set_dynamic_color($c-red)
-  .tag-plugin[color='orange']
+  .colorful[color='orange']
     set_dynamic_color($c-orange)
-  .tag-plugin[color='yellow']
+  .colorful[color='yellow']
     set_dynamic_color($c-yellow)
-  .tag-plugin[color='green']
+  .colorful[color='green']
     set_dynamic_color($c-green)
-  .tag-plugin[color='cyan']
+  .colorful[color='cyan']
     set_dynamic_color($c-cyan)
-  .tag-plugin[color='blue']
+  .colorful[color='blue']
     set_dynamic_color($c-blue)
-  .tag-plugin[color='purple']
+  .colorful[color='purple']
     set_dynamic_color($c-purple)
-  .tag-plugin[color='light']
+  .colorful[color='light']
     --theme-border: white
-    --theme-bg1: hsl(0 0 88%)
-    --theme-bg2: #fff
+    --theme-block: #fff
     set_text_black()
 
-  .tag-plugin[color='dark']
+  .colorful[color='dark']
     --theme-border: black
-    --theme-bg1: hsl(0 0 12%)
-    --theme-bg2: #111
+    --theme-block: #111
     set_text_white()
 
-  .tag-plugin[color='warning'],.tag-plugin[color='light']
+  .colorful[color='warning'],.colorful[color='light']
     set_text_black()
 
 if hexo-config('style.darkmode') == 'auto'

source/css/_layout/tag-plugins/folding.styl

@@ -3,7 +3,7 @@ details.folding
   padding: 1rem
   margin: 1rem 0
   border-radius: $border-block
-  background: var(--theme-bg2)
+  background: var(--theme-block)
   border: 1px solid var(--theme-border)
   summary
     cursor: pointer

source/css/_layout/tag-plugins/hashtag.styl

@@ -1,7 +1,7 @@
 .md-text .tag-plugin.hashtag
   padding: 0px 8px
   border-radius: 100px
-  background: var(--theme-bg1)
+  background: var(--theme-block)
   color: var(--text-p2)
   margin: 2px 0
   display: inline-flex
@@ -13,5 +13,5 @@
     margin: 0 2px
   &:hover
     background: var(--text-p2)
-    color: var(--theme-bg1)
+    color: var(--theme-block)
   

source/css/_layout/tag-plugins/mark.styl

@@ -1,5 +1,5 @@
 .md-text .tag-plugin.mark
   padding: 2px
   border-radius: 2px
-  background: var(--theme-bg2)
+  background: var(--theme-block)
   color: var(--text-p0)

source/css/_layout/tag-plugins/note.styl

@@ -2,7 +2,7 @@
   position: relative
   padding: 0.25rem 1rem
   border-radius: $border-block
-  background: var(--theme-bg2)
+  background: var(--theme-block)
   overflow: hidden
   if hexo-config('tag_plugins.note.border') == true
     border: 1px solid var(--theme-border)

source/css/_layout/tag-plugins/okr.styl

@@ -0,0 +1,106 @@
+.md-text .tag-plugin.okr
+  position: relative
+  border-radius: $border-block
+  background: var(--theme-block)
+  border: 1px solid var(--theme-border)
+  if hexo-config('tag_plugins.okr.border') == true
+    border: 1px solid var(--theme-border)
+  overflow: hidden
+  color: var(--text-p1)
+  line-height: 1.5
+  .o
+    .title
+      font-size: $fs-15
+    .note
+      font-size: $fs-14
+      p
+        font-size: $fs-14
+  .kr
+    .title
+      font-size: $fs-14
+    .note
+      font-size: $fs-14
+      p,li,.tag-plugin
+        font-size: $fs-14
+
+  .title
+    font-weight: 600
+    display: block
+  .note
+    font-weight: 400
+    display: block
+    margin-top: 0.5rem
+    >p,>ul
+      margin-top: 0.25rem
+      margin-bottom: 0.25rem
+    >.tag-plugin
+      margin-top: 0.25rem
+      margin-bottom: 0.25rem
+    >*:last-child
+      margin-bottom: 0
+  .status 
+    font-size: $fs-12
+    padding: 2px 4px
+    border-radius: 2px
+  .okr-item.o
+    border-bottom: 4px solid var(--theme-border)
+  .okr-item.kr+.okr-item.kr
+    border-top: 1px dashed var(--theme-border)
+  
+
+.tag-plugin.okr .okr-item
+  display: grid
+  grid-template-columns: 3.2rem auto 100px
+  grid-column-gap: 0.75rem
+  padding: 1rem
+  .okr-left .title
+    background: var(--card)
+    border-radius: 1rem
+    text-align: center
+    padding: 0 0.5rem
+  .labels
+    display: flex
+    justify-content: space-between
+    align-items: flex-start
+    position relative
+    .label
+      background: var(--theme-block)
+      color: var(--text-p1)
+
+  .progress
+    margin-top: 4px
+    height: 4px
+    border-radius: 2px
+    position: relative
+    background: var(--card)
+    .fill
+      position: absolute
+      background: var(--theme)
+      border-radius: 2px
+      top: 0
+      left: 0
+      bottom: 0
+      &:before
+        content: ''
+        position absolute
+        top: -4px
+        bottom: -4px
+        right: -4px
+        width: 8px
+        height: 12px
+        border-radius: 8px
+        background: white
+        box-shadow: $boxshadow-button
+      &:after
+        content: ''
+        position absolute
+        top: -2px
+        bottom: -2px
+        right: -2px
+        width: 4px
+        height: 8px
+        border-radius: 4px
+        background: var(--theme)
+        
+
+