test-markdown

Markdown文档预览

页面配置进度

logo添加 ✅

菜单/目录 ✅

代码块 ✅ 样式部分有些不满意，后续可能会找其他css(结果设置了文章页的banner之后还意外的搭配，不改了hh)

想有一张自己拍的星空照片做banner ❎

文章banner存在一个优先级的问题。我想将配置文件的 default_top_img作为所有文章的默认banner，但如果文章在front-matter设置了cover，由于cover的最高优先级，文章banner会变成cover值 ✅ 解决方法：添加top_img在front-matter中，让所有的页面banner地址都一样。

自定义footer ✅ 可能存在的问题，在main.js直接调用了一次refreshBlogRunningTime()这个自定义的blog运行时间函数，能改写到footer?也不对哦，footer在所有页面都有，这么写应该也没问题！

⬆️(newest) 还是觉得在main里面直接改太不优雅了。参考文档里引入自定义css的方式，在source/self/custom-footer.js引入自定义refreshBlogRunningTime()，然后去_config.butterfly.yml中inject自定义js，搞定！✅

修改首页的title和subtitle，在themes/butterfly/layout/includes/header/index.pug里面

❎ 优化seo bing/google/baidu/cloudflare

❎ 配置robots.txt反扒

配置详情

不同的quote是否匹配相同样式？

引用2，康康css

css样式，估计超出div的问题就在这里

/* Highlight.js */
code[hljs-codeblock-inner] {
  line-height: 1.5;
  font-size: 16px;
  border-radius: 100px;
  padding: 22px 20px;
  border-radius: 8px;
  box-shadow: rgba(0,0,0,0.2) 0px 5px 20px;
  margin-top: 15px !important;
  margin-bottom: 15px !important;
  padding-top: 55px;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTcwODgxMzc1MTA3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM0MTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik05NTQuMzA0IDE5MC4zMzZhMTUuNTUyIDE1LjU1MiAwIDAgMSAwIDIxLjk1MmwtMzAwLjAzMiAzMDAuMDMyIDI5OC41NiAyOTguNTZhMTUuNjE2IDE1LjYxNiAwIDAgMSAwIDIyLjAxNmwtMTIwLjk2IDEyMC44OTZhMTUuNTUyIDE1LjU1MiAwIDAgMS0yMS45NTIgMEw1MTEuMzYgNjU1LjIzMiAyMTQuMjcyIDk1Mi4zMmExNS41NTIgMTUuNTUyIDAgMCAxLTIxLjk1MiAwbC0xMjAuODk2LTEyMC44OTZhMTUuNDg4IDE1LjQ4OCAwIDAgMSAwLTIxLjk1MmwyOTcuMTUyLTI5Ny4xNTJMNjkuODg4IDIxMy43NmExNS41NTIgMTUuNTUyIDAgMCAxIDAtMjEuOTUybDEyMC44OTYtMTIwLjg5NmExNS41NTIgMTUuNTUyIDAgMCAxIDIxLjk1MiAwTDUxMS4zNiAzNjkuNDcybDMwMC4wOTYtMzAwLjAzMmExNS4zNiAxNS4zNiAwIDAgMSAyMS45NTIgMGwxMjAuODk2IDEyMC44OTZ6IiBwLWlkPSIzNDExIiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+PC9zdmc+) no-repeat 50% 50% !important;

}
.hljs-ln-numbers {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
  vertical-align: top;
  padding-right: 12px !important;
  position: absolute;
  left: 20px;
  width: 30px;
  overflow-x: visible !important;
  transition: all .3s ease;
}
.hljs-ln-numbers:before {
  content: '';
  position: absolute;
  left: -20px;
  width: 20px;
  height: 100%;
  background: inherit;
}
.hljs-ln-code {
  padding-left: 30px !important;
  transition: all .3s ease;
}
pre.hljs-codeblock.hljs-break-line .hljs-ln-code {
  line-break: anywhere;
  white-space: break-spaces;
}
code[hljs-codeblock-inner]::-webkit-scrollbar-track{
  border: none;
  background: transparent !important;
}
code[hljs-codeblock-inner]::-webkit-scrollbar-thumb{
  background: rgba(255, 255, 255, .3) !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 10px;
  transition: background .3s ease;
}
code[hljs-codeblock-inner]::-webkit-scrollbar-thumb:hover{
  background: rgba(255, 255, 255, .5) !important;
}
code[hljs-codeblock-inner]::-webkit-scrollbar{
  background: transparent;
  height: 6px;
}
code[hljs-codeblock-inner] *::selection {
  background-color: rgba(204, 226, 255, 0.2) !important;
}
pre.hljs-codeblock.hljs-codeblock-fullscreen {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10000;
  margin: 0 !important;
  animation: codeblock-fullscreen 0.5s cubic-bezier(0.18, 0.89, 0.37, 1.12);
}
pre.hljs-codeblock.hljs-codeblock-fullscreen > code[hljs-codeblock-inner]{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 0;
  margin: 0 !important;
}
pre.hljs-codeblock.hljs-codeblock-fullscreen:before{
  z-index: 10001;
}
@keyframes codeblock-fullscreen{
  0%{
    transform: scale(.5);
    opacity: 1;
  }
  100%{
    transform: none;
    opacity: 1;
  }
}
pre.hljs-codeblock.hljs-hide-linenumber .hljs-ln-numbers.hljs{
  width: 0px;
  opacity: 0;
}
pre.hljs-codeblock.hljs-hide-linenumber .hljs-ln-code {
  padding-left: 4px !important;
}

为了自定义footer，html转pug

#footer-wrap
  .github-badge
    span.badge-subject
      i.fa.fa-copyright
      |  Copyright 
    span.badge-value.bg-red
      a(href='https://github.com/Sherrinford16/Sherrinford16.github.io', target='_blank', one-link-mark='yes')
        | 2023  夏福
  .github-badge
    span.badge-subject
      i.fa.fa-clock
      |  Running Time
    span.badge-value.bg-apricots
      span#blog_running_days.odometer.odometer-auto-theme
      |  days 
      span#blog_running_hours.odometer.odometer-auto-theme
      |  H 
      span#blog_running_mins.odometer.odometer-auto-theme
      |  M 
      span#blog_running_secs.odometer.odometer-auto-theme
      |  S

  if theme.footer.owner.enable
    - var now = new Date()
    - var nowYear = now.getFullYear()
    if theme.footer.owner.since && theme.footer.owner.since != nowYear
      .copyright!= `©${theme.footer.owner.since} - ${nowYear} By ${config.author}`
    else
      .copyright!= `©${nowYear} By ${config.author}`
  if theme.footer.copyright
    .framework-info
      span= _p('footer.framework') + ' '
      a(href='https://hexo.io')= 'Hexo'
      span.footer-separator |
      span= _p('footer.theme') + ' '
      a(href='https://github.com/jerryc127/hexo-theme-butterfly')= 'Butterfly'
  if theme.footer.custom_text
    .footer_custom_text!=`${theme.footer.custom_text}`
  

js部分

// custom-footer.js
const refreshBlogRunningTime = () => {
  const blog_running_days = document.getElementById("blog_running_days");
  const blog_running_hours = document.getElementById("blog_running_hours");
  const blog_running_mins = document.getElementById("blog_running_mins");
  const blog_running_secs = document.getElementById("blog_running_secs");

  const time = new Date() - new Date(2023, 8, 15, 0, 0, 0);
  const d = parseInt(time / 24 / 60 / 60 / 1000);
  const h = parseInt((time % (24 * 60 * 60 * 1000)) / 60 / 60 / 1000);
  const m = parseInt((time % (60 * 60 * 1000)) / 60 / 1000);
  const s = parseInt((time % (60 * 1000)) / 1000);

  blog_running_days.innerHTML = d;
  blog_running_hours.innerHTML = h;
  blog_running_mins.innerHTML = m;
  blog_running_secs.innerHTML = s;
}

refreshBlogRunningTime();

if (typeof bottomTimeIntervalHasSet === "undefined") {
  window.bottomTimeIntervalHasSet = true;
  setInterval(refreshBlogRunningTime, 500);
}

标签外挂

在 Hexo 中，标签外挂（Tag Plugins）是一种允许用户在 Markdown 文档中插入自定义内容的方法。它们为用户提供了一种非常简单的方式，通过简短的标签，插入 HTML、JS 或其他类型的代码到文章或页面中。

剪刀石頭布

Butterfly样式库.

jerryc 🦋 A Hexo Theme: Butterflygithub.com/jerryc127/hexo-theme-butterfly

inline有什么作用？ 显示
在文本里面添加按鈕隱藏內容，只限文字( content不能包含英文逗號，可用&sbquo)

Mermaid文档

Mermaidmermaid.js.org/intro

$$\hat{i}$$

then➡️ $\hat{i}$

配置主页title

header#page-header(class=`${isHomeClass+isFixedClass}` style=bg_img)
  !=partial('includes/header/nav', {}, {cache: true})
  if top_img !== false
    if is_post()
      include ./post-info.pug
    else if is_home() 
      #site-info
        h1#site-title='' // h1#site-title=site_title，首页的title固定为blog的名字，隐藏了
        if theme.subtitle.enable
          - var loadSubJs = true
          #site-subtitle
            span#subtitle
        if(theme.social)
          #site_social_icons
            !=partial('includes/header/social', {}, {cache: true})
      #scroll-down
        i.fas.fa-angle-down.scroll-down-effects
    else
      #page-site-info
        h1#site-title=site_title

一个不错的设置文档：Butterfly 博客主题搭建系列：基础教程 | 枫叶 (aqcoder.cn)