search

volantis-x / hexo-theme-volantis

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

Material-X CDN问题[BUG] #137

Closed Reqwey closed 4 years ago

Reqwey commented 4 years ago

描述

我刚更新了Material-X V1.5

然后我发现CDN关不了了, 尤其是style.css, 我想用自己的style, 然后把主题config中的style: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@20.2.22/css/style.css注释掉了

然后就会发现网站变得奇奇怪怪的(就是网页的CSS没有加载出来那个样)

如果把use_cdn关掉也是这个样

所以只好原封不动地用您的默认主题样式

重现

网址：blog.lhkstudio.me 截图：

环境

Hexo版本：4.2.0 package.json文件：

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": "4.2.0"
  },
  "dependencies": {
    "hexo": "^4.0.0",
    "hexo-algolia": "^1.3.1",
    "hexo-deployer-git": "^2.1.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-index": "^1.0.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-helper-qrcode": "^1.0.2",
    "hexo-related-popular-posts": "^4.0.0",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-marked": "^2.0.0",
    "hexo-renderer-stylus": "^1.1.0",
    "hexo-server": "^1.0.0",
    "hexo-wordcount": "^6.0.1"
  }
}

根目录的_config.yml文件：（敏感数据请替换为****）

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: "LHK's Blog"
subtitle: 'Code for the future'
description: "Based on GitHub Pages"
keywords: IT, OI
author: Linhk1606
language: zh-CN
timezone: ''

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://blog.lhkstudio.me
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## Use post's date for updated date unless set in front-matter
use_date_for_updated: false

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: material-x
use_cdn: true

import:
  meta:
  - "<meta name='theme-color' content='#FFFFFF'>"
  - "<meta name='msapplication-TileColor' content='#1BC3FB'>"
  - "<meta name='msapplication-config' content='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-favicon@19.9.6/browserconfig.xml'>"
  link:
  - "<link rel='shortcut icon' type='image/x-icon' href='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-favicon@19.9.6/favicon.ico'>"
  - "<link rel='icon' type='image/x-icon' sizes='32x32' href='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-favicon@19.9.6/favicon-32x32.png'>"
  - "<link rel='apple-touch-icon' type='image/png' sizes='180x180' href='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-favicon@19.9.6/apple-touch-icon.png'>"
  - "<link rel='mask-icon' color='#1BC3FB' href='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-favicon@19.9.6/safari-pinned-tab.svg'>"
  - "<link rel='manifest' href='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-favicon@19.9.6/site.webmanifest'>"

copyright: '[Copyright © 2019-2020 Linhk1606](https://www.lhkstudio.me)'

# valine
leancloud:
  app_id: *****
  app_key: *****

#search
algolia:
  applicationID: '*****'
  apiKey: '*****'
  indexName: '*******'

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/Linhk1606/Linhk1606.github.io.git
  branch: master

主题的_config.yml文件：

############################### 主题基本信息 ###############################
info:
  name: Material X
  version: 1.5
  docs: https://xaoxuu.com/wiki/material-x/
  cdn: # 要使用CDN，请在根目录的config文件中写上 use_cdn: true
    css:
      style: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@20.2.22/css/style.css
    js:
      app: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@20.2/js/app.js
      search: https://cdn.jsdelivr.net/gh/inkss/common@1.1/hexo/js/search.min.js
      volantis: https://cdn.jsdelivr.net/gh/xaoxuu/volantis@1.0.6/js/volantis.min.js
      backstretch: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@20.2/js/backstretch.min.js
      commentTyping: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@20.2/js/commentTyping.js

############################### 服务开关 ###############################
scrollreveal: true  # 页面滚动显示动画
nodewaves: true     # 按钮点击效果
busuanzi: true      # 访问量统计
# fastclick: true
commentTyping: true # 文本框打字机特效
# wordcount: true   # 文章字数统计、阅读时长，开启需要安装插件: npm i --save hexo-wordcount
############################### 主题样式 ###############################
# 样式
style:
  # 卡片阴影效果
  shadow:
    # 导航栏阴影
    nav: true
    # 卡片阴影和悬浮动画
    # card: true
  # 毛玻璃效果 具体效果调整在： source/less/_color.less
  blur:
    navbar: true
    widget: true
    body: true
# 建议：
#   有背景图：开启毛玻璃，关闭卡片阴影
#   无背景图：关闭毛玻璃，开启卡片阴影

# 幻灯片背景
backstretch:
  position: background  # cover: 封面背景   background: 整个网页背景
  duration: 6000        # 持续时间（毫秒）
  fade: 2500            # 渐变（毫秒）
  images:
    - https://i.loli.net/2020/02/08/HNuVoted2mUxILl.jpg
    - https://i.loli.net/2020/02/08/dNJyR4LHtarTqPu.jpg
    - https://i.loli.net/2020/02/08/yXx4GwgZYdi81Qs.jpg
    - https://i.loli.net/2020/02/08/RP7JpGvWaCYfuB6.jpg

############################### 自定义 ###############################
# page的封面
cover:
  scheme: search    # 后期将会提供多种封面布局方案
  height: half      # full（默认值）: 首页封面占据整个第一屏幕，其他页面占半个屏幕高度， half: 所有页面都封面都只占半个屏幕高度
  title: L|I|N|H|K
  # logo: assets/logo.png    # logo和title只显示一个，若同时设置，则只显示logo
  search: 'Linhk1606 First Search'
  # color: '#FFF' # 菜单文字颜色
  # 主页封面菜单
  features:
    - name: 博文
      icon: fas fa-rss
      url: /
    - name: 关于
      icon: fas fa-info-circle
      url: about/
      rel: nofollow
    - name: 分类
      icon: fas fa-folder-open
      url: categories/
      rel: nofollow
    - name: 标签
      icon: fas fa-hashtag
      url: tags/
      rel: nofollow
    - name: 归档
      icon: fas fa-archive
      url: archives/
      rel: nofollow

# 导航栏
navbar:
  # 左侧logo区
  logo:
    # 显示图片，使用图片时将不会显示icon和title
    img: # https://cdn.jsdelivr.net/gh/xaoxuu/cdn-favicon@19.9.7/apple-touch-icon.png
    # 显示图标
    icon: fas fa-home
    # 显示标题
    title: LINHK
  # logo后面的导航菜单
  menu:
    # 在桌面端显示的导航菜单
    on_desktop:
      - name: 近期
        icon: fas fa-hourglass-half
        url: /
        target: _self
      - name: 欢迎页
        icon: fas fa-play-circle
        url: https://www.lhkstudio.me
        target: _self
      - name: 友链
        icon: fas fa-link
        url: friends/
        rel: nofollow
        target: self
      - name: 代码
        icon: fas fa-code-branch
        url: codetmp/
        rel: nofollow
    # 手机端导航菜单（从右上角的按钮点击展开）
    on_mobile:
      - name: 近期文章
        icon: fas fa-clock
        url: /
      - name: 欢迎页
        icon: fas fa-play-circle
        url: https://www.lhkstudio.me
      - name: 文章归档
        icon: fas fa-archive
        url: archives/
        rel: nofollow
      - name: 友链
        icon: fas fa-link
        url: friends/
        rel: nofollow
      - name: 分类
        icon: fas fa-folder-open
        url: categories/
        rel: nofollow
      - name: 标签
        icon: fas fa-hashtag
        url: tags/
        rel: nofollow
      - name: 关于
        icon: fas fa-info-circle
        url: about/
        rel: nofollow
      - name: 代码缓存
        icon: fas fa-code-branch
        url: codetmp/
        rel: nofollow
  search: Search IT!   # 搜索框文字

# 布局
layout:
  # 多列布局
  multiple_columns: false # 部分浏览器不兼容，谨慎使用
  # 文章列表（主页、自定义的列表）布局
  on_list:
    # 列表中每一篇文章的meta信息
    meta: [title, author, date, category, wordcount, top]
    # 列表类页面的侧边栏
    sidebar: [blogger, dao_hang, category, tagcloud, tui_jian]
  # 文章页面布局
  on_page:
    # 文章页面主体元素，你也可以在页面的Front-matter中设置
    body: [article, comments]
    # 默认的meta信息，文章中没有配置则按照这里的配置来显示，设置为false则不显示
    # 其中，title只在header中有效，music和thumbnail无需在这里设置，文章中有则显示
    # 如果tags放置在meta.header中，那么在post列表中不显示（因为卡片下方已经有了）
    meta:
      header: [title, author, category, date, updated, counter, wordcount, top]
      footer: [tags, links, share]
    # 文章页脚，自动在每一篇文章末尾添加
    footer: [copyright]
    # 文章页面的侧边栏
    sidebar: [blogger, toc, category, tagcloud]
  # 其他的页面布局暂时等于文章列表

# meta库配置
meta:
  # 文章标题
  title: # 暂无配置
  # 文章作者
  author:
    icon: fas fa-user # 如果配置了头像，则不会显示图标
  # 文章创建日期
  date:
    icon: fas fa-edit
    title: '发布于：'
    format: 'll' # 日期格式 http://momentjs.com/docs/
  # 文章更新日期
  updated:
    icon: fas fa-save
    title: '更新于：'
    format: 'll' # 日期格式 http://momentjs.com/docs/
  # 文章分类
  category:
    icon: fas fa-folder-open
  # 文章置顶
  top:
    icon: fas fa-angle-double-up
  # 文章浏览计数
  counter:
    icon: fas fa-eye
  # 文章字数和阅读时长
  wordcount:
    icon_wordcount: fas fa-keyboard
    icon_duration: fas fa-hourglass-half
  # 文章标签
  tags:
    icon: fas fa-tag
  # 分享
  share:
    - id: qq
      name: QQ好友
      img: https://cdn.jsdelivr.net/gh/xaoxuu/assets@19.1.9/logo/128/qq.png
    - id: qzone
      name: QQ空间
      img: https://cdn.jsdelivr.net/gh/xaoxuu/assets@19.1.9/logo/128/qzone.png
    # - id: qrcode # 当id为qrcode时需要安装插件  npm i -S hexo-helper-qrcode
    #   name: 微信
    #   img: https://cdn.jsdelivr.net/gh/xaoxuu/assets@19.1.9/logo/128/wechat.png
    - id: weibo
      name: 微博
      img: https://cdn.jsdelivr.net/gh/xaoxuu/assets@19.1.9/logo/128/weibo.png
    # - id: qrcode # 当id为qrcode时需要安装插件  npm i -S hexo-helper-qrcode
    #   name: QRcode
    #   img: https://cdn.jsdelivr.net/gh/xaoxuu/assets@19.1.9/logo/128/qrcode.png
  # 链接
  links:
    repo: # 源码链接
      icon: fas fa-code-branch
      title: 源码
      color: '#508EF2'
    bug: # BUG反馈链接
      icon: fas fa-bug
      title: BUG
      color: '#FE5F58'
    doubt: # 疑问链接
      icon: fas fa-question-circle
      title: 疑问
      color: '#FFBD2B'
    idea: # 建议链接
      icon: fas fa-lightbulb
      title: 建议
      color: '#3DC550'
    faq: # FAQ链接
      icon: fas fa-comments
      title: FAQ
      color: '#29B1C9'
    feedback: # 反馈链接
      icon: fas fa-comment-dots
      title: 反馈
      color: '#1BCDFC'

# 组件库配置
widget:
  # ---------------------------------------
  # 博主信息小部件配置
  - id: blogger
    class: blogger
    avatar: https://cdn.jsdelivr.net/gh/Linhk1606/Linhk1606@V1.9/me.jpg
    # title:  标题
    # subtitle: 副标题
    jinrishici: true # 今日诗词。可以设置字符串，加载失败时会显示占位字符串。
    social: true
  # ---------------------------------------
  # 目录小部件配置(仅在文章中有效)
  - id: toc
    class: toc
    icon: fas fa-list
    title: 本文目录
    list_number: true # 是否显示章节
    min_depth: 2 # H1建议用作网页或者文章的标题，章节从H2开始。
    max_depth: 5 # 由于宽度有限，主题没有针对所有层级进行布局优化，建议文章最多分为：H2/H3/H4/H5四个层级
  # ---------------------------------------
  # 文章分类小部件配置
  - id: category
    class: category
    icon: fas fa-folder-open
    title: 文章分类
    more: # 右上角的按钮
      icon: fas fa-expand-arrows-alt
      url: categories/
      rel: external nofollow noopener noreferrer
      target: _self
  # ---------------------------------------
  # 标签云小部件配置
  - id: tagcloud
    class: tagcloud
    icon: fas fa-tags
    title: 热门标签
    more: # 右上角的按钮
      icon: fas fa-expand-arrows-alt
      url: tags/
      rel: external nofollow noopener noreferrer
      target: _self
    min_font: 14
    max_font: 24
    color: true
    start_color: '#999'
    end_color: '#555'
  # ---------------------------------------
  # 相关文章小部件配置
  - id: related_posts
    class: related_posts # 需要安装插件  npm i -S hexo-related-popular-posts
    icon: fas fa-bookmark
    title: 相关文章
  # ---------------------------------------
  # 版权说明小部件（仅用于文章中）
  - id: copyright
    class: copyright
    blockquote: true # 是否把内容放到blockquote中
    permalink: '本文永久链接是：' # 显示文章永久链接
    content:
      - '博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议'
      - ''
      - permalink
  # ---------------------------------------
  # 自定义组件，仿照如下写法
  - id: dao_hang
    class: grid
    icon: fas fa-map-signs
    title: 站内导航
    rows:
      - name: 近期文章
        icon: fas fa-clock
        url: /
      - name: 文章归档
        icon: fas fa-archive
        url: archives/
        rel: external nofollow noopener noreferrer
        target: _self
      - name: 我的友链
        icon: fas fa-link
        url: friends/
        rel: external nofollow noopener noreferrer
        target: _self
      - name: 主题文档
        icon: fas fa-book
        url: https://xaoxuu.com/wiki/material-x/
        rel: external nofollow noopener noreferrer
        target: _blank
      - name: 关于小站
        icon: fas fa-info-circle
        url: about/
        rel: external nofollow noopener noreferrer
        target: _self
  - id: tui_jian
    class: list
    icon: fas fa-code
    title: For OIers
    rows:
      - name: 洛谷
        url: https://www.luogu.com.cn
        rel: external nofollow noopener noreferrer
        target: _blank
      - name: Codeforces
        url: https://codeforces.com
        rel: external nofollow noopener noreferrer
        target: _blank
      - name: OIerDb
        url: bytew.net/OIer/ 
        rel: external nofollow noopener noreferrer
        target: _blank

# 社交信息配置
social:
  - icon: fas fa-rss
    url: atom.xml
  - icon: fas fa-envelope
    url: mailto:Linhk1606@outlook.com
  - icon: fab fa-github
    url: https://github.com/Linhk1606
  - icon: fas fa-headphones-alt
    url: https://music.163.com/#/user/home?id=2113078436
  - icon: fas fa-code
    url: https://www.luogu.com.cn/user/106887

# APlayer配置 https://github.com/metowolf/MetingJS
aplayer:
  # 是否启用，注释此项则不加载服务
  enable: true
  # 必选参数
  server: netease   # netease, tencent, kugou, xiami, baidu
  type: playlist    # song, playlist, album, search, artist
  id: 3194206062    # song id / playlist id / album id / search keyword
  # 可选参数
  fixed: false      # enable fixed mode
  theme: '#1BCDFC'  # main color
  autoplay: true   # audio autoplay
  order: list       # player play order, values: 'list', 'random'
  loop: all         # player loop play, values: 'all', 'one', 'none'
  volume: 0.7       # default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
  list_max_height: 340px # list max height
  list_folded: true

############################### 需要复制到根目录配置文件中 ###############################
# 请复制到根目录配置文件！
# copyright: '[Copyright © 2017-2020 Mr. X](https://xaoxuu.com)'

############################### 评论系统 ###############################
# disqus_shortname: 要使用哪个请复制到根目录配置文件！
# livere_uid: 要使用哪个请复制到根目录配置文件！
# gitalk: 要使用哪个请复制到根目录配置文件！
#   clientID: 你的clientID
#   clientSecret: 你的clientSecret
#   repo: 你的repo名
#   owner: 你的GitHub名
#   admin: [] 至少填写你的GitHub名
# leancloud: 要使用哪个请复制到根目录配置文件！
#   app_id: 你的appId
#   app_key: 你的appKey

############################### 杂项，请勿删除 ###############################
#valine配置
valine:
  enable: true # 如果你想用Valine评论系统，请设置enable为true
  volantis: true # 是否启用volantis版本（禁止匿名，增加若干贴吧、QQ表情）
  # 还需要在根目录配置文件中添加下面这三行内容
  # leancloud:
  #   app_id: 你的appId
  #   app_key: 你的appKey
  guest_info: nick,mail,link #valine comment header info
  placeholder: 快来评论吧~ # valine comment input placeholder(like: Please leave your footprints )
  avatar: mp # gravatar style https://valine.js.org/avatar
  pageSize: 10 # comment list page size
  verify: true # valine verify code (true/false)
  notify: true # valine mail notify (true/false)
  lang: zh-cn
  highlight: true

# 搜索配置
search:
  enable: true
  service: algolia    # 类型：google, algolia, azure, baidu 默认 hexo
# 选择你选取的搜索服务后，复制相应的配置到根目录配置文件中
# google:
#   apiKey:
#   engineId:
# algolia:
#   applicationID:
#   apiKey:
#   indexName:
# azure:
#   serviceName:
#   indexName:
#   queryKey:
# baidu:
#   apiId:

# Less渲染
less:
  compress: true
xaoxuu commented 4 years ago

你看一下这个网页：

https://xaoxuu.com/wiki/volantis/start/

我的站点配置文件中没有use_cdn: true，主题配置文件中没变，就是加载的本地路径中的css

你网页显示错乱是不是本地css文件语法错误导致的？

判断加载的是本地还是CDN你要网页上点击右键，选择【检查】，然后点【网络】选项卡，筛选点【css】刷新一下网页，就可以看到css文件的路径了。

Reqwey commented 4 years ago

@xaoxuu 好的，谢谢，我试试，也请看下我另一个BUG Report

Reqwey commented 4 years ago

hexo server后浏览器显示VM11:1 Refused to apply style from 'http://localhost:4000/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.是什么问题

xaoxuu commented 4 years ago

那么你注释掉 style: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@20.2.22/css/style.css 之后加载的是本地 css 吗？如果是，这就不是BUG，是本地css文件修改错误了。

xaoxuu commented 4 years ago

你先把现在的css部分的修改备份一下，然后取消这些修改，看看完全默认的情况下加载本地css是什么情况。

Reqwey commented 4 years ago

注释完是加载本地的，本地css加载不出来，应该是hexo的原因吧，因为我hexo刚刚升级回来(4.2)可能出了一些问题，待会再测试一下，谢谢您

Reqwey commented 4 years ago

那是不是就不是bug了

xaoxuu commented 4 years ago

我知道哪的问题了，你没有安装less插件。

在文档的第一页【下载与安装】部分

Reqwey commented 4 years ago

哦，谢谢，已解决