search

jerryc127 / hexo-theme-butterfly

🦋 A Hexo Theme: Butterfly
https://butterfly.js.org
Apache License 2.0
7.06k stars 1.28k forks source link

关于升级主题后的界面渲染问题 #65

Closed GamerNoTitle closed 4 years ago

GamerNoTitle commented 4 years ago

主题从不知道哪个版本升级到了最新版后，出现了界面的渲染问题（如图）

浏览器Console 浏览器Console

以下是Hexo的Package.json { "name": "hexo-site", "version": "0.0.0", "private": true, "hexo": { "version": "3.9.0" }, "dependencies": { "gitalk": "^1.5.0", "hexo": "^3.9.0", "hexo-deployer-git": "^1.0.0", "hexo-generator-archive": "^0.1.5", "hexo-generator-baidu-sitemap": "^0.1.6", "hexo-generator-category": "^0.1.3", "hexo-generator-feed": "^2.0.0", "hexo-generator-index": "^0.2.1", "hexo-generator-index-pin-top": "^0.2.2", "hexo-generator-sitemap": "^1.2.0", "hexo-generator-tag": "^0.2.0", "hexo-helper-live2d": "^3.1.1", "hexo-renderer-ejs": "^0.3.1", "hexo-renderer-jade": "^0.4.1", "hexo-renderer-marked": "^1.0.1", "hexo-renderer-stylus": "^0.3.3", "hexo-sage-posts": "^0.0.1", "hexo-server": "^0.3.3", "hexo-wordcount": "^6.0.1", "live2d-widget-model-tororo": "^1.0.5" } }

jerryc127 commented 4 years ago

main.js 没有用lozad啊

你要不clean下再看看？

旧版本升级到新版本要更改设置 即 配置_CONGIF.yml文件，然后把内容复制到butterfly.yml去。。不然会报错

如果问题还在，建议重新下一遍主题

GamerNoTitle commented 4 years ago

重新clone了一次主题，本地调试的时候可以，但是部署到网上就不行了。。。

以下是主题配置：

Main menu navigation

---------------

format: xxx: 連結 || icon

sub-menu

xxx || icon:

xxx || 連結 || icon

menu:

Home: / || fa fa-home

Archives: /archives/ || fa fa-archive

Tags: /tags/ || fa fa-tags

Categories: /categories/ || fa fa-folder-open

Link: /link/ || fa fa-link

About: /about/ || fa fa-heart

List||fa fa-list:

- Music || /music/ || fa fa-music

- Movie || /movies/ || fa fa-film

menu: Home: /||fa fa-home Archives: /archives/||fa fa-archive Tags||fa fa-tags:

Favicon

---------------

favicon: /img/favicon.png

PWA

See https://github.com/JLHwung/hexo-offline

---------------

pwa:

enable: true

manifest: /img/pwa/manifest.json

theme_color: "#fff"

apple_touch_icon: /img/pwa/apple-touch-icon.png

favicon_32_32: /img/pwa/32.png

favicon_16_16: /img/pwa/16.png

mask_icon: /img/pwa/safari-pinned-tab.svg

Highlight theme

---------------

highlight_theme: light highlight_copy: false #代碼複製按鈕 highlight_lang: true #代碼語言顯示 highlight_shrink: false #代碼框不展開，需點擊 '>' 打開

code_word_wrap: false

copy setting

是否禁止複製（如果禁止，highlight_copy的功能將無效)

copyright 複製的内容後面加上版權信息

copy: enable: true # true 開啓 / false 禁止 copyright: true

social settings

formal:

icon: link

---------------

social: fa fa-github: https://github.com/GamerNoTitle fa fa-cloud: http://skin.bili33.top:8080/ fa fa-television: https://space.bilibili.com/44666814

fa fa-cogs: http://bili33.tk

fa fa-rss: /atom.xml

search

Algolia search

---------------

algolia_search: enable: false hits: per_page: 6

labels: input_placeholder: Search for Posts hits_empty: "We didn't find any results for the search: ${query}" # if there are no result hits_stats: "${hits} results found in ${time} ms"

Local search

Please see doc for more details: https://jerryc.me/posts/21cfbf15/#本地搜索

---------------

local_search: enable: false labels: input_placeholder: Search for Posts hits_empty: "We didn't find any results for the search: ${query}" # if there are no result

MathJax

Please see doc for more details: https://jerryc.me/posts/21cfbf15/#MathJax

---------------

mathjax: enable: false

KaTeX

---------------

katex: enable: false hide_scrollbar: true

Analysis

---------------

baidu_analytics:

Google Analytics

google_analytics: UA-138072700-2

Post info settings

---------------

avatar: /img/avatar.png

avatar: https://cdn.bili33.workers.dev/GamerNoTitle/GamerNoTitle.github.io/master/img/favicon.png

the banner image of index

top_img: https://cdn.bili33.workers.dev/GamerNoTitle/Picture-repo/master/Top-img/NEKO-Hackers-Edited.jpg

以下鏈接是動態壁紙，每次刷新會更換

https://source.unsplash.com/collection/collectionid/1600x900

https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture

https://api.dujin.org/bing/1920.php

https://api.dujin.org/bing/1366.php

if the banner of page not setting,it will show the top_img

default_top_img: https://cdn.bili33.workers.dev/GamerNoTitle/Picture-repo/master/Top-img/NEKO-Hackers-Edited.jpg

the default cover of the post

default_cover: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png

the banner image of archive page

archive_img: https://cdn.bili33.workers.dev/GamerNoTitle/Picture-repo/master/Top-img/NEKO-Hackers-Edited.jpg

the banner image of tag page

tag_img: https://cdn.bili33.workers.dev/GamerNoTitle/Picture-repo/master/Top-img/NEKO-Hackers-Edited.jpg

the banner image of category page

category_img: https://cdn.bili33.workers.dev/GamerNoTitle/Picture-repo/master/Top-img/NEKO-Hackers-Edited.jpg

如果你有使用hexo-douban去生成movie界面，可配置這個

movies_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN/Photo/movie.jpg

if the photo link cannot connect,it will show that

lodding_bg: flink: /img/friend_404.gif post_page: https://cdn.bili33.workers.dev/GamerNoTitle/Picture-repo/master/404/404.png

post_meta: date_type: both # or created or updated 文章日期是创建日或者更新日或都显示 categories: true # or false 是否显示分类 tags: true # or false 是否显示标签

Please see doc for more details: https://jerryc.me/posts/21cfbf15/#字数统计

wordcount: enable: true

toc: enable: true number: true

auto open the sidebar in 'post'

auto_open_sidebar: enable: true

post_copyright: enable: true license: CC BY-NC-SA 4.0 license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

自動節選

auto_excerpt: enable: true length: 150

Share System

-----------------------------------------

addThis: enable: false pubid:

sharejs: enable: true sites: facebook,twitter,wechat,weibo,qq

https://www.addtoany.com/

addtoany: enable: false item:

Comments System

------------------------------------

disqus:

enable: false

shortname:

laibili:

enable: false

uid:

gitalk:

enable: false

client_id:

client_secret:

repo:

owner:

admin:

language: # en , zh-CN , zh-TW

Using this js for redirect to gitalk container after login

See https://github.com/gitalk/gitalk/issues/125

js: https://cdn.jsdelivr.net/gh/upupming/gitalk@36368e5dffd049e956cdbbd751ff96c28d8255cf/dist/gitalk.min.js

valine comment system. https://valine.js.org

valine: enable: true # if you want use valine,please set this value is true appId: wRUW5fICAL8URzxXwJNSiwA7-MdYXbMMI # leancloud application app id appKey: LbtRzTQKxCWNpj30GLH3sw5j # leancloud application app key notify: true # valine mail notify (true/false) https://github.com/xCss/Valine/wiki verify: true # valine verify code (true/false) pageSize: 20 # comment list page size avatar: mp # gravatar style https://valine.js.org/#/avatar lang: zh-cn # i18n: zh-cn/en/tw placeholder: 你要留下你的足迹嘛？喵~ # valine comment input placeholder(like: Please leave your footprints ) guest_info: nick,mail,link #valine comment header inf

Footer Settings

------------------------------------

since: 2018

footer_custom_text:

footer_copyright: enable: true

ICP: enable: false url: text: icon: /img/icp.png

站長驗證

Google Webmaster tools verification setting

See: https://www.google.com/webmasters/

google_site_verification: Qr-YUMsmamacGjibQoqgCXMSotasUgUprPmP525d0Ls

Bing Webmaster tools verification setting

See: https://www.bing.com/webmaster/

bing_site_verification:

Baidu Webmaster tools verification setting

See: https://ziyuan.baidu.com/site/

baidu_site_verification:

360 Webmaster tools verification setting

see http://zhanzhang.so.com/

qihu_site_verification:

Flink: headline: 友情链接 info_headline: Who am I? name: Blog 名字： GamerNoTitle address: Blog 地址： https://bili33.top avatar: Blog 头像： https://cdn.bili33.workers.dev/GamerNoTitle/Picture-repo/master/AboutMe/Logo.png info: Blog 标语： 永远相信 美好的事情 即将发生 PS: PS：本文所有的数字表示方式来自Mili - world.execute(me); comment: 想和我交换友链吗？请在网页下方留言或发送邮件到admin@bili33.top哦~

打賞按鈕

reward: enable: false QR_code:

推薦文章

related_post: enable: true limit: 6 # 顯示推薦文章數目

美化/效果

--------------------------------

Theme color for customize

Notice: color value must in double quotes like "#000" or may cause error!

---------------

theme_color:

enable: true

main: "#49B1F5"

paginator: "#00c4b6"

button_hover: "#FF7242"

text_selection: "#00c4b6"

link_color: "#99a9bf"

meta_color: '#858585'

hr_color: "#A4D8FA"

read-mode-bg_color: '#FAF9DE'

inline-code-color: '#F47466'

主頁設置

默認top_img全屏，site_info在中間

使用默認, 都無需填寫（建議默認）

index_site_info_top: #主頁標題距離頂部距離 例如 300px/300em/300rem/10% index_top_img_height: #主頁top_img高度 例如 300px/300em/300rem 不能使用百分比

category和tag頁的UI設置

index 值代表 UI將與首頁的UI一樣

默認跟archives頁面UI一樣

category_ui: # 留空或index tag_ui: # 留空或index

設置網站背景

可設置圖片 或者 顔色

圖片格式 background: url(http://xxxxxx.com/xxx.jpg)

顔色 background: '#49B202'

留空 顯示白色

background:

footer是否顯示圖片背景(與top_img一致)

footer_bg: false

背景特效

避免卡頓，建議只開啓一個

canvas_ribbon 禁止彩帶背景

See: https://github.com/hustcc/ribbon.js

canvas_ribbon: enable: true size: 150 alpha: 0.6 zIndex: -1 click_to_change: true mobile: false # false 手機端不顯示 true 手機端顯示

動態彩帶

canvas_ribbon_piao: enable: true mobile: false # false 手機端不顯示 true 手機端顯示

canvas_nest

https://github.com/hustcc/canvas-nest.js

canvas_nest: enable: false color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.) opacity: 0.7 # the opacity of line (0~1), default: 0.5. zIndex: -1 # z-index property of the background, default: -1. count: 99 # the number of lines, default: 99. mobile: false # false 手機端不顯示 true 手機端顯示

打字效果

activate_power_mode: enable: true

鼠標點擊效果

避免卡頓，建議只開啓一個

點擊烟火特效

fireworks: enable: true

點擊出現愛心

click_heart: enable: false

點擊出現文字，文字可自行修改

ClickShowText: enable: false text:

頭像會一直轉圈

avatar_effect: false

網站顯示模式

light 默認模式

dark 黑暗模式（不建議）

display_mode: light

美化post頁顯示

post_beautify: enable: false title-prefix-icon: '\f0c1' title-prefix-icon-color: "#F47466"

全局字體

font: enable: false font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, MicrMicrosoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif code-font: consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number

網站名字字體

左上角網站名字 主頁居中網站名字

blog_title_font: font_link: https://fonts.googleapis.com/css?family=Titillium+Web #字體鏈接 font-family: Titillium Web, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif

水平分隔綫

hr: enable: false icon: '\f21c' #fontawesome上圖標的Unicode icon-top: -20px

主頁subtitle

打字效果

subtitle: enable: true

source調用第三方服務

source: false 關閉調用

source: 1 調用金山詞霸的每日一句（簡體）

source: 2 調用一言网的一句話（簡體） #https://hitokoto.cn/

source: 3 調用一句网（簡體） http://yijuzhan.com/

source: 4 調用今日詩詞（簡體） https://www.jinrishici.com/

subtitle 會先顯示 source , 再顯示 sub 的内容

source: false

(如果有英文逗號' , '，請使用轉義字符 ,)

sub:

側邊欄

-------------------------------------

側邊欄顯示設置

aside: position: right # left or right card_author: true card_announcement: true card_recent_post: true card_categories: true card_tags: false card_archives: true card_webinfo: true

網站公告

announcement: content: 拖更预备（我：咕~咕咕~咕咕咕咕~），试问：有人能听得懂鸽子语吗？

busuanzi count for PV / UV in site

訪問人數

busuanzi: site_uv: true site_pv: true page_pv: true

網頁開通時間

格式: 月/日/年 時間

也可以寫成 年/月/日 時間

runtimeshow: enable: true start_date: 7/1/2019 00:00:00 #m/d/y h:m:s

右下角按鈕

----------------------------------------------

簡繁轉換

translate: enable: true

默認按鈕顯示文字

default: 繁

网站默认语言，1: 繁體中文, 2: 简体中文

defaultEncoding: 2

延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0

translateDelay: 0

博客网址

cookieDomain: "https://xxx/"

當文字是簡體時，按鈕顯示的文字

msgToTraditionalChinese: "繁"

當文字是繁體時，按鈕顯示的文字

msgToSimplifiedChinese: "简"

閲讀模式

readmode: enable: true

夜間模式

darkmode: enable: true

自動切換 dark mode和 light mode

autoChangeMode: 1 跟隨系統而變化，不支持的瀏覽器/系統將按照時間晚上6點到早上6點之間切換為 dark mode

autoChangeMode: 2 只按照時間晚上6點到早上6點之間切換為 dark mode

autoChangeMode: false 取消自動切換

autoChangeMode: false

other

------------------------------------------------

圖片大圖查看模式

默認為 fancybox http://fancyapps.com/fancybox/3/

可以選擇改爲 medium_zoom https://github.com/francoischalifour/medium-zoom

medium_zoom: enable: false

Snackbar 彈窗

https://github.com/polonel/SnackBar

position 彈窗位置

可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right

snackbar: enable: false position: bottom-left bg_light: '#49b1f5' #light mode時彈窗背景 bg_dark: '#2d3035' #dark mode時彈窗背景

百度推送

baidu_push: enable: false

https://instant.page/

prefetch預加載

instantpage: enable: true

Note (Bootstrap Callout)

https://muse.theme-next.org/docs/tag-plugins/note

note:

Note tag style values:

- simple bs-callout old alert style. Default.

- modern bs-callout new (v2-v3) alert style.

- flat flat callout style with background, like on Mozilla or StackOverflow.

- disabled disable all CSS styles import of note tag.

style: flat icons: true border_radius: 3

Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).

Offset also applied to label tag variables. This option can work with disabled note tag.

light_bg_offset: 0

圖片懶加載

https://github.com/aFarkas/lazysizes

lazyload: enable: true

避免重複網址分散seo

canonical: true

禁止百度轉碼

disable_baidu_transformation: true

twitter分享自動帶上樣式

https://i.loli.net/2019/09/08/qm3RfvUCKbct1Wz.png

twitter_meta: true

facebook QQ 等 分享自動帶上樣式

https://i.loli.net/2019/09/08/2wbFJEKloisRvhj.png

Open_Graph_meta: true

CDN

網站必須

可根據需要自行添加js/css

CDN_USE: css:

CDN

非必要不要修改

CDN:

comments

blueimp-md5: https://cdn.jsdelivr.net/npm/blueimp-md5@2.10.0/js/md5.min.js gitalk: https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js gitalk_css: https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css valine: https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js

share

addtoany: https://static.addtoany.com/menu/page.js sharejs: https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/js/social-share.min.js sharejs_css: https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/css/share.min.css

search

algolia_search: https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.js algolia_search_css: https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.css algolia_js: /js/search/algolia.js local_search: /js/search/local-search.js

mathjax: https://cdn.jsdelivr.net/npm/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML katex: https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css katex_copytex: https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.js katex_copytex_css: https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.css

不蒜子計數器

busuanzi: //busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js

背景特效

canvas_ribbon: /js/third-party/canvas-ribbon.js # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/js/canvas-ribbon.js canvas_ribbon_piao: /js/third-party/piao.js # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/js/piao.js canvas_nest: /js/third-party/canvas-nest.js # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/js/canvas-nest.js

lazyload: https://cdn.jsdelivr.net/npm/lazysizes@latest/lazysizes.min.js instantpage: https://cdn.jsdelivr.net/npm/instant.page@latest/instantpage.min.js

typed: https://cdn.jsdelivr.net/npm/typed.js js_cookies: https://cdn.jsdelivr.net/npm/js-cookie/dist/js.cookie.min.js

fancybox_css: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js #/js/third-party/jquery.fancybox.min.js medium_zoom: https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js

snackbar_css: https://cdn.jsdelivr.net/npm/node-snackbar@0.1.15/dist/snackbar.min.css snackbar: https://cdn.jsdelivr.net/npm/node-snackbar@0.1.15/dist/snackbar.min.js

鼠标点击特效

anime: https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js #/js/third-party/anime.min.js activate_power_mode: /js/third-party/activate-power-mode.js # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/js/activate-power-mode.js fireworks: /js/third-party/fireworks.js # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/js/fireworks.js click_heart: /js/third-party/click_heart.js # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/js/click_heart.js ClickShowText: /js/third-party/ClickShowText.js # https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@latest/js/ClickShowText.js

translate: /js/tw_cn.js runtimeshow: js/runtimeshow.js

GamerNoTitle commented 4 years ago

里面友链那里有个PS是我在友链界面加多了一个项 hr .comment_int p.comment-word= theme.Flink.comment //- 下面是PS内容 p(style="font-size:9px;font-weight:bold")= theme.Flink.PS

GamerNoTitle commented 4 years ago

搞定了 Thanks♪(･ω･)ﾉ