From 2845fe6a66ec3f71732a6fbca137360d3daeb3fa Mon Sep 17 00:00:00 2001 From: xaoxuu Date: Sun, 5 Apr 2020 21:42:23 +0800 Subject: [PATCH] hljs --- _config.yml | 8 ++- layout/_partial/head.ejs | 5 ++ layout/_partial/scripts.ejs | 10 ++- layout/_third-party/clipboard.ejs | 1 + scripts/events/index.js | 8 +++ scripts/events/lib/config.js | 63 ++++++++++++++++++ source/css/_highlight/diff.styl | 8 --- source/css/_highlight/index.styl | 10 +-- source/css/_highlight/theme.styl | 91 -------------------------- source/css/_layout/article.styl | 21 +++--- source/css/_third-party/clipboard.styl | 5 +- 11 files changed, 113 insertions(+), 117 deletions(-) create mode 100644 scripts/events/index.js create mode 100644 scripts/events/lib/config.js delete mode 100644 source/css/_highlight/diff.styl delete mode 100644 source/css/_highlight/theme.styl diff --git a/_config.yml b/_config.yml index 47ffbb3..b557be0 100755 --- a/_config.yml +++ b/_config.yml @@ -4,11 +4,12 @@ info: version: '2.4.2' # This is theme's version. docs: https://volantis.js.org/ # This is theme's URL. cdn: # To use CDN, write 'use_cdn: true' in 'blog/_config.yml'. - css: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.4.2.3/css/style.css + # css: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.4.2.3/css/style.css js: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.4.2/js/app.js ############################### Style ############################### +# cdn.css must be closed style: max_width: 1080px # Sum of body width and sidebar width (This limit will be exceeded when the device width is greater than 2000px, reaching 75% of the total width) scrollbar: @@ -374,6 +375,11 @@ plugins: instant_page: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2/js/instant_page.js ######## Plugins to optimize the experience: + # highlight.js + highlightjs: + js: https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js + css: https://cdn.jsdelivr.net/npm/highlight.js@9.18.1/styles/solarized-light.css + # more: https://www.jsdelivr.com/package/npm/highlight.js?path=styles # Picture Zoom fancybox: css: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css diff --git a/layout/_partial/head.ejs b/layout/_partial/head.ejs index f574bb6..5f84361 100755 --- a/layout/_partial/head.ejs +++ b/layout/_partial/head.ejs @@ -105,6 +105,11 @@ <%- item %><% }) %> <% } %> + <% if (config.highlight.enable != true) { %> + <% if (theme.plugins.highlightjs && theme.plugins.highlightjs.css) { %> + <%- css(theme.plugins.highlightjs.css) %> + <% } %> + <% } %> <% if (config.use_cdn && theme.info && theme.info.cdn && theme.info.cdn.css) { %> <%- css(theme.info.cdn.css) %> <% } else { %> diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs index ceb6485..f208caf 100755 --- a/layout/_partial/scripts.ejs +++ b/layout/_partial/scripts.ejs @@ -217,7 +217,15 @@ <% } %> <% if (theme.plugins.comment_typing) { %> <%- js(theme.plugins.comment_typing) %> -<%}%> +<% } %> + +<% if (config.highlight.enable != true) { %> + <% if (theme.plugins.highlightjs && theme.plugins.highlightjs.js) { %> + <%- js(theme.plugins.highlightjs.js) %> + + <% } %> +<% } %> + <% if (theme.plugins.clipboard && theme.style.body.highlight.copy_btn) { %> diff --git a/layout/_third-party/clipboard.ejs b/layout/_third-party/clipboard.ejs index 8ad8628..a178212 100644 --- a/layout/_third-party/clipboard.ejs +++ b/layout/_third-party/clipboard.ejs @@ -7,6 +7,7 @@ copyHtml += 'COPY'; copyHtml += ''; $(".highlight .code pre").before(copyHtml); + $(".article pre code").before(copyHtml); var clipboard = new ClipboardJS('.btn-copy', { target: function(trigger) { return trigger.nextElementSibling; diff --git a/scripts/events/index.js b/scripts/events/index.js new file mode 100644 index 0000000..5d91464 --- /dev/null +++ b/scripts/events/index.js @@ -0,0 +1,8 @@ +/* global hexo */ + +'use strict'; + +hexo.on('generateBefore', () => { + // Merge config. + require('./lib/config')(hexo); +}); diff --git a/scripts/events/lib/config.js b/scripts/events/lib/config.js new file mode 100644 index 0000000..c95c329 --- /dev/null +++ b/scripts/events/lib/config.js @@ -0,0 +1,63 @@ +'use strict'; + +function isObject(item) { + return item && typeof item === 'object' && !Array.isArray(item); +} + +function merge(target, source) { + for (const key in source) { + if (isObject(target[key]) && isObject(source[key])) { + merge(target[key], source[key]); + } else { + target[key] = source[key]; + } + } + return target; +} + +module.exports = hexo => { + if (!hexo.locals.get) return; + + var data = hexo.locals.get('data'); + if (!data) return; + + /** + * Merge configs from _data/next.yml into hexo.theme.config. + * If `override`, configs in next.yml will rewrite configs in hexo.theme.config. + * If next.yml not exists, merge all `theme_config.*` into hexo.theme.config. + */ + if (data.next) { + if (data.next.override) { + hexo.theme.config = data.next; + } else { + merge(hexo.config, data.next); + merge(hexo.theme.config, data.next); + } + } else { + merge(hexo.theme.config, hexo.config.theme_config); + } + + if (hexo.theme.config.cache && hexo.theme.config.cache.enable && hexo.config.relative_link) { + hexo.log.warn('Since caching is turned on, the `relative_link` option in Hexo `_config.yml` is set to `false` to avoid potential hazards.'); + hexo.config.relative_link = false; + } + hexo.config.meta_generator = false; + + // Custom languages support. Introduced in NexT v6.3.0. + if (data.languages) { + var { language } = hexo.config; + var { i18n } = hexo.theme; + + var mergeLang = lang => { + i18n.set(lang, merge(i18n.get([lang]), data.languages[lang])); + }; + + if (Array.isArray(language)) { + for (let lang of language) { + mergeLang(lang); + } + } else { + mergeLang(language); + } + } +}; diff --git a/source/css/_highlight/diff.styl b/source/css/_highlight/diff.styl deleted file mode 100644 index 19aa8d7..0000000 --- a/source/css/_highlight/diff.styl +++ /dev/null @@ -1,8 +0,0 @@ -$highlight_theme = hexo-config('highlight_theme') - -if $highlight_theme == 'light' - $highlight-deletion = #fdd - $highlight-addition = #dfd -else - $highlight-deletion = #008000 - $highlight-addition = #800000 diff --git a/source/css/_highlight/index.styl b/source/css/_highlight/index.styl index 7ad3c0a..01f88ed 100644 --- a/source/css/_highlight/index.styl +++ b/source/css/_highlight/index.styl @@ -1,7 +1,9 @@ -// https://github.com/equinusocio/vsc-material-theme -@require 'theme' -@require 'diff' - +pre + position: relative +.hljs + margin: 0 - $gap !important + padding: $gap !important + scrollbar() .highlight position: relative diff --git a/source/css/_highlight/theme.styl b/source/css/_highlight/theme.styl deleted file mode 100644 index c956ce1..0000000 --- a/source/css/_highlight/theme.styl +++ /dev/null @@ -1,91 +0,0 @@ -$highlight_theme = hexo-config('highlight_theme') - -if $highlight_theme == 'default' - $highlight-background = #263238 - $highlight-current-line = #efefef - $highlight-selection = #80CBC420 - $highlight-foreground = #EEFFFF - $highlight-comment = #546E7A - $highlight-red = #FF5370 - $highlight-orange = #F78C6C - $highlight-yellow = #FFCB6B - $highlight-green = #C3E88D - $highlight-aqua = #89DDFF - $highlight-blue = #82AAFF - $highlight-purple = #C792EA - $highlight-gutter = { - color: #37474F, - bg-color: $highlight-background - } - -if $highlight_theme == 'darker' - $highlight-background = #212121 - $highlight-current-line = #282a2e - $highlight-selection = #61616150 - $highlight-foreground = #EEFFFF - $highlight-comment = #4A4A4A - $highlight-red = #FF5370 - $highlight-orange = #F78C6C - $highlight-yellow = #FFCB6B - $highlight-green = #C3E88D - $highlight-aqua = #89DDFF - $highlight-blue = #82AAFF - $highlight-purple = #C792EA - $highlight-gutter = { - color: #424242, - bg-color: $highlight-background - } - -if $highlight_theme == 'pale night' - $highlight-background = #292D3E - $highlight-current-line = #393939 - $highlight-selection = #717CB450 - $highlight-foreground = #A6ACCD - $highlight-comment = #676E95 - $highlight-red = #FF5370 - $highlight-orange = #F78C6C - $highlight-yellow = #FFCB6B - $highlight-green = #C3E88D - $highlight-aqua = #89DDFF - $highlight-blue = #82AAFF - $highlight-purple = #C792EA - $highlight-gutter = { - color: #3A3F58, - bg-color: $highlight-background - } - -if $highlight_theme == 'ocean' - $highlight-background = #0F111A - $highlight-current-line = #000000 - $highlight-selection = #717CB450 - $highlight-foreground = #8F93A2 - $highlight-comment = #464B5D - $highlight-red = #FF5370 - $highlight-orange = #F78C6C - $highlight-yellow = #FFCB6B - $highlight-green = #C3E88D - $highlight-aqua = #89DDFF - $highlight-blue = #82AAFF - $highlight-purple = #C792EA - $highlight-gutter = { - color: #3B3F5180, - bg-color: $highlight-background - } - -if $highlight_theme == 'light' - $highlight-background = #F6F8FA - $highlight-current-line = #00346e - $highlight-selection = #80CBC440 - $highlight-foreground = #90A4AE - $highlight-comment = #90A4AE90 - $highlight-red = #E53935 - $highlight-orange = #F76D47 - $highlight-yellow = #FFB62C - $highlight-green = #91B859 - $highlight-aqua = #39ADB5 - $highlight-blue = #6182B8 - $highlight-purple = #7C4DFF - $highlight-gutter = { - color: #CFD8DC, - bg-color: $highlight-background - } diff --git a/source/css/_layout/article.styl b/source/css/_layout/article.styl index db94862..f9ba51c 100644 --- a/source/css/_layout/article.styl +++ b/source/css/_layout/article.styl @@ -204,11 +204,11 @@ border: 1px solid darken($color-codeblock, 6) padding: $gap border-radius: $border-codeblock - >code + >code:not([class]) background: transparent div>pre border-radius: $border-codeblock - &>code + &>code:not([class]) padding: 0 margin: 0 background: transparent @@ -216,14 +216,15 @@ code font-family: $fontfamily-code - padding: 4px 2px 2px 2px - margin: 0 - vertical-align: middle - border-radius: 2px - line-height: 1.45 - font-size: $fontsize-code - color: $color-inlinecode - background: bgcolor($color-inlinecode, 4) + &:not([class]) + padding: 4px 2px 2px 2px + margin: 0 + vertical-align: middle + border-radius: 2px + line-height: 1.45 + font-size: $fontsize-code + color: $color-inlinecode + background: bgcolor($color-inlinecode, 4) table:not('.highlight table') width: 100% diff --git a/source/css/_third-party/clipboard.styl b/source/css/_third-party/clipboard.styl index ce05165..c8803a1 100644 --- a/source/css/_third-party/clipboard.styl +++ b/source/css/_third-party/clipboard.styl @@ -18,8 +18,7 @@ if hexo-config('style.body.highlight.copy_btn') margin-right: 4px color: $color-meta background: $color-card - border-bottom-left-radius: $border-codeblock - border-top-right-radius: $border-codeblock + border-radius: 2px box-shadow: $boxshadow-card position: absolute top: 0 @@ -32,3 +31,5 @@ if hexo-config('style.body.highlight.copy_btn') .highlight:hover .btn-copy opacity: 1 + .article pre:hover .btn-copy + opacity: 1