YunYouJun / hexo-theme-yun

☁️ A fast & light & lovely theme for Hexo. 一个对可爱自以为是的 Hexo 主题。
https://yun.yunyoujun.cn
MIT License
1.41k stars 170 forks source link

[Usage Problem]全局utils,刚开始进入页面丢失 #279

Closed bigbigDreamer closed 2 years ago

bigbigDreamer commented 2 years ago

您需要提供的内容:

image

我的yun.config

# ---------------
# mode: light | dark | auto | time
mode: auto

# Theme color for customize
# Notice: color value must in double quotes: "#000000"
colors:
  primary: "#2c2017"
  # primary: "#6200ee"
  bg: "#f5f5f5"
  selection_bg: "#8e71c1"
  tag_start_color: "#999999"
  tag_end_color: "#0078E7"
  dark:
    block: "#1b1f2e"
    # block: "#17202A"

# Favicon
# ---------------
favicon: https://bigdreamerblog.oss-cn-beijing.aliyuncs.com/dev-blog/favicon.png

# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------

# Posts / Categories / Tags in sidebar.
sidebar:
  bg_image: https://cdn.jsdelivr.net/gh/YunYouJun/cdn@master/img/bg/alpha-stars-timing-1.webp
  # dark_bg_image: https://cdn.jsdelivr.net/gh/YunYouJun/cdn@master/img/bg/dark-alpha-stars-timing-1.webp
  bg_position: bottom 1rem center
  tagcloud:
    enable: false
    amount: 20

toc:
  list_number: true
  max_depth: 6
  min_depth: 1
  # placeholder: 很遗憾,咱没写啥目录
  collapse: true

# Social Links.
social:
# - name: RSS
#   # set rss in your root config
#   # https://github.com/hexojs/hexo-generator-feed
#   link: /atom.xml # config.feed.path
#   icon: icon-rss-line
#   color: orange
# - name: QQ 群 1050458482
#   # https://isux.tencent.com/wp-content/uploads/2016/05/20160512101222609.pdf
#   link: https://qm.qq.com/cgi-bin/qm/qr?k=kZJzggTTCf4SpvEQ8lXWoi5ZjhAx0ILZ&jump_from=webapi
#   icon: icon-qq-line
#   color: "#12B7F5"
# - name: GitHub
#   link: https://github.com/YunYouJun
#   icon: icon-github-line
#   color: "#6e5494"
# - name: 微博
#   link: https://weibo.com/jizhideyunyoujun
#   icon: icon-weibo-line
#   color: "#E6162D"
# - name: 豆瓣
#   link: https://www.douban.com/people/yunyoujun/
#   icon: icon-douban-line
#   color: "#007722"
# - name: 网易云音乐
#   link: https://music.163.com/#/user/home?id=247102977
#   icon: icon-netease-cloud-music-line
#   color: "#C20C0C"
# - name: 知乎
#   link: https://www.zhihu.com/people/yunyoujun/
#   icon: icon-zhihu-line
#   color: "#0084FF"
# - name: 哔哩哔哩
#   link: https://space.bilibili.com/1579790
#   icon: icon-bilibili-line
#   color: "#FF8EB3"
# - name: 微信公众号
#   link: https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/about/white-qrcode-and-search.jpg
#   icon: icon-wechat-2-line
#   color: "#1AAD19"
# - name: Twitter
#   link: https://twitter.com/YunYouJun
#   icon: icon-twitter-line
#   color: "#1da1f2"
# # - name: Telegram
# #   link: https://t.me/yunyoujun_group
# #   icon: icon-telegram-line
# #   color: "#0088CC"
# - name: Telegram Channel
#   link: https://t.me/elpsycn
#   # icon: icon-telegram-fill
#   icon: icon-telegram-line
#   color: "#0088CC"
# - name: E-Mail
#   link: mailto:me@yunyoujun.cn
#   icon: icon-mail-line
#   color: "#8E71C1"
# - name: Travelling
#   link: https://travellings.link
#   icon: icon-train-line
#   color: black

codeblock:
  copy_btn: true
  prismjs:
    light: default
    dark: tomorrow

# Extra links
pages:
  - name: 我的小伙伴们
    url: /links/
    icon: icon-genderless-line
    color: dodgerblue

# pages
# -------
# friend
anonymous_image: https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/avatar/none.jpg

albums:
  enable: false
  icon: icon-gallery-line

girls:
  enable: false

# Sidebar Avatar
avatar:
  enable: true
  url: /yun.png
  # If true, the avatar would be dispalyed in circle.
  rounded: true
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1
  mickey_mouse: false
  status:
    enable: false
    emoji: 😊
    message: 永远相信美好的事情即将发生

# main menu navigation
menu:
  home:
    path: /
    icon: icon-home-4-line
  list:
    - type: archives
      path: /archives/
      icon: icon-archive-line
    - type: categories
      path: /categories/
      icon: icon-folder-2-line
    - type: tags
      path: /tags/
      icon: icon-price-tag-3-line
  custom:
    title: 文档
    path: https://yun.yunyoujun.cn
    icon: icon-settings-line

# archive
archive:
  last_word: 没有更多的黑历史了_(:з」∠)_

wordcloud:
  enable: false
  height: 350

# You can set color for every tag or category.
tags:
  Vue: "#4fc08d"
  Hexo: "#0E83CD"
  CSS: "#5298d1"
  Node.js: "#026E00"
  Git: "#F14E32"
  React: "#61dafb"
  Python: "#3776ab"
  PHP: "#8892BF"
  VS Code: "#0066B8"
  JavaScript: "#F4DF4F"
  TypeScript: "#317AC6"
  Laravel: "#F4645F"

categories:
  笔记: dimgray

# post type
types:
  link:
    color: blue
    icon: icon-external-link-line
  bilibili:
    color: "#FF8EB3"
    icon: icon-bilibili-line
  douban:
    color: "#007722"
    icon: icon-douban-line
  github:
    color: black
    icon: icon-github-line
  netease-cloud-music:
    color: "#C10D0C"
    icon: icon-netease-cloud-music-line
  notion:
    color: black
    icon: icon-notion
  twitter:
    color: "#1da1f2"
    icon: icon-twitter-line
  wechat:
    color: "#1AAD19"
    icon: icon-wechat-2-line
  weibo:
    color: "#E6162D"
    icon: icon-weibo-line
  yuque:
    color: "#25b864"
    icon: icon-yuque
  zhihu:
    color: "#0084FF"
    icon: icon-zhihu-line

# post_card
post_card:
  opacity: 0.9

# link
# -------
preload:
  style:
    - /css/hexo-theme-yun.css
  script:

prefetch:
  script:
    - /js/sidebar.js

dns_prefetch:
# - https://xxx

# do more(TCP handshake...) than dns-fetch
preconnect:
  - https://cdn.jsdelivr.net

# img loading="lazy"
lazyload:
  enable: true

# pjax
pjax:
  enable: false

# stylesheets loaded in the <head>
css:
  - /css/hexo-theme-yun.css

# scripts loaded in the end of the <head>
js:

# custom your assets in head
head:
  css:
  js:
    base:
    async:
    defer:

# cdn for third-party library (always include)
cdn:
  pre: ""
  # pre: https://cdn.jsdelivr.net/gh/YunYouJun/yunyoujun.github.io
  css:
    yun-markdown-css: https://cdn.jsdelivr.net/npm/star-markdown-css@0.2.4/dist/yun/yun-markdown.min.css
    prism-theme-vars: https://cdn.jsdelivr.net/npm/prism-theme-vars/base.css
    # github-markdown-css: https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.css
  js:
    base:
    async:
      iconfont: //at.alicdn.com/t/font_1140697_dxory92pb0h.js
    defer:

# cdn for third-party library (alternative include)
# please see in _vendors.yml
vendors:

# UI
banner:
  enable: true
  title: 不换的小窝
  border: true
  cloud:
    enable: true
    color: "white"
  go_down:
    enable: true
    icon: icon-arrow-down-s-line

# You can import the font you want in the head.
font:
  cdn:
    enable: true
    lib:
      - https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@900&display=swap
  serif:
    family: "'Songti SC', 'Noto Serif SC', STZhongsong, STKaiti, KaiTi, Roboto, serif"
    weight: 900
  sans_serif:
    family: "'PingFang SC', 'Microsoft YaHei', Roboto, Arial, sans-serif"
    weight: 400
  monospace:
    family: "'Source Code Pro', Consolas, Monaco, SFMono-Regular, 'Ubuntu Mono', Menlo, monospace"

# custom your color in fireworks
fireworks:
  enable: true
  colors:
  # - "102, 167, 221"
  # - "62, 131, 225"
  # - "33, 78, 194"
  # - "3, 28, 95"
  # - "0, 8, 55"

# https://github.com/qrohlf/trianglify
trianglify:
  enable: false
  cell_size: 75
  width: 800
  height: 600
  # https://github.com/qrohlf/trianglify/blob/master/src/utils/colorbrewer.js
  palette: '["YlGnBu", "GnBu", "Purples", "Blues"]'
  opacity: 0.5

cursor:
  enable: false
  default: https://cdn.jsdelivr.net/gh/YunYouJun/cdn/css/md-cursors/pointer.cur
  pointer: https://cdn.jsdelivr.net/gh/YunYouJun/cdn/css/md-cursors/link.cur
  text: https://cdn.jsdelivr.net/gh/YunYouJun/cdn/css/md-cursors/text.cur

smoothScroll: true

# You can see effect in https://scrollrevealjs.org/
scrollreveal:
  enable: true
  targets:
    - .post-card
    - .markdown-body img

bg_image:
  enable: true
  url: https://bigdreamerblog.oss-cn-beijing.aliyuncs.com/dev-blog/static/light.jpeg?x-oss-process=style/HANDLE_IMAGE # recomend image related to your mode
  dark: https://bigdreamerblog.oss-cn-beijing.aliyuncs.com/dev-blog/static/dark.png?x-oss-process=style/HANDLE_IMAGE
  # blur: 30px
  opacity: 0.8

# Reward (Donate)
# If enable true, reward would be displayed in every posts and pages by default.
# You can show or hide reward in a specific page throuth `reward: true | false` in Front Matter.
reward:
  enable: true
  icon: icon-hand-coin-line
  comment: I'm so cute. Please give me money.
  # url: https://github.com/YunYouJun/yunyoujun.github.io/issues/96
  methods:
  # - name: 支付宝
  #   path: https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/donate/alipay-qrcode.jpg
  #   color: "#00A3EE"
  #   icon: icon-alipay-line
  # - name: QQ 支付
  #   path: https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/donate/qqpay-qrcode.png
  #   color: "#12B7F5"
  #   icon: icon-qq-line
  # - name: 微信支付
  #   path: https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/donate/wechatpay-qrcode.jpg
  #   color: "#2DC100"
  #   icon: icon-wechat-pay-line
  # - name: PayPal
  #   link: https://paypal.me/elpsycn
  #   path: https://www.paypalobjects.com/images/shared/paypal-logo-129x32.svg
  #   color: "#2D70B5"
  #   icon: icon-paypal-line

# Creative Commons 4.0 International License.
# https://creativecommons.org/licenses/
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# You can set a language value if you prefer a translated version of CC license.
# CC licenses are available in 39 languages, where you can find the specific and correct abbreviation you need.
# Valid values of language: deed.zh, deed.en, deed.ja, etc.
creative_commons:
  license: by-nc-sa
  language: deed.zh
  post: true
  clipboard: false

# AddThis Share, See: https://www.addthis.com
# Go to https://www.addthis.com/dashboard to customize your tools.
# add_this_id:

# Post edit
# Dependencies: https://github.com/hexojs/hexo-deployer-git
post_edit:
  enable: false
  url: https://github.com/user-name/repo-name/tree/branch-name/subdirectory-name # Link for view source.

# Footer Settings
# ---------------
footer:
  since: 2022

  # Icon between year and copyright info.
  icon:
    # `heart` is recommended with animation in red (#ff0000).
    name: icon-cloud-line
    # If you want to animate the icon, set it to true.
    animated: true
    # Change the color of icon, using Hex Code.
    color: "#0078E7"
    # url: https://sponsors.yunyoujun.cn
    # title: 云游君的赞助者们

  powered:
    # Hexo link (Powered by Hexo).
    enable: false

  # Beian icp information for Chinese users. In China, every legal website should have a beian icp in website footer.
  # https://beian.miit.gov.cn/
  beian:
    enable: false
    # icp: 苏ICP备xxxxxxxx号

  live_time:
    enable: true
    prefix: 本博客已萌萌哒地运行
    suffix: (●'◡'●)
    start_time: "2022-04-10T00:00:00"

  # Display support
  # support:
  #   enable: true
  #   title: 又拍云
  #   link: https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral
  #   logo: https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/logo/upyun-logo.png
  #   prefix: 本网站由
  #   suffix: 提供 CDN 加速
  # Any custom text can be defined here.
  # custom_text: Hosted by <a href="https://pages.coding.me" rel="noopener" target="_blank">Coding Pages</a>

# Post meta display settings
post_meta:
  item_text: false
  created_at: true
  updated_at: true
  categories: true
  tags: true

# notice pin board
notice:
  enable: false
  content: Thanks for watching my blog.

# third party
# ----------------

# say something
# https://say.elpsy.cn
say:
  enable: true
  # api: https://say.elpsy.cn/sentences.json
  # /data/sentences.json
  api: https://cdn.jsdelivr.net/gh/ElpsyCN/say@gh-pages/sentences.json
  # https://developer.hitokoto.cn/sentence/
  hitokoto:
    enable: true
    api: https://v1.hitokoto.cn
    # api: https://v1.hitokoto.cn?c=a&c=b&c=c&c=d&c=k

# you can new JSON file in your blog root folder
# example: source/data/sentences.json
# then set say.api: /data/sentences.json
# Example: https://say.elpsy.cn/sentences.json

# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi:
  enable: false
  site_uv: true
  site_uv_icon: icon-user-line
  site_pv: true
  site_pv_icon: icon-eye-line
  page_pv: true
  page_pv_icon: icon-eye-line

# Post wordcount
# https://github.com/willin/hexo-wordcount
wordcount:
  enable: true
  count: true
  time: true

# search
search:
  modal: true
  bg_image: https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/bg/stars-timing-0-blur-30px.jpg
  dark_bg_image: https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/bg/mountain-blur-30px.jpg
  # placeholder: 想要搜些什么?

engine_search:
  enable: false
  href: "https://www.google.com/search?q=site:"
  # href: "https://www.baidu.com/s?wd=site:"
  # href: "https://www.bing.com/search?q=site:"
  domain: dev.bigdreamer.cc

# https://github.com/wzpan/hexo-generator-search
local_search:
  enable: true

# https://github.com/oncletom/hexo-algolia
algolia_search:
  enable: false
  hits:
    per_page: 8 # the number of search results per page

# Ads
# ---------------
# Google Adsense
google_adsense:
  enable: false
  client: ca-pub-2245427233262012

# Analysis
# ---------------
google_analytics:
  enable: false
  # GA4
  id: G-XXXXXXXXX

# Google Tagmanager
google_tagmanager:
  enable: false
  id:

# Show number of visitors of each article.
# You can visit https://www.leancloud.cn to get AppID and AppKey.
leancloud_visitors:
  enable: false
  app_id: # <your app id>
  app_key: # <your app key>
  # Required for apps from CN region
  server_url: # <your server url>

# That is it only render those page which has `katex: true` in Front-matter.
# math fomula
# https://katex.org/
katex:
  copy_tex: true
  global: false
  # Options are for katex rendering options: https://katex.org/docs/options.html
  # In page katex options are also possible and will be merged
  options: {}

# plugins
aplayer:
  global: false
  meting: true
  # https://github.com/metowolf/MetingJS/tree/v1.2#option
  widget:
    enable: false
    autoplay: false
    # theme: "#2980b9"
    loop: all
    order: list
    preload: auto
    volume: 0.7
    mutex: true
    lrcType: 0
    listFolded: false
    listMaxHeight: 340px
    audio:
      - name: 星宿计时
        artist: 杉田朗/洛天依
        url: https://cdn.jsdelivr.net/gh/YunYouJun/cdn/audio/star-timer.mp3
        cover: https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/bg/stars-timing-0.jpg
    meting:
      enable: true
      id: 308168565
      server: netease
      type: playlist

# mermaid url https://github.com/knsv/mermaid
mermaid:
  enable: false
  options: # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
    startOnload: true # default true
  global: false #default true

# special
mourn:
  enable: false
  days:
    - "4-4"
    - "9-18"

# SEO
# https://ziyuan.baidu.com/linksubmit/index
baidu_push: false

# custom (You can use variables.)
custom:
  style: source/_data/style/*

# slide
slide:
  separator: ---
  separator_vertical: "~~"
  data_separator_notes: "^Note:"
  theme: white
  config:
    history: true
    mouseWheel: false

# ---------
# Comments
# ---------
comment:
  enable: true
  icon: icon-chat-3-line
  tips:
  # - 要不要和我说些什么?
  candidates:
    - valine
  #   - utterances

# GitHub Issues Link Button
# https://help.github.com/en/github/searching-for-information-on-github/searching-issues-and-pull-requests
github_issues:
  enable: false
  username: YunYouJun
  repository: yunyoujun.github.io
  filters: is:issue

# https://docs.github.com/cn/free-pro-team@latest/discussions/quickstart
github_discussions:
  enable: false
  username: YunYouJun
  repository: yunyoujun.github.io

# Valine
# You can get your appid and appkey from https://leancloud.cn
# More info available at https://valine.js.org
# extend: https://github.com/DesertsP/Valine-Admin
valine:
  enable: true
  appId: [已隐藏]
  appKey: [已隐藏]
  placeholder: Just go go # comment box placeholder
  avatar: # gravatar style
#  meta:
#    - nick
#    - mail
#    - link
  pageSize: 10 # pagination size
  # lang: zh-CN
  visitor: true
  highlight: true
  recordIP: true
  # serverURLs:
  # Emoji See: https://valine.js.org/emoji.html
  # emojiCDN: //i0.hdslb.com/bfs/emote/
  # emojiMaps:
  #   tv_doge: 6ea59c827c414b4a2955fe79e0f6fd3dcd515e24.png
  #   more...
  enableQQ: true
  # requiredFields:
  #   - nick
  #   - mail

# https://waline.js.org/
waline:
  enable: false
  serverURL: # https://your-domain.vercel.app
  # visitor: false
  # display comment count
  comment: false

# MiniValine
# More info available at https://github.com/MiniValine/MiniValine
minivaline:
  enable: false
  # 更多选项 https://minivaline.js.org/docs/cn/#/Options 按照yml格式继续填写即可 (除了 [el] 选项)
  # emoticonUrl 等列表选项 可参考 https://github.com/MiniValine/hexo-next-minivaline
  # 下面是一个例子:
  serverURL: https://minivaline.your-domain.top

# http://disqus.com/
disqus:
  enable: false
  shortname: yunyoujun
  count: false

# https://github.com/SukkaW/DisqusJS
disqusjs:
  enable: false
  shortname: yunyoujun
  # siteName:
  # identifier:
  # url:
  # title:
  # api:
  # apikey:
  # nesting: 4
  # nocomment:
  # admin:
  # adminLabel:

# https://livere.com/
livere:
  enable: false
  uid:

# https://github.com/utterance/utterances
utterances:
  enable: false
  repo:
  issue-term: pathname
  # label: comment
  theme: github-light

# https://twikoo.js.org/
twikoo:
  enable: false
  envId: xxxxxxxxxxxxxxx # 腾讯云环境id
  # region: # 环境地域,默认为 ap-shanghai,如果您的环境地域不是上海,需传此参数
  # option: # 用于区分不同文章的自定义 js 路径,如果您的文章路径不是 location.pathname,需传此参数

# https://github.com/laymonage/giscus
giscus:
  enable: false
  repo:
  repo-id:
  category:
  category-id:
  mapping: pathname
  reactions-enabled: 1
  emit-metadata: 0
  theme: light
bigbigDreamer commented 2 years ago
image

我猜测是 JS 加载顺序的问题,,然后我加了个延时器。

image

然后看着是正常了,但是,不太懂为什么,

YunYouJun commented 2 years ago

请使用 Waline 替代 Valine(存在安全漏洞,作者已停止维护),Waline 的 getScript 应该是正常的。

getScript 需要等待工具类加载完才能调用。

bigbigDreamer commented 2 years ago

请使用 Waline 替代 Valine(存在安全漏洞,作者已停止维护),Waline 的 getScript 应该是正常的。

getScript 需要等待工具类加载完才能调用。

感谢🙏,我试试。

bigbigDreamer commented 2 years ago
image

可以了,感谢大佬~