我是靠谱客的博主 淡定手机,这篇文章主要介绍个人博客(八)Hexo新建文章、主题小修改关于文章小改动:只换了素材或者文字的,现在分享给大家,希望可以做个参考。

汇总:零基础小白如何用github搭建个人博客

目录

  • 关于文章
    • 删除文章
    • 新建-1(new page)
    • 新建-2(-s 文章标题和文件名分开)
    • 新建-3(结合以上两种)
    • 新建(-p 路径)
  • 小改动:只换了素材或者文字的
    • 网站图标
      • after
      • before
    • 标题、作者、描述
      • after

关于文章

删除文章

先把Hexo自带的文件slangelsBlogsource_postshello-world.md删除。

然后部署一下就可以了。

注:_posts 文件夹下必须有至少一个md文件,否则不能部署。

新建-1(new page)

参考:Hexo文档

新建文章的格式是hexo new [layout] <title>
Hexo 有三种默认布局:post、page 和 draft,第二种page是可以在 source 文件夹下新建一个页面(文件夹),并且在页面下有一个 index.md 的文件。如运行以下代码:

D:blogslangelsBlog>hexo new page "home"
INFO  Validating config
INFO  ==================================
  ███╗   ██╗███████╗██╗  ██╗████████╗
  ████╗  ██║██╔════╝╚██╗██╔╝╚══██╔══╝
  ██╔██╗ ██║█████╗   ╚███╔╝    ██║
  ██║╚██╗██║██╔══╝   ██╔██╗    ██║
  ██║ ╚████║███████╗██╔╝ ██╗   ██║
  ╚═╝  ╚═══╝╚══════╝╚═╝  ╚═╝   ╚═╝
========================================
NexT version 8.3.0
Documentation: https://theme-next.js.org
========================================
INFO  Created: D:blogslangelsBlogsourcehomeindex.md

D:blogslangelsBlog>

效果如下:
在这里插入图片描述

新建-2(-s 文章标题和文件名分开)

参考:Hexo–文章标题和文件名分离

运行命令hexo new -s 'welcome' '欢迎',可以创建一个文件名为 welcome 而文章标题是 欢迎 的一个文件。

D:blogslangelsBlog>hexo new -s 'welcome' '欢迎'
INFO  Validating config
INFO  ==================================
  ███╗   ██╗███████╗██╗  ██╗████████╗
  ████╗  ██║██╔════╝╚██╗██╔╝╚══██╔══╝
  ██╔██╗ ██║█████╗   ╚███╔╝    ██║
  ██║╚██╗██║██╔══╝   ██╔██╗    ██║
  ██║ ╚████║███████╗██╔╝ ██╗   ██║
  ╚═╝  ╚═══╝╚══════╝╚═╝  ╚═╝   ╚═╝
========================================
NexT version 8.3.0
Documentation: https://theme-next.js.org
========================================
INFO  Created: D:blogslangelsBlogsource_postswelcome.md

D:blogslangelsBlog>

效果如下:
在这里插入图片描述
测试一下,效果是这样的:
在这里插入图片描述

新建-3(结合以上两种)

新建一个页面,并且使得文章标题和文件名分开。运行以下代码:

D:blogslangelsBlog>hexo new page -s 'welcome' '欢迎'
INFO  Validating config
INFO  ==================================
  ███╗   ██╗███████╗██╗  ██╗████████╗
  ████╗  ██║██╔════╝╚██╗██╔╝╚══██╔══╝
  ██╔██╗ ██║█████╗   ╚███╔╝    ██║
  ██║╚██╗██║██╔══╝   ██╔██╗    ██║
  ██║ ╚████║███████╗██╔╝ ██╗   ██║
  ╚═╝  ╚═══╝╚══════╝╚═╝  ╚═╝   ╚═╝
========================================
NexT version 8.3.0
Documentation: https://theme-next.js.org
========================================
INFO  Created: D:blogslangelsBlogsourcewelcomeindex.md

D:blogslangelsBlog>

效果如下:
在这里插入图片描述
把目录slangelsBlogthemesnext_config.yml下的配置文件里的首页改成 welcome 这个页面:

menu:
  home: /welcome || fa fa-home
  novel: /novel/ || fas fa-book
  about: /about/ || fa fa-user

http://localhost:4000/ 效果如下:
在这里插入图片描述
http://localhost:4000/welcome/ 首页效果如下:
在这里插入图片描述

新建(-p 路径)

小改动:只换了素材或者文字的

网站图标

文件:slangelsBlogthemesnext_config.yml

after

连夜画了一个初步的版本,虽然不太好看吧,但是先换着吧。

图标1.0:
在这里插入图片描述
修改后的代码:

favicon:
  small: /images/sla/swing16.png
  medium: /images/sla/swing32.png
  apple_touch_icon: /images/sla/swing180.png
  safari_pinned_tab: /images/sla/swing.png

效果不知道说什么好,一缩小就完全看不见了:
在这里插入图片描述
看来还是要画简单一点的图。

before

原本的图标:
在这里插入图片描述
favicon 网站图标(在 slangelsBlogthemesnextsourceimages 文件夹里):

  • PNG格式相信大家都知道,看一下最大的一张是180像素的,位深度8,然后分别是32像素和16像素的。
  • SVG格式是矢量图,是可缩放的。
  • 安卓的 manifest.json 不知道是什么东西。

Custom Logo 和 Creative Commons 也不知道是什么东西。

原本的代码:

# ---------------------------------------------------------------
# Site Information Settings 
# ---------------------------------------------------------------

favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /manifest.json

# Custom Logo (Warning: Do not support scheme Mist)
custom_logo: #/uploads/custom-logo.jpg

# Creative Commons 4.0 International License.
# See: https://creativecommons.org/about/cclicenses/
# 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, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: false
  language:

标题、作者、描述

文件:slangelsBlog_config.yml

after

修改的代码:title、description、author

# Site
title: SLAngels
subtitle: ''
description: 'SLAngels的个人博客'
keywords:
author: SLAngels
language: zh-CN
timezone: ''

最后

以上就是淡定手机最近收集整理的关于个人博客(八)Hexo新建文章、主题小修改关于文章小改动:只换了素材或者文字的的全部内容,更多相关个人博客(八)Hexo新建文章、主题小修改关于文章小改动:只换了素材或者文字内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(114)

相关文章

用Github Pages+Hexo搭建博客之(四)创建一篇新文章/草稿(创建&预览&发布)/页面(关于,标签,分类,归档,自定义) #模板(Scaffold) #文件名称&博客标题【置顶】【专栏】用Github Pages+Hexo搭建博客>关于布局(Layout)1.创建一篇新文章hexo new <title>2.草稿:创建&预览&发布3.页面:关于,标签,分类,归档,自定义>关于模板(Scaffold)&自定义>关于文件名称&博客标题
用Github Pages+Hexo搭建博客之(四)创建一篇新文章/草稿(创建&预览&发布)/页面(关于,标签,分类,归档,自定义) #模板(Scaffold) #文件名称&博客标题【置顶】【专栏】用Github Pages+Hexo搭建博客>关于布局(Layout)1.创建一篇新文章hexo new 2.草稿:创建&预览&发布3.页面:关于,标签,分类,归档,自定义>关于模板(Scaffold)&自定义>关于文件名称&博客标题</a></h5> </div> <div class="col-sm-3 col-xs-6"> <a href="/article/k-p-k_13_u_23_o_18_f3_12__23_g5.html" class="img-zoom"> <div class="embed-responsive embed-responsive-4by3"> <img src="https://file2.kaopuke.com:8081/files_image/reation/bcimg8.png" alt="如何在自己搭建的hexo博客上发布文章" class="embed-responsive-item"> </div> </a> <h5 class="text-center"><a href="/article/k-p-k_13_u_23_o_18_f3_12__23_g5.html">如何在自己搭建的hexo博客上发布文章</a></h5> </div> <!-- E 相关文章 --> </div> </div> <div class="clearfix"></div> </div> </div> <div class="panel panel-default" id="comments"> <div class="panel-heading"> <h3 class="panel-title">评论列表<small>共有 <span>0</span> 条评论</small></h3> </div> <div class="panel-body"> <div id="comment-container"> <!-- S 发表评论 --> <div id="postcomment"> <h3>发表评论 <a href="javascript:;"> <small>取消回复</small> </a></h3> <form action="/comment/post.html" method="post" id="postform"> <input type="hidden" name="__token__" value="a6b5827edd8ae2f1bde1a9f65abf13e2" /> <input type="hidden" name="type" value="archives"/> <input type="hidden" name="artid" value="427886"/> <input type="hidden" name="pid" id="pid" value="0"/> <div class="form-group"> <textarea name="content" class="form-control" disabled placeholder="请登录后再发表评论" id="commentcontent" cols="6" rows="5" tabindex="4"></textarea> </div> <div class="form-group"> <a href="/index/user/login.html" class="btn btn-primary">登录</a> <a href="/index/user/register.html" class="btn btn-outline-primary">注册新账号</a> </div> </form> </div> <!-- E 发表评论 --> </div> </div> </div> </main> <aside class="col-xs-12 col-md-4"> <!--@formatter:off--> <!-- S 关于作者 --> <div class="panel panel-default about-author no-padding" data-id="8569" itemProp="author" itemscope="" itemType="http://schema.org/Person"> <meta itemProp="name" content="淡定手机"/> <meta itemProp="image" content="/assets/img/avatar.png"/> <meta itemProp="url" content="/u/k-p-k_12_u_23_o_6_f2_12__10__27__27_.html"/> <div class="panel-body no-padding"> <div class="author-card"> <div class="author-head" style="background-image:url('/assets/img/author-head.jpeg');"></div> <div class="author-avatar"> <a href="/u/k-p-k_12_u_23_o_6_f2_12__10__27__27_.html"> <img src="/assets/img/avatar.png"> </a> </div> <div class="author-basic"> <div class="author-nickname"> <a href="/u/k-p-k_12_u_23_o_6_f2_12__10__27__27_.html">淡定手机</a> </div> <span class="text-muted"></span> </div> <div class="row author-statistics"> <div class="col-xs-4"> <div class="statistics-text">文章</div> <div class="statistics-nums"><a href="/u/k-p-k_12_u_23_o_6_f2_12__10__27__27_.html">8</a></div> </div> <div class="col-xs-4"> <div class="statistics-text">资源</div> <div class="statistics-nums"><a href="/u/k-p-k_12_u_23_o_6_f2_12__10__27__27_.html?type=soft">0</a></div> </div> <div class="col-xs-4"> <div class="statistics-text">加入时间</div> <div class="statistics-nums">3年前</div> </div> </div> </div> </div> </div> <!-- E 关于作者 --> <!--@formatter:on--> <div class="panel panel-blockimg"> </div> <!-- S 热门文章 --> <div class="panel panel-default hot-article"> <div class="panel-heading"> <h3 class="panel-title">热门文章</h3> </div> <div class="panel-body"> <div class="media media-number"> <div class="media-left"> <span class="num tag">1</span> </div> <div class="media-body"> <a class="link-dark" href="/article/k-p-k_12_u_7_ocf5_13_j_2__27_.html" title="Asp木马加密(去掉asp里的%) ">Asp木马加密(去掉asp里的%) </a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">2</span> </div> <div class="media-body"> <a class="link-dark" href="/article/k-p-k_14_u_7_o_18_fx_12__7__6_x.html" title="PhotoShop(PS)将照片文字合成非主流效果实例教程">PhotoShop(PS)将照片文字合成非主流效果实例教程</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">3</span> </div> <div class="media-body"> <a class="link-dark" href="/article/k-p-k_14_u_7_ogf3_14_j_14_y.html" title="解决vant title-active-color与title-inactive-color不生效问题">解决vant title-active-color与title-inactive-color不生效问题</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">4</span> </div> <div class="media-body"> <a class="link-dark" href="/article/k-p-k_14_ujo_26_fw_14__23__22_x.html" title="FFmpeg获取网络摄像头数据解码">FFmpeg获取网络摄像头数据解码</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">5</span> </div> <div class="media-body"> <a class="link-dark" href="/article/k-p-k_14_ujo_18_f2_14__7__18_3.html" title="深入讨论MySQL 8.0中的全局参数持久化">深入讨论MySQL 8.0中的全局参数持久化</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">6</span> </div> <div class="media-body"> <a class="link-dark" href="/article/k-p-k_14_ujo_10_f2_13_zk2.html" title="php怎么解决url中文传参乱码问题">php怎么解决url中文传参乱码问题</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">7</span> </div> <div class="media-body"> <a class="link-dark" href="/article/k-p-k_14_uzo_6_f3_14__23__2_w.html" title="msyql同时建立索引和分开建立索引的区别">msyql同时建立索引和分开建立索引的区别</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">8</span> </div> <div class="media-body"> <a class="link-dark" href="/article/k-p-k_13_u_23_o_18_f3_12__23_g2.html" title="个人博客(八)Hexo新建文章、主题小修改关于文章小改动:只换了素材或者文字的">个人博客(八)Hexo新建文章、主题小修改关于文章小改动:只换了素材或者文字的</a> </div> </div> </div> </div> <!-- E 热门文章 --> <!-- S 热门资讯 --> <div class="panel panel-default hot-article"> <div class="panel-heading"> <h3 class="panel-title">推荐资讯</h3> </div> <div class="panel-body"> </div> </div> <!-- E 热门资讯 --> <div class="panel panel-blockimg"> <a href="https://www.aliyun.com/daily-act/ecs/activity_selection?userCode=2qwpuaqd" rel="nofollow" title="推荐企业服务器" target="_blank"> <img src="/uploads/store/aliyun-sidebar.png" class="img-responsive" alt=""> </a> </div> <!-- S 热门标签 --> <div class="panel panel-default hot-tags"> <div class="panel-heading"> <h3 class="panel-title">热门标签</h3> </div> <div class="panel-body"> <div class="tags"> <a href="/u/k-p-k_12_u_23_o_6_f2_12__10__27__27_/category/k-p-k_14_u_7_ocf4_14_z_14_y.html" class="tag"> <span>JavaScript</span></a> <a href="/u/k-p-k_12_u_23_o_6_f2_12__10__27__27_/category/k-p-k_14_ujo_2_fy_12__23__2_x.html" class="tag"> <span>HTML5</span></a> <a href="/u/k-p-k_12_u_23_o_6_f2_12__10__27__27_/category/k-p-k_14_uzocfy_14__7__10_3.html" class="tag"> <span>加密解密</span></a> <a href="/u/k-p-k_12_u_23_o_6_f2_12__10__27__27_/category/k-p-k_14_uzokfx_12__7__22_0.html" class="tag"> <span>Photoshop教程</span></a> <a href="/u/k-p-k_12_u_23_o_6_f2_12__10__27__27_/category/k-p-k_13_u_23_o_6_f0_12__23__2_1.html" class="tag"> <span>C语言</span></a> <a href="/u/k-p-k_12_u_23_o_6_f2_12__10__27__27_/category/k-p-k_13_u_23_ogfw_13__7_cx.html" class="tag"> <span>MySQL 8.0</span></a> <a href="/u/k-p-k_12_u_23_o_6_f2_12__10__27__27_/category/k-p-k_13_u_23_okf0_13_jc4.html" class="tag"> <span>php</span></a> <a href="/u/k-p-k_12_u_23_o_6_f2_12__10__27__27_/category/k-p-k_13_ujo_26_f0_14__7_c3.html" class="tag"> <span>php综合</span></a> <a href="/u/k-p-k_12_u_23_o_6_f2_12__10__27__27_/category/k-p-k_13_ujocfy_12__7_kz.html" class="tag"> <span>用github建个人博客</span></a> </div> </div> </div> <!-- E 热门标签 --> <!-- S 推荐下载 --> <div class="panel panel-default recommend-article"> <div class="panel-heading"> <h3 class="panel-title">推荐下载</h3> </div> <div class="panel-body"> <div class="media media-number"> <div class="media-left"> <span class="num tag">1</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_f2_14__26__27__27_.html" title="腾讯元宝">腾讯元宝</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">2</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_f1_14__26__27__27_.html" title="VMware安装macOS 15 所有工具">VMware安装macOS 15 所有工具</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">3</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_f1_14__10__27__27_.html" title="Foxit PDF Editor 2024 福昕PDF 中文破解版+安装教程">Foxit PDF Editor 2024 福昕PDF 中文破解版+安装教程</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">4</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_f2_14__10__27__27_.html" title="Liblib ai">Liblib ai</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">5</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_f1_14_g_27__27_.html" title="PDF电子书翻页工具 Flip PDF Plus Corporate v7.1.25 激活版">PDF电子书翻页工具 Flip PDF Plus Corporate v7.1.25 激活版</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">6</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_f1_13_g_27__27_.html" title="文心一言">文心一言</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">7</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_f1_14_w_27__27_.html" title="网络渗透测试软件 Burp Suite Professional 激活版 Win2025.7.4 / Mac2025.7.4">网络渗透测试软件 Burp Suite Professional 激活版 Win2025.7.4 / Mac2025.7.4</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">8</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_f2_13__26__27__27_.html" title="360纳米ai">360纳米ai</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">9</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_f1_13_w_27__27_.html" title="ChatGPT">ChatGPT</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">10</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_f1_12__26__27__27_.html" title="通义千问">通义千问</a> </div> </div> </div> </div> <!-- E 推荐下载 --> <div class="panel panel-blockimg"> <a href="https://www.aliyun.com/daily-act/ecs/activity_selection?userCode=2qwpuaqd" target="_blank"><img src="/uploads/store/enterprisehost.png" class="img-responsive"/></a> </div> <div class="panel panel-blockimg"> <!-- You may also like --> </div> </aside> </div> </div> </main> <footer> <!-- S 底部版权 --> <div id="footer"> <div class="container"> <div class="row footer-inner"> <div class="col-xs-12"> <div class="pull-left"> <p>网站内容,均来自于用户原创和互联网,若有侵犯到您的权益请联系我们,核实删除。</p> <p>本站为非营利性网站,靠谱客的资源均来自网络收集整理,个人纯属学习交流之用,如有侵犯您的版权请与我联系(wx:kaopuke),我们会马上改正并在24小时内删除!</p> <p>Copyright © 2023 All Rights Reserved. <a href="https://beian.miit.gov.cn" rel="nofollow" target="_blank">黔ICP备17011320号-2</a> <a href="https://beian.mps.gov.cn/#/query/webSearch?code=52272602002071" rel="noreferrer" target="_blank">贵公网安备52272602002071</a></p> </div> </div> </div> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?e749fb7b04b857116f3a8b682641b74d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!-- E 底部版权 --> </footer> <div id="floatbtn"> <!-- S 浮动按钮 --> <a class="hover" href="/index/user/addarticle.html" target="_blank"> <i class="fa fa-paint-brush fa-lg"></i> <em>立即<br>投稿</em> </a> <div class="floatbtn-item floatbtn-share"> <i class="fa fa-share-alt fa-lg"></i> <div class="floatbtn-wrapper" style="height:50px;top:0"> <div class="social-share" data-initialized="true" data-mode="prepend"> <a href="#" class="social-share-icon icon-weibo" target="_blank"></a> <a href="#" class="social-share-icon icon-qq" target="_blank"></a> <a href="#" class="social-share-icon icon-qzone" target="_blank"></a> <a href="#" class="social-share-icon icon-wechat"></a> </div> </div> </div> <a id="back-to-top" class="hover" href="javascript:;"> <i class="fa fa-reply fa-lg"></i> <em>返回<br>顶部</em> </a> <!-- E 浮动按钮 --> </div> <script type="text/javascript" src="/assets/libs/jquery/dist/jquery.min.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/libs/bootstrap/dist/js/bootstrap.min.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/libs/fastadmin-layer/dist/layer.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/libs/art-template/dist/template-native.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/js/jquery.autocomplete.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/js/swiper.min.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/js/share.min.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/js/cms.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/js/common.js?v=1.0.2"></script> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6850766", container: "_upguagn2t8", async: true }); (window.slotbydup = window.slotbydup || []).push({ id: "u6850838", container: "_12s5gcmjcvx", async: true }); </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" ></script> <!-- 复制 --> <script src="/static/tool/clipboard.min.js"></script> <script> //代码高亮溢出显示滚动条 $('.main-content pre').each(function(){ var code = $(this).text(); $(this).wrap('<div class="auto" style="overflow:auto; position:relative;"></div>'); $(this).before('<span class="copyCode">复制代码</span><textarea style="display:none;">'+code+'</textarea>'); $(this).removeAttr("style",""); // $(this).wrap('<pre><code></code></pre>'); }); $('.main-content .codebody').each(function(){ var code = $(this).text(); $(this).wrap('<div class="auto" style="overflow:auto; position:relative;"></div>'); $(this).before('<span class="copyCode">复制代码</span><textarea style="display:none;">'+code+'</textarea>'); // $(this).wrap('<pre><code></code></pre>'); }); function unescapeSpecialChars(str) { return str .replace(/</g, '<') .replace(/>/g, '>') .replace(/&/g, '&') .replace(/ /g, ' ') .replace(/"/g, '"') .replace(/'/g, '\''); } //复制代码 $('.copyCode').on('click',function(){ var txt = $(this).next().html(); txt = unescapeSpecialChars(txt); new ClipboardJS('.copyCode', {text: function() {return txt;}}); layer.msg('复制成功',{time:1000,offset:'100px'}); }); </script> <script> document.addEventListener("DOMContentLoaded", function() { const preElements = document.querySelectorAll("pre"); // 获取所有 <pre> 元素 preElements.forEach(pre => { const codeText = pre.innerHTML.trim(); // 获取代码块的内容 const lines = codeText.split("\n").length; // 计算代码行数 // 创建行号容器 const lineNumbers = document.createElement("div"); lineNumbers.className = 'line-numbers'; // 生成行号内容 let lineNumbersHtml = ''; for (let i = 1; i <= lines; i++) { lineNumbersHtml += i + '<br>'; } // 插入行号容器到 pre 元素中 lineNumbers.innerHTML = lineNumbersHtml; pre.appendChild(lineNumbers); // 保持代码块的格式化 pre.innerHTML = `<div class="line-numbers">${lineNumbersHtml}</div>` + `<div style="padding:5px 0 5px 43px;">${codeText}</div>`; }); }); </script> <style> .copyCode{ position:absolute; right:1px; z-index:999; background:rgba(255,255,255,0.5); border-bottom:1px solid #ddd; padding:2px 8px; font-size:11px !important; border-radius:4px; line-height:24px; cursor:pointer; } .copyCode:hover{ background:#fff; } pre code{ font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace; } .hljs { border-radius:4px; padding: 8px !important; } .hljs-ln td { padding: 2px 8px; } .hljs-ln-numbers { text-align: center; color: #abb2bf; background-color: #282c34; border-right: 1px solid #c5c5c5; vertical-align: top; } /* for block of code */ td .hljs-ln-code { padding-left: 5px; } pre { position: relative; padding-left: 5px; /* 为行号留出空间 */ background-color: #f8f9fa; border: 1px solid #e1e1e1; border-radius: 4px; font-size: 14px; line-height: 1.5; overflow-x: auto; } pre div { line-height: 26px; } /* 设置行号样式 */ pre .line-numbers { position: absolute; left: 0; top: 0; padding: 10px 10px; background-color: #f1f1f1; border-right: 1px solid #e1e1e1; text-align: right; user-select: none; color: #888; } *,:after,:before { border: 0 solid #e3e3e3; box-sizing: border-box; } .article-text table { --tw-border-spacing-x: 0px; --tw-border-spacing-y: 0px; border-collapse: separate; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); margin-bottom: .25rem; margin-top: .25rem; width: 100%; } .article-text :where(thead):not(:where([class~=not-prose] *)) { border-bottom-color: rgb(209, 213, 219); border-bottom-width: 1px; } .article-text th:last-child { border-right-width: 1px; border-top-right-radius: .375rem; padding-right: .75rem; } .article-text th { border-left-width: 1px; } .article-text th:first-child { border-top-left-radius: .375rem; padding-left: .75rem; } .article-text th { border-left-width: 1px; background-color: rgba(0, 0, 0, 0.1) ; border-bottom-width: 1px; border-color: rgba(0, 0, 0, 0.1) ; border-top-width: 1px; padding: .25rem .75rem; } .article-text tr { border-bottom-color: var(--tw-prose-td-borders); border-bottom-width: 1px; } .article-text tr:first-child { padding-left: .75rem; } .article-text tbody tr:last-child td:first-child { border-bottom-left-radius: .375rem; } .article-text td:last-child { border-right-width: 1px; padding-right: .75rem; } .article-text td:first-child { padding-left: .75rem; } .article-text td { border-left-width: 1px; } .article-text :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose] *)) { padding-left: 0; } .article-text td { border-bottom-width: 1px !important; border-color: rgba(0, 0, 0, 0.1) ; padding: .25rem .75rem; } </style> </body> </html>