hexo-theme-stellar 1.17.1 → 1.18.0

package/_config.yml

@@ -1,6 +1,6 @@
 ######## Stellar info ########
 stellar:
-  version: '1.17.1'
+  version: '1.18.0'
   homepage: 'https://xaoxuu.com/wiki/stellar/'
   repo: 'https://github.com/xaoxuu/hexo-theme-stellar'
   cdn_css: # Use cdn links instead of /css/main.css
@@ -25,10 +25,22 @@ sidebar:
     # about: '[关于](/about/)'
   # Sidebar widgets
   widgets:
-    index: welcome, recent, search, timeline # for home/wiki/categories/tags/archives/404 pages
-    page: welcome, toc # for pages using 'layout:page'
-    post: toc, ghrepo, search, ghissues # for pages using 'layout:post'
+    #### 自动生成的页面 ####
+    # 主页
+    home: search, recent, timeline # for home
+    # 博客索引页
+    blog_index: search_blog, recent, timeline # for categories/tags/archives
+    # 文档索引页
+    wiki_index: search_docs, recent, timeline # for wiki
+    # 其它（404）
+    others: search, recent, timeline # for 404 and ...
+    #### 手动创建的页面 ####
+    # 文章内页
+    post: search_blog, toc, ghrepo, ghissues # for pages using 'layout:post'
+    # 文档内页
     wiki: search, ghrepo, toc, ghissues, related # for pages using 'layout:wiki'
+    # 其它 layout:page 的页面
+    page: toc, search # for custom pages using 'layout:page'
 
 ######## Index ########
 post-index: # 近期发布 分类 标签 归档 and ...
@@ -63,10 +75,11 @@ article:
 
 search:
   service: local_search # local_search, todo...
-  local_search:
+  local_search: # 在 front-matter 中设置 indexing:false 来避免被搜索索引
     field: all # post, page, all
-    path: /search.json
-    content: true
+    path: /search.json # 搜索文件存放位置
+    content: true # 是否搜索内容
+    codeblock: true # 是否搜索代码块（需要content: true)
   
 
 ######## Comments ########
@@ -230,6 +243,9 @@ tag_plugins:
   # {% mark %}
   mark:
     default_color: dark # light, dark, red, orange, yellow, green, cyan, blue, purple, warning, error
+  # {% tag %}
+  tag:
+    default_color: yellow # red, orange, yellow, green, cyan, blue, purple
 
 
 ######## JS Plugins ########
@@ -246,6 +262,7 @@ plugins:
     timeline: /js/plugins/timeline.js
     linkcard: /js/plugins/linkcard.js
     fcircle: /js/plugins/fcircle.js
+    weibo: /js/plugins/weibo.js
 
   marked: https://cdn.bootcdn.net/ajax/libs/marked/4.0.18/marked.min.js
   
@@ -325,27 +342,17 @@ style:
     code: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'
   text-align: left
   color:
-    common:
-      theme: '#1BCDFC' # 主题色
-      accent: '#ff5722' # 强调色
-      link: '#2196f3' # 超链接颜色
-      button: '#1BCDFC' # 按钮颜色
-      hover: '#ff5722' # 按钮高亮颜色
-    light:
-      background: '#F8F9FA' # 浅色背景颜色
-      block: '#F0F1F2' # 块背景颜色
-      card: white # 卡片背景颜色
-      title: '#000' # 标题文本颜色
-      text: '#333' # 正文文本颜色
-      code: '#f33a00' # 行内代码颜色
-    dark:
-      background: '#313438' # 深色背景颜色
-      background-mobile: black # 移动端深色背景（OLED调成纯黑可以省电）
-      block: '#2B2F33' # 块背景颜色
-      card: '#464D57' # 卡片背景颜色
-      title: '#fff' # 标题文本颜色
-      text: '#eee' # 正文文本颜色
-      code: '#ff7043' # 行内代码颜色
+    # 动态颜色（会根据明暗主题重设明度值，只用关心色相和饱和度即可）
+    background: 'hsl(212 16% 98%)' # 浅色背景颜色
+    block: 'hsl(212 8% 95%)' # 块背景颜色
+    code: 'hsl(14 100% 48%)' # 行内代码颜色
+    text: 'hsl(0 0% 20%)' # 文本颜色
+    # 主题色配置（不会根据明暗动态调整，请设置为通用的颜色）
+    theme: 'hsl(192 98% 55%)' # 主题色
+    accent: 'hsl(14 100% 57%)' # 强调色
+    link: 'hsl(207 90% 54%)' # 超链接颜色
+    button: 'hsl(192 98% 55%)' # 按钮颜色
+    hover: 'hsl(14 100% 57%)' # 按钮高亮颜色
   animated_avatar:
     animate: auto # auto, always
     background: https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.2/avatar/round/rainbow64@3x.webp

package/_data/widgets.yml

@@ -5,6 +5,17 @@
 search:
   layout: search
   filter: auto # auto or 'path'
+
+
+search_blog:
+  layout: search
+  filter: /blog/ # auto or 'path'
+  placeholder: 文章搜索
+
+search_docs:
+  layout: search
+  filter: /wiki/ # auto or 'path'
+  placeholder: 文档搜索
   
 ghrepo:
   layout: ghrepo
@@ -33,7 +44,6 @@ toc:
 # github user info
 ghuser:
   layout: ghuser
-  api: https://api.github.com
   username: github # your github login username
   avatar: true # show avatar or not
   menu: true # show menu or not
@@ -52,20 +62,6 @@ tagcloud:
   end_color: # 结束的颜色。您可使用十六进位值（#b700ff），rgba（rgba(183, 0, 255, 1)），hsla（hsla(283, 100%, 50%, 1)）或 颜色关键字。此变量仅在 color 参数开启时才有用。
   show_count: false # 显示每个标签的文章总数
 
-welcome:
-  layout: markdown
-  title: Stellar 入门指南
-  content: | # support markdown
-    欢迎使用 [Stellar](https://github.com/xaoxuu/hexo-theme-stellar/) 主题，下面是您的入门指南，祝您使用愉快！
-    <br>
-    **第一步**
-    创建 `blog/_config.stellar.yml` 文件，在此文件中填写需要自定义的主题配置。
-    <br>
-    **第二步**
-    创建 `blog/source/_data/widgets.yml` 文件，此文件中填写需要自定义的侧边栏组件，例如 `welcome` 组件。
-    <br>
-    如果有任何疑问，请先查阅 [文档](https://xaoxuu.com/wiki/stellar/)，如果文档中没有提供，请提 [issue](https://github.com/xaoxuu/hexo-theme-stellar/issues/) 向开发中询问。
-
 timeline:
   layout: timeline
   title: 近期动态

package/layout/_partial/sidebar/header.ejs

@@ -10,10 +10,10 @@ function layoutTitle(main, url, sub) {
   if (sub) {
     let arr = sub.split('|');
     if (arr.length > 1) {
-      el += '<div class="sub normal cap">' + arr[0].trim() + '</div>';
-      el += '<div class="sub hover cap" style="opacity:0">' + arr[1].trim() + '</div>';
-    } else if (arr.length > 0) {
-      el += '<div class="sub cap">' + arr[0] + '</div>';
+      el += '<div class="sub normal cap">' + arr.shift().trim() + '</div>';
+      el += '<div class="sub hover cap" style="opacity:0">' + arr.join('|') + '</div>';
+    } else {
+      el += '<div class="sub cap">' + sub + '</div>';
     }
   }
   el += '</a>';

package/layout/_partial/sidebar/index.ejs

@@ -14,8 +14,14 @@ if (page.sidebar == undefined) {
     } else {
       page.sidebar = theme.sidebar.widgets.wiki;
     }
-  } else if (is_home() || ['categories', 'tags', 'archives', 'index', '404', undefined].includes(page.layout)) {
-    page.sidebar = theme.sidebar.widgets.index;
+  } else if (is_home()) {
+    page.sidebar = theme.sidebar.widgets.home;
+  } else if (is_category() || is_tag() || is_archive() || ['categories', 'tags', 'archives'].includes(page.layout)) {
+    page.sidebar = theme.sidebar.widgets.blog_index;
+  } else if (['wiki_index'].includes(page.layout)) {
+    page.sidebar = theme.sidebar.widgets.wiki_index;
+  } else if (['404', undefined].includes(page.layout)) {
+    page.sidebar = theme.sidebar.widgets.others;
   } else if (page.layout == 'page') {
     page.sidebar = theme.sidebar.widgets.page;
   } else {
@@ -34,10 +40,10 @@ function layoutTitle(main, url, sub) {
   if (sub) {
     let arr = sub.split('|');
     if (arr.length > 1) {
-      el += '<div class="sub normal cap">' + arr[0].trim() + '</div>';
-      el += '<div class="sub hover cap" style="opacity:0">' + arr[1].trim() + '</div>';
-    } else if (arr.length > 0) {
-      el += '<div class="sub cap">' + arr[0] + '</div>';
+      el += '<div class="sub normal cap">' + arr.shift().trim() + '</div>';
+      el += '<div class="sub hover cap" style="opacity:0">' + arr.join('|') + '</div>';
+    } else {
+      el += '<div class="sub cap">' + sub + '</div>';
     }
   }
   el += '</a>';
@@ -83,7 +89,7 @@ function layoutWidgets() {
       if (name in theme.data.widgets) {
         Object.assign(widget, theme.data.widgets[name])
       }
-      if (typeof w == 'object' && w.override) {
+      if (typeof w == 'object' && (w.override || w.layout)) {
         Object.assign(widget, w)
       }
       if (widget && widget.layout) {

package/layout/_partial/widgets/search.ejs

@@ -5,20 +5,29 @@ function layoutDiv() {
   el += '<div class="search-wrapper" id="search">'
   el += '<form class="search-form">'
   var filter = ''
-  if (item.filter == 'auto' && page.layout == 'wiki') {
-    let matches = page.path.match(/(.*?)\/(.*?)\//i)
-    if (matches?.length > 0) {
-      filter = matches[0]
+  if (item.filter == 'auto') {
+    if (page.layout == 'wiki') {
+      let matches = page.path.match(/(.*?)\/(.*?)\//i)
+      if (matches?.length > 0) {
+        filter = matches[0]
+      }
+    }
+  } else {
+    if (item.filter?.length > 0) {
+      filter = item.filter
     }
   }
   el += '<input type="text" class="search-input" id="search-input"'
   if (filter.length > 0) {
-    filter = '/' + filter
+    if (!filter.startsWith('/')) {
+      filter = '/' + filter
+    }
     el += ' data-filter="' + filter + '"'
     el += ' placeholder="' + (item.placeholder || __('search.search_in', filter)) + '">'
   } else {
     el += ' placeholder="' + (item.placeholder || __('search.search')) + '">'
   }
+  el += '<svg t="1670596976048" class="icon search-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2676" width="200" height="200"><path d="M938.2 832.6L723.8 618.1c-2.5-2.5-5.3-4.4-7.9-6.4 36.2-55.6 57.3-121.8 57.3-193.1C773.3 222.8 614.6 64 418.7 64S64 222.8 64 418.6c0 195.9 158.8 354.6 354.6 354.6 71.3 0 137.5-21.2 193.2-57.4 2 2.7 3.9 5.4 6.3 7.8L832.5 938c14.6 14.6 33.7 21.9 52.8 21.9 19.1 0 38.2-7.3 52.8-21.8 29.2-29.1 29.2-76.4 0.1-105.5M418.7 661.3C284.9 661.3 176 552.4 176 418.6 176 284.9 284.9 176 418.7 176c133.8 0 242.6 108.9 242.6 242.7 0 133.7-108.9 242.6-242.6 242.6" p-id="2677"></path></svg>'
   el += '</form>'
   el += '<div id="search-result"></div>'
   el += '<div class="search-no-result">' + __('search.no_results') + '</div>'

package/layout/index.ejs

@@ -1,6 +1,6 @@
 <%
 if (page.menu_id == undefined) {
-  if (page.layout === 'index' && page.wiki) {
+  if (page.layout === 'wiki_index' && page.wiki) {
     page.menu_id = 'wiki';
   } else {
     page.menu_id = 'post';

package/layout/wiki.ejs

@@ -3,7 +3,7 @@ if (page.menu_id == undefined) {
   page.menu_id = 'wiki';
 }
 if (page.layout == undefined) {
-  page.layout = 'index';
+  page.layout = 'wiki_index';
 }
 if (page.title == undefined) {
   if (page.tagName) {
@@ -21,7 +21,7 @@ function layoutTitle() {
   }
 }
 %>
-<% if (page.layout === 'index') { %>
+<% if (page.layout === 'wiki_index') { %>
   <%- partial('index') %>
 <% } else { %>
   <%

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-stellar",
-  "version": "1.17.1",
+  "version": "1.18.0",
   "description": "Elegant and powerful theme for Hexo.",
   "main": "package.json",
   "scripts": {

package/scripts/generators/search.js

@@ -3,101 +3,107 @@
  */
 
 hexo.extend.generator.register('search_json_generator', function (locals) {
-  if (this.theme.config.search.service != 'local_search') {
-    return {}
-  }
-  var config = this.config
-  const { local_search } = this.theme.config.search
-
-  var searchfield = local_search.field
-  var content = local_search.content
+  if (this.theme.config.search.service != 'local_search') { return {} }
+  const { root } = this.config
+  const { local_search: cfg } = this.theme.config.search
+  cfg.sort = '-date'
+  cfg.field = cfg.field?.trim()
 
   var posts, pages
+  if (cfg.field == 'post') {
+    posts = locals.posts?.filter(p => p.content?.length > 0).sort(cfg.sort)
+  } else if (cfg.field == 'page') {
+    pages = locals.pages?.filter(p => p.content?.length > 0)
+  } else {
+    posts = locals.posts?.filter(p => p.content?.length > 0).sort(cfg.sort)
+    pages = locals.pages?.filter(p => p.content?.length > 0)
+  }
+
+  var res = new Array()
 
-  if (searchfield.trim() != '') {
-      searchfield = searchfield.trim()
-      if (searchfield == 'post'){
-          posts = locals.posts.sort('-date')
-      } else if (searchfield == 'page') {
-          pages = locals.pages
-      } else {
-          posts = locals.posts.sort('-date')
-          pages = locals.pages
+  function generateJson(post) {
+    var temp_post = new Object()
+    if (post.title) {
+      temp_post.title = post.title.trim()
+    }
+    if (post.path) {
+      temp_post.path = root + post.path
+    }
+    if (cfg.content != false && post._content) {
+      var content = post._content.trim()
+      // 过滤掉标签和注释
+      if (content.includes('{%')) {
+        // 需要保留内容的的标签
+        content = content.replace(/{%\s*mark\s*(.*?)\s*%}/g, '$1')
+        content = content.replace(/{%\s*folding\s*(.*?)\s*%}/g, '$1')
+        content = content.replace(/{%\s*copy\s*(.*?)\s*%}/g, '$1')
+        content = content.replace(/{%\s*note\s*(.*?)\s*%}/g, '$1')
+        content = content.replace(/{%\s*kbd\s*(.*?)\s*%}/g, '$1')
+        content = content.replace(/{%\s*emp\s*(.*?)\s*%}/g, '$1')
+        content = content.replace(/{%\s*wavy\s*(.*?)\s*%}/g, '$1')
+        content = content.replace(/{%\s*sub\s*(.*?)\s*%}/g, '$1')
+        content = content.replace(/{%\s*sup\s*(.*?)\s*%}/g, '$1')
+        content = content.replace(/<!--\s*folder(.*?)\s*-->/g, '$1')
+        content = content.replace(/<!--\s*tab(.*?)\s*-->/g, '$1')
+        content = content.replace(/<!--\s*node(.*?)\s*-->/g, '$1')
+        // 不保留内容的标签
+        content = content.replace(/{%\s*(.*?)\s*%}/g, '')
+        // 注释
+        content = content.replace(/<!--\s*(.*?)\s*-->/g, '')
+        // ## 标题
+        content = content.replace(/[#]{2,} /g, '')
+        // 部分HTML标签
+        content = content.replace(/<iframe[\s|\S]+iframe>/g, '')
+        content = content.replace(/<hr>/g, '')
+        content = content.replace(/<br>/g, '')
+        // 图片
+        content = content.replace(/\!\[(.*?)\]\((.*?)\)/g, '')
+        // 链接
+        content = content.replace(/\[(.*?)\]\((.*?)\)/g, '$1')
+        // 过滤代码块
+        if (cfg.codeblock == false) {
+          content = content.replace(/```([^`]+)```/g, '')
+        }
+        // 多个连续空格换成单个空格
+        content = content.replace(/[\s]{2,} /g, ' ')
+        // 特殊字符
+        content = content.replace(/[\r|\n]+/g, '')
       }
-  } else {
-      posts = locals.posts.sort('-date')
+      temp_post.content = content.trim()
+    }
+    if (post.tags && post.tags.length > 0) {
+      var tags = []
+      post.tags.forEach(function (tag) {
+        tags.push(tag.name)
+      })
+      temp_post.tags = tags
+    }
+    if (post.categories && post.categories.length > 0) {
+      var categories = []
+      post.categories.forEach(function (cate) {
+        categories.push(cate.name)
+      })
+      temp_post.categories = categories
+    }
+    return temp_post
   }
 
-  var res = new Array() 
-  var index = 0
-  
-  if (posts) {     
-      posts.each(function(post) {
-          if (post.indexing != undefined && !post.indexing) return
-          var temp_post = new Object() 
-          if (post.title) { 
-              temp_post.title = post.title 
-          }
-          if (post.path) { 
-              temp_post.url = config.root + post.path 
-          } 
-          if (content != false && post._content) { 
-              temp_post.content = post._content 
-          } 
-          if (post.tags && post.tags.length > 0) { 
-              var tags = []
-              post.tags.forEach(function (tag) {
-                  tags.push(tag.name)
-              }) 
-              temp_post.tags = tags 
-          } 
-          if (post.categories && post.categories.length > 0) { 
-              var categories = []
-              post.categories.forEach(function (cate) {
-                  categories.push(cate.name)
-              }) 
-              temp_post.categories = categories 
-          } 
-          res[index] = temp_post  
-          index += 1 
+  if (posts) {
+    posts.each(function(post) {
+      if (post.indexing == false) return
+      let temp_post = generateJson(post)
+      res.push(temp_post)
     }) 
   } 
-  if (pages) { 
-      pages.each(function(page) {
-          if (page.indexing != undefined && !page.indexing) return
-          var temp_page = new Object() 
-          if (page.title) { 
-              temp_page.title = page.title 
-          } 
-          if (page.path) { 
-              temp_page.url = config.root + page.path 
-          } 
-          if (content != false && page._content) { 
-              temp_page.content = page._content 
-          } 
-          if (page.tags && page.tags.length > 0) { 
-              var tags = new Array() 
-              var tag_index = 0 
-              page.tags.each(function (tag) {
-                  tags[tag_index] = tag.name 
-              }) 
-              temp_page.tags = tags 
-          } 
-          if (page.categories && page.categories.length > 0) {
-              temp_page.categories = []
-              (page.categories.each || page.categories.forEach)(function (item) {
-                  temp_page.categories.push(item)
-              })
-          } 
-          res[index] = temp_page  
-          index += 1 
-      }) 
-  } 
-
-  var json = JSON.stringify(res)
-
+  if (pages) {
+    pages.each(function(page) {
+      if (page.indexing == false) return
+      let temp_post = generateJson(page)
+      res.push(temp_post)
+    })
+  }
   return {
-      path: local_search.path,
-      data: json
+    path: cfg.path,
+    data: JSON.stringify(res)
   }
 })

package/scripts/tags/{border.js → ablock.js}

@@ -1,23 +1,21 @@
 /**
- * border.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * ablock.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
- * {% border [color:color] [child:codeblock/tabs] title %}
+ * {% ablock [color:color] [child:codeblock/tabs] title %}
  * body
- * {% endborder %}
+ * {% endablock %}
  */
 
 'use strict';
 
-hexo.extend.tag.register('border', function(args, content) {
+hexo.extend.tag.register('ablock', function(args, content) {
   args = hexo.args.map(args, ['color', 'child'], ['title']);
-  const color = args.color;
-  const title = args.title;
-  var el = '';
-  const defaultColor = hexo.theme.config.tag_plugins.note.default_color;
-  if (!color && defaultColor) {
-    color = defaultColor;
+  const { title } = args;
+  if (args.color == null) {
+    args.color = hexo.theme.config.tag_plugins.note.default_color
   }
+  var el = '';
   // header
   el += '<div class="tag-plugin note"';
   el += ' ' + hexo.args.joinTags(args, ['color', 'child']).join(' ');

package/scripts/tags/{split.js → grid.js}

@@ -1,21 +1,21 @@
 /**
- * split.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * grid.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
- * {% split [style:block/card] %}
+ * {% grid [style:block/card] %}
  * <!-- cell left -->
  * left body
  * <!-- cell right -->
  * right body
- * {% endsplit %}
+ * {% endgrid %}
  */
 
 'use strict';
 
-hexo.extend.tag.register('split', function(args, content) {
+hexo.extend.tag.register('grid', function(args, content) {
   args = hexo.args.map(args, ['bg']);
   var el = '';
-  el += '<div class="tag-plugin split"';
+  el += '<div class="tag-plugin grid"';
   el += ' ' + hexo.args.joinTags(args, ['bg']).join(' ');
   el += '>';
   

package/scripts/tags/note.js

@@ -13,20 +13,18 @@ hexo.extend.tag.register('note', function(args) {
     args.content = args.title;
     args.title = '';
   }
-  const color = args.color;
-  const title = args.title;
-  var el = '';
-  const defaultColor = hexo.theme.config.tag_plugins.note.default_color;
-  if (!color && defaultColor) {
-    color = defaultColor;
+  const { title } = args;
+  if (args.color == null) {
+    args.color = hexo.theme.config.tag_plugins.note.default_color
   }
+  var el = '';
   // header
   el += '<div class="tag-plugin note"';
   el += ' ' + hexo.args.joinTags(args, ['color', 'child']).join(' ');
   el += '>';
   // title
   if (title && title.length > 0) {
-    el += '<div class="title"><strong>' + title + '</strong></div>';
+    el += '<div class="title">' + title + '</div>';
   }
   // content
   el += '<div class="body">';

package/scripts/tags/poetry.js

@@ -3,7 +3,7 @@
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
  * poetry:
- * {% poetry [align:center] [title] [author:作者] [date:日期] [footer:footer] %}
+ * {% poetry [title] [author:作者] [date:日期] [footer:footer] %}
  * body
  * {% endpoetry %}
  *
@@ -13,13 +13,11 @@
 
 hexo.extend.tag.register('poetry', function(args, content) {
   var el = '';
-  args = hexo.args.map(args, ['author', 'date', 'align', 'footer'], ['title']);
+  args = hexo.args.map(args, ['author', 'date', 'footer'], ['title']);
 
   el += '<div class="tag-plugin poetry"';
-  if (args.align) {
-    el += ' align="' + args.align + '"';
-  }
   el += '>';
+  el += '<div class="content">'
   if (args.title) {
     el += '<div class="title">';
     el += args.title;
@@ -43,6 +41,7 @@ hexo.extend.tag.register('poetry', function(args, content) {
     el += args.footer;
     el += '</div>';
   }
+  el += '</div>'
   el += '</div>';
   return el;
 }, {ends: true});

package/scripts/tags/quot.js

@@ -1,9 +1,9 @@
 /**
- * quot.js v1.1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * quot.js v1.2 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
  * quot:
- * {% quot [el:h1] [icon:default] text %}
+ * {% quot [el:h2] [icon:default] text %}
  *
  */
 
@@ -38,14 +38,18 @@ hexo.extend.tag.register('quot', function(args) {
     return el;
   }
   if (args.el.includes('h')) {
-    el += '<' + args.el + ' class="tag-plugin quot"' + type + ' id="' + args.text + '">';
+    el += '<div' + ' class="tag-plugin quot">'
+    el += '<' + args.el + ' class="content" id="' + args.text + '"' + type + '>';
     el += '<a href="#' + args.text + '" class="headerlink" title="' + args.text + '"></a>';
     el += content();
     el += '</' + args.el + '>';
+    el += '</div>'
   } else {
-    el += '<' + args.el + ' class="tag-plugin quot"' + type + '>';
+    el += '<div' + ' class="tag-plugin quot">'
+    el += '<' + args.el + ' class="content"' + type + '>';
     el += content();
     el += '</' + args.el + '>';
+    el += '</div>'
   }
   return el;
 });