待办事项标签外挂

我认为自己需要一个页面记录自己想要挖的坑做的事，但是hexo渲染markdown checkbox的样式很难看，所以我花一个下午的时间火速摸了个照样很难看的小玩具

使用

• 参数1：事项类型
• 参数2：是否已完成
• 参数3：标题

请按指定关键字及其顺序填参，如果需要未完成、带标题的事项，请至少给参数2填一个空格，具体见示例

示例

已完成的非重要事项

√

{% todo "relax" "complete" %}

已完成的非重要事项

{% endtodo %}

---

一般事项

{% todo "normal" %}

一般事项

{% endtodo %}

---

重要事项

已完成、有标题的重要事项

√

{% todo "important" "complete" "重要事项" %}

已完成、有标题的重要事项

{% endtodo %}

紧急事项

有标题的重要事项

{% todo "urgent" " " "紧急事项" %}

有标题的重要事项

{% endtodo %}

未分类事项

{% todo %}

未分类事项

{% endtodo %}

代码

/**
 * JuicyCafe
 * todo
 * {% todo [level] [solve] [title] %}
 * [content]
 * {% endtodo %}
 */

'use strict'

function todo(args, content) {

  let level = args[0]
  const solve = args[1]
  const title = args[2]

  if (!['relax', 'normal', 'important', 'urgent'].includes(level)) {
    level = 'default'
  }

  let tag
  switch (level) {
    case 'relax':
      tag = '非重要事项'
      break
    case 'normal':
      tag = '一般事项'
      break
    case 'important':
      tag = '重要事项'
      break
    case 'urgent':
      tag = '紧急事项'
      break
    case 'default':
      tag = '未分类事项'
      break
  }
  let isSolve = solve == 'complete'
  if(isSolve) {
    tag = '已完成事项'
  }

  return `
    <div class="tag_todo ${level}" title="${tag}">
      ${title ? `<div class="title">${title}</div>` : ''}
      <div class="content">
        <p>${content}</p>
        <div class="check">
          ${isSolve? '<div class="checked">√</div>' : ''}
        </div>
      </div>
    </div>
  `
}

hexo.extend.tag.register('todo', todo, { ends: true })

.tag_todo 
  margin 10px auto;
  width: 95%;
  border-radius: 10px;
  padding: 5px 10px;
  transform: scale(1);
  transition: all 0.3s;
  .title 
    font-size: 20px;
  
  .content
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    p 
      font-size: 16px;
      word-wrap: break-word;
      margin: 10px 0 !important;

    .check 
      width: 15px;
      height: 15px;
      border: 1px solid #666;
      border-radius: 3px;
      margin: 10px;
      .checked 
        text-align: center;
        font-size: 20px;
        line-height: 10px;
      
    
    
  &:hover 
    transform: scale(1.02);
    // background-color: rgba(255, 0, 0, .15);
    // border-left-color: rgba(255, 0, 0, .4);

  &.relax
    background-color: rgba(82, 189, 82, 0.1);
    border-left: 10px solid rgba(82, 189, 82, .3);
    &:hover
      background-color: rgba(82, 189, 82, .15);
      border-left-color: rgba(82, 189, 82, .4);

  &.normal
    background-color: rgba(34, 151, 177, 0.1);
    border-left: 10px solid rgba(34, 151, 177, .3);
    &:hover
      background-color: rgba(34, 151, 177, .15);
      border-left-color: rgba(34, 151, 177, .4);
  
  &.important
    background-color: rgba(247, 167, 18, 0.1);
    border-left: 10px solid rgba(247, 167, 18, .3);
    &:hover
      background-color: rgba(247, 167, 18, .15);
      border-left-color: rgba(247, 167, 18, .4);
  
  &.urgent
    background-color: rgba(255, 0, 0, 0.1);
    border-left: 10px solid rgba(255, 0, 0, .3);
    &:hover
      background-color: rgba(255, 0, 0, .15);
      border-left-color: rgba(255, 0, 0, .4);
  
  &.default
    background-color: rgba(127, 127, 127, 0.1);
    border-left: 10px solid rgba(127, 127, 127, .3);
    &:hover
      background-color: rgba(127, 127, 127, .15);
      border-left-color: rgba(127, 127, 127, .4);