diff --git a/README.md b/README.md index 6ff024a..051965f 100644 --- a/README.md +++ b/README.md @@ -105,6 +105,8 @@ progressBar: true excerpt_link: Read More... excerpt_all: false +# Copy code button +copy_btn: true # Share share_enable: true # If you are not in China, maybe you prefer to set:false diff --git a/_config.yml b/_config.yml index d2bc916..c81877e 100644 --- a/_config.yml +++ b/_config.yml @@ -41,6 +41,8 @@ excerpt_link: 阅读更多... # 如果你嫌每篇文章手动加more标记比较麻烦,又不想在首页全文显示,可以把excerpt_all设置成true,这样首页只会显示文章归档 excerpt_all: false +# 是否开启代码复制按钮 +copy_btn: true # 是否开启文章分享按钮 share_enable: true # 国内的社交平台(If you are not in China, maybe you prefer to set:false) @@ -187,4 +189,4 @@ pageFooter: true icp: enable: false url: "http://www.beian.miit.gov.cn/" # 备案链接 - text: "浙ICP备88888888" # 备案信息 + text: "浙ICP备88888888" # 备案信息 \ No newline at end of file diff --git a/layout/_partial/after-footer.ejs b/layout/_partial/after-footer.ejs index 717e697..80a07ed 100644 --- a/layout/_partial/after-footer.ejs +++ b/layout/_partial/after-footer.ejs @@ -62,4 +62,10 @@ <% if (theme.clickLove){ %> <%- js('/js/clickLove') %> -<% } %> \ No newline at end of file +<% } %> + + +<% if (theme.copy_btn == true) { %> + <%- css('/css/clipboard') %> + <%- partial('post/clipboard') %> +<% } %> diff --git a/layout/_partial/post/clipboard.ejs b/layout/_partial/post/clipboard.ejs new file mode 100644 index 0000000..6d8cd13 --- /dev/null +++ b/layout/_partial/post/clipboard.ejs @@ -0,0 +1,54 @@ + + diff --git a/source/css/clipboard.styl b/source/css/clipboard.styl new file mode 100644 index 0000000..dd1f8f4 --- /dev/null +++ b/source/css/clipboard.styl @@ -0,0 +1,35 @@ +// 代码块复制按钮 +if hexo-config('copy_btn') == true + .highlight + position: relative + + .btn-copy + z-index: 1 + display: inline-block + cursor: pointer + border: none + disable-user-select() + -webkit-appearance: none + font-size: 12px + font-weight: bold + padding: 3px 6px + >i + margin-right: 4px + font-size: 10px + transform: translateY(1px); + color: #333 + background: rgba(255,255,255,.8) + border-radius: 2px + position: absolute + top: 0 + right: 0 + opacity: 0 + transition: all linear .2s + &:hover + background: rgba(255,255,255,.7) + + .highlight:hover .btn-copy + opacity: 1 + + .article pre:hover .btn-copy + opacity: 1