search

volantis-x / hexo-theme-volantis

A Wonderful Theme for Hexo.
https://volantis.js.org
MIT License
2.06k stars 599 forks source link

[version: '2.6.6']sidebar控件只显示blogger, category, tagcloud三个 #315

Closed wztlink1013 closed 4 years ago

wztlink1013 commented 4 years ago

自检报告

分类：使用遇到问题（主题未经修改）

第一步

第二步

下载文档源码，然后下载主题源码到 themes/volantis ，执行 npm install 安装依赖包，执行 hexo s 运行，查看结果是否存在相同的问题。

第三步

问题描述

sidebar控件只显示blogger, category, tagcloud三个,像music, grid, qrcode都不能显示

环境信息

hexo: 4.2.0
hexo-cli: 3.1.0
os: Windows_NT 10.0.18363 win32 x64
node: 12.15.0
v8: 7.7.299.13-node.16
uv: 1.33.1
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 72
nghttp2: 1.40.0
napi: 5
llhttp: 2.0.4
http_parser: 2.9.3
openssl: 1.1.1d
cldr: 35.1
icu: 64.2
tz: 2019c
unicode: 12.1

复现地址：

https://www.wztlink1013.com/

截图：

浏览器、操作系统

谷歌版本 81.0.4044.138（正式版本） （64 位）

win10

站点配置文件

# 网页标签ico图标
favicon: https://cdn.jsdelivr.net/gh/wztlink1013/CDN@1.7/ico/amk3n-jn03z-001.ico
# 作者头像
avatar: https://cdn.jsdelivr.net/gh/wztlink1013/figure/blogbase/touxiang.jpg

# 全局导入
import:
  meta:
  - "<meta name='theme-color' content=rgba(0,0,0,0)>"
  - "<meta name='msapplication-TileColor' content='#1BC3FB'>"
  - "<meta name='msapplication-config' content='https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/favicon/favicons/browserconfig.xml'>"
  link:
  - "<link rel='shortcut icon' type='image/x-icon' href='https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/favicon/favicon.ico'>"
  - "<link rel='icon' type='image/x-icon' sizes='32x32' href='https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/favicon/favicons/favicon-32x32.png'>"
  - "<link rel='apple-touch-icon' type='image/png' sizes='180x180' href='https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/favicon/favicons/apple-touch-icon.png'>"
  - "<link rel='mask-icon' color='#1BC3FB' href='https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/favicon/favicons/safari-pinned-tab.svg'>"
  - "<link rel='manifest' href='https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/favicon/favicons/site.webmanifest'>"
  script:

主题配置文件

############################### Layout ###############################
layout:
  # The following can be written in `blog/source/_data/layout.yml`

  # 【主页页面中的5篇文章样式】文章列表（主页、自定义的列表）布局
  on_list:
    # 列表中每一篇文章的meta信息
    meta: [title, author, category, date, wordcount, top]
    # 列表类页面的侧边栏
    sidebar: [blogger, category, tagcloud, music, grid, qrcode]
    # read more button
    readmore: 阅读全文 <i class="fas fa-chevron-right"></i>

  # 页面布局
  on_page:
    # 文章页面主体元素，你也可以在页面的Front-matter中设置
    body: [article, comments]
    # 默认的meta信息，文章中没有配置则按照这里的配置来显示，设置为false则不显示
    # 其中，title只在header中有效，music和thumbnail无需在这里设置，文章中有则显示
    # 如果tags放置在meta.header中，那么在post列表中不显示（因为卡片下方已经有了）
    meta:
      header: [title, author, category, date, top]
      footer: [updated, tags, btns, share]
    # 文章页面的侧边栏
    sidebar: [qrcode, toc, music, grid]

  # 每篇文章布局，参数继承自 on_page
  on_post:
    # 文章页脚，自动在每一篇文章末尾添加
    article_footer: [references, related_repos, copyright, donate]
  # 其他的页面布局暂时等于 on_list

# widget库
widget:
  # The following can be written in `blog/source/_data/widget.yml`
  # ---------------------------------------
  # blogger info widget
  blogger:
    class: blogger
    display: [desktop, mobile] # [desktop, mobile]
    avatar: https://cdn.jsdelivr.net/gh/wztlink1013/figure/blogbase/touxiang.jpg
    shape: rectangle # circle, rectangle
    url: /about/
    title:
    subtitle:
    jinrishici: true # Poetry Today. You can set a string, and it will be displayed when loading fails.
    social: true
  # ---------------------------------------
  # toc widget (valid only in articles)
  toc:
    class: toc
    display: [desktop, mobile] # [desktop, mobile]
    header:
      icon: fas fa-list
      title: 本文目录
    list_number: false
    min_depth: 2
    max_depth: 5
  # ---------------------------------------
  # category widget
  category:
    class: category
    display: [desktop] # [desktop, mobile]
    header:
      icon: fas fa-folder-open
      title: 文章分类
      url: /categories/
  # ---------------------------------------
  # tagcloud widget
  tagcloud:
    class: tagcloud
    display: [desktop, mobile] # [desktop, mobile]
    header:
      icon: fas fa-tags
      title: 热门标签
      url: /tags/
    min_font: 14
    max_font: 24
    color: true
    start_color: '#999'
    end_color: '#555'
  # ---------------------------------------
  # related posts widget
  related_posts:
    class: related_posts # npm i -S hexo-related-popular-posts
    display: [desktop, mobile] # [desktop, mobile]
    header:
      icon: fas fa-bookmark
      title: 相关文章
    max_count: 5
  # ---------------------------------------
  # copyright widget (valid only in articles)
  copyright:
    class: copyright
    display: [desktop, mobile] # [desktop, mobile]
    blockquote: true
    permalink: '本文永久链接是：'
    content:
      - '博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议'
      - permalink
  # ---------------------------------------
  # qrcode widget
  donate:
    class: qrcode
    display: [desktop, mobile] # [desktop, mobile]
    height: 64px  # Automatic height if not set
    fancybox: true
    images:
      - https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/wiki_volantis.png
      - https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/wiki_volantis.png
  # ---------------------------------------
  # references widget
  references:
    class: references # is subclass of list
    display: [desktop, mobile] # [desktop, mobile]
    header:
      icon: fas fa-quote-left
      title: 参考资料
  related_repos:
    class: references # is subclass of list
    display: [desktop, mobile] # [desktop, mobile]
    header:
      icon: fab fa-github
      title: 源码链接

  # You can add your own widget here or 'blog/source/_data/widget.yml'
  # class: text, list, grid, qrcode, page, ... see more at https://volantis.js.org/

更多信息

node.js & npm

node：v12.5.0
npm：6.13.4

package.json

$ npm ls --depth 0
hexo-site@0.0.0 D:\BlogF
+-- hexo@4.2.0
+-- hexo-auto-category@0.2.0
+-- hexo-baidu-url-submit@0.0.6
+-- hexo-blog-encrypt@3.0.12
+-- hexo-deployer-git@2.1.0
+-- hexo-generator-archive@1.0.0
+-- hexo-generator-baidu-sitemap@0.1.6
+-- hexo-generator-category@1.0.0
+-- hexo-generator-index@1.0.0
+-- hexo-generator-json-content@4.1.6
+-- hexo-generator-search@2.4.0
+-- hexo-generator-sitemap@2.0.0
+-- hexo-generator-tag@1.0.0
+-- hexo-git-backup@0.1.3
+-- hexo-helper-live2d@3.1.1
+-- hexo-helper-qrcode@1.0.2
+-- hexo-related-popular-posts@4.0.0
+-- hexo-renderer-ejs@1.0.0
+-- hexo-renderer-less@1.0.0
+-- hexo-renderer-markdown-it@4.0.0
+-- hexo-renderer-pug@1.0.0
+-- hexo-renderer-sass@0.4.0
+-- hexo-renderer-scss@1.2.0
+-- hexo-renderer-stylus@1.1.0
+-- hexo-server@1.0.0
+-- hexo-tag-aplayer@3.0.4
+-- hexo-toc-dllcn@1.1.2
+-- hexo-wordcount@6.0.1
+-- leancloud-storage@4.2.0
+-- live2d-widget-model-haru@1.0.5
+-- live2d-widget-model-haruto@1.0.5
+-- live2d-widget-model-hibiki@1.0.5
+-- live2d-widget-model-unitychan@1.0.5
+-- live2d-widget-model-wanko@1.0.5
+-- live2d-widget-model-z16@1.0.5
`-- valine@1.3.10
xaoxuu commented 4 years ago

layout 里面调用的控件首先得在控件库中存在，不存在的不会显示。

xaoxuu commented 4 years ago

举个例子就好理解了：控件的 class 如同小猫、小狗；控件的 id 就如同它们的名字（小黄、花臂、邻橘）。 layout 可以写作： [小黄, 花臂, 邻橘] 意思就是让这3只宠物按顺序站出来。 那么这3只宠物是什么物种、分别有什么特征呢，那就需要您自己在控件库里面定义了，例如

小黄:
  class: 猫
  ...

如果家里（控件库）没有叫“小黄”的猫咪，那么自然就没办法看到了。

wztlink1013 commented 4 years ago

@xaoxuu 好的，换做donate可以显示，只有blogger, category, tagcloud,donate这四个可以显示吗，新版本提供类似空间有哪些呢

xaoxuu commented 4 years ago

image

wztlink1013 commented 4 years ago

了解了 ！！