主题介绍

github

直接整个下载,作为博客的根目录,在此基础上配置

初级配置

官方文档

参考文档可以完成大部分主流配置

cdn

百度搜索例如 jsDelivr+github搭建免费的cdn 的关键字

$ https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径
# 栗子：
$ https://cdn.jsdelivr.net/gh/Fofade/cnblogsThemes@1.0/live2dw/assets/z16.model.json # 加载1.0版本

# 注意： 如果不加  @发布的版本号  默认加载最新版本
# 栗子：
$ https://cdn.jsdelivr.net/gh/Fofade/cnblogsThemes/live2dw/assets/z16.model.json # 加载最新版本

进阶配置

主要参考 博客链接

这篇超好用 博客链接

作者的 bilibili

某个使用该主题的大佬，很喜欢他的博客博客链接

切换背景

第一次尝试上面博客提供的切换背景方法失败

于是百度到如下方法 另一篇博客

修改文件 \themes\Sakura\layout\_partial\footer.ejs

在 </footer> 前添加如下代码

  <!--壁纸切换-->
  <div class="skin-menu no-select" id="mainskin"  style="position: fixed">
    <div class="theme-controls row-container">
        <ul class="menu-list">
            <li id="white-bg"> <i class="fa fa-television" aria-hidden="true"></i></li>
            <li id="sakura-bg"> <i class="iconfont icon-sakura"></i></li>
            <li id="gribs-bg"> <i class="fa fa-slack" aria-hidden="true"></i></li>
            <li id="KAdots-bg"> <i class="iconfont icon-dots"></i></li>
            <li id="totem-bg"> <i class="fa fa-optin-monster" aria-hidden="true"></i></li>
            <li id="pixiv-bg"> <i class="iconfont icon-pixiv"></i></li>
            <li id="bing-bg"> <i class="iconfont icon-bing"></i></li>
            <li id="dark-bg"> <i class="fa fa-moon-o" aria-hidden="true"></i></li>
        </ul>
    </div>
    <div class="font-family-controls row-container">
        <button type="button" class="control-btn-serif selected" data-mode="serif" onclick="mashiro_global.font_control.change_font()">Serif</button>
        <button type="button" class="control-btn-sans-serif" data-mode="sans-serif" onclick="mashiro_global.font_control.change_font()">Sans Serif</button>
    </div>
  </div>   
  <canvas id="night-mode-cover"></canvas> 
    <div class="changeSkin-gear no-select">
      <div class="keys" id="setbtn"> <span id="open-skinMenu"> 切换壁纸 | SCHEME TOOL 
        &nbsp;<i class="iconfont icon-gear inline-block rotating"></i> </span></div>
  </div><!--skin.end-->

但是令人震惊的是，之前博客的方法突然又起效了。

背景动画

参考博客

花瓣飘落、文字，爱心，连线，飘动的彩带

修改文件 \themes\Sakura\layout\_partial\footer.ejs

    <!--浏览器搞笑标题-->
    <script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/hititle.js"></script>
    <!-- 🌸飘落 -->
    <script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/sakura.js"></script>
    <!-- 雪花飘落 -->
    <!-- <script src="https://cdn.jsdelivr.net/gh/Yafine/cdn@2.5/source/js/snow1.js"></script> -->
    <!-- // 文字 -->
    <script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/shehuizhuyi.js"></script>
    <!-- // 烟花 -->
    <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
    <script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/gh/Yafine/cdn@2.5/source/js/fireworks.js"></script>
    <!-- // 星星跟随坠落 -->
    <script src="https://cdn.jsdelivr.net/gh/cungudafa/cdn@2.1.2/js/cursor.js"></script>
    <!-- // 爱心 -->
    <script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/love.js"></script>
    <!-- // 连线 -->
    <!-- <script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/canvas-nest.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script> -->
    <!-- 样式二（飘动的彩带） -->
    <script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/piao.js" type="text/javascript"></script>
     <!--背景切换-->
     <script src="//instant.page/3.0.0" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>

添加页面底部图片

修改文件 \themes\Sakura\layout\_partial\footer.ejs

在一堆 <script type="",url=""> 之间(其实我不清楚插哪不可以反正这里可以)插入 

<center>
  <img src="">
</center>

代码渲染问题

根目录下的 _config.yml 文件

highlight: 
  enable: false
  line_number: false
  auto_detect: false
  tab_replace:

上面三个选项之前全写了 true 导致渲染出错

置顶 和 加密

参考博客

按照博客里的一步一步做

关于置顶标签的问题，也确实是找不到放哪里哭了

不过勇于尝试多次之后就找到一个较为合适的位置了。。略

修改字体

2020-03-20

巨佬博客

一个不太大众的博客主题最糟心的事情估计是技术博客不好找吧

也可能是之前用的 Next 主题太火了，把我惯坏了

不过这个大佬是用 Wordpress 搭建的，和 Hexo 有很大的出入

不过还是可以借鉴模仿的(不会网页语言的我感到自己好厉害)

在这个文件 \themes\Sakura\source\css\style.css

找到里面的关键词 font-family:

类似 font-family:Arial,Helvetica,sans-serif;

这后面就是字体,虽然有很多个,但经过我的盲目分析,显示的应该是第一个

然后你改一下第一个就好…

不过文件中有好多,应该是不同地方用不同字体,至于具体什么地方,看括号外名字猜测吧

暂时不知道外部字体的导入方法,你可以改成一些常用字体或系统自带的字体吧

修改 关于-我 中的对话内容

2020-03-21

修改文件 \themes\Sakura\source\js\botui.js

图片放大

2020-03-21

在 .md 插入图片时使用如下代码

<img src="" data-action="zoom">

效果演示

内容折叠

2020-03-22

参考博客

找这个教程也是把我气的，一搜索全是 next 的教程


HTML语法测试

代码渲染失败

cpp int main() { return 0; }

仿Github文章日历

2020-03-23

博客链接

另注 博客末尾中给出的style并不完美(长度宽度设置)，这里提供此博客版本

<style type="text/css">
  #contentss {
  position: relative;
  width: 80%;
  height: auto;
  max-height: 1200px;
  margin-bottom: 15px;
  margin-top: 15px;
  text-align: center;
  border: 0;
  border-radius: 10px;
  color: rgba(0, 0, 0, .87);
  background: #fff 50%;
  background-size: cover;
  box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07);
  margin:0 auto;
  }
</style>

随机图片

2020-03-24

网址1

网址2

经测试应该可以直接作为 post 的 photos

不过鉴于我的博客是由之前的博客换主题而来的，之前的文章都没有封面

一个一个写岂不是太麻烦了？一劳永逸不香吗

修改\themes\Sakura\layout\_widget\common-article.ejs

<% if (post.photos && post.photos.length){ %>
  <div class="pattern-center single-center">
    <!-- 有配图默认渲染第一张 -->
    <div class="pattern-attachment-img lazyload" style="background-image: url(<%= post.photos[0] %>);" src="<%- theme.lazyloadImg%>" data-src="<%= post.photos[0] %>">
    </div>
    <header class="pattern-header single-header">
      <h1 class="entry-title">
      <%- post.title %></h1>
      <p class="entry-census">
        <span>
          <a href="<%- post.authorLink%>">
            <img src="<%- post.avatar%>">
          </a>
        </span>
        <span>
          <a href="<%- post.authorLink%>"><%- post.author %></a>
        </span>
        <span class="bull">
        ·</span>
        <%= date(post.date, 'YYYY-M-D') %><span class="bull">
        ·</span>
      <span id="busuanzi_value_page_pv"></span>次阅读</p>
    </header>
  </div>
<% } %>

修改为

<!-- 有配图默认渲染第一张 -->
  <% if (post.photos && post.photos.length){ %>
  <div class="pattern-attachment-img lazyload" style="background-image: url(<%= post.photos[0] %>);" src="<%- theme.lazyloadImg%>" data-src="<%= post.photos[0] %>">
  </div>
  <% } else { %>
  <div class="pattern-attachment-img lazyload" style="background-image: url(https://random.52ecy.cn/randbg.php);" src="<%- theme.lazyloadImg%>" data-src="https://random.52ecy.cn/randbg.php">
  </div>
  <% } %>
  <header class="pattern-header single-header">
    <h1 class="entry-title">
    <%- post.title %></h1>
    <p class="entry-census">
        <span>
          <a href="<%- post.authorLink || 'https://kaizynx.github.io/' %>">
            <img src="<%- post.avatar || 'https://cdn.jsdelivr.net/gh/KaizynX/cdn/img/custom/avatar.jpg' %>">
          </a>
        </span>
        <span>
          <a href="<%- post.authorLink || 'https://kaizynx.github.io/' %>"><%- post.author || 'Kaizyn' %></a>
        </span>
        <span class="bull">
        ·</span>
        <%= date(post.date, 'YYYY-M-D') %><span class="bull">
        ·</span>
    <span id="busuanzi_value_page_pv"></span>次阅读</p>
  </header>
</div>

修改 \themes\Sakura\layout\_widget\index-items.ejs

大概第六行

      <img class="lazyload" onerror="imgError(this,3)" src="<%- theme.lazyloadImg%>" data-src="<%= post.photos[0] || 'https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/image-404.png' %>">

      <img class="lazyload" onerror="imgError(this,3)" src="<%- theme.lazyloadImg%>" data-src="<%= post.photos[0] || 'https://random.52ecy.cn/randbg.php' %>">

但是这么改糟糕的就是可能很多图是一样的,暂时没找到解决方法呢。。不过也总比404强了吧

最后

从昨晚一直折腾到今天下午三点半，总算是初步建立好了，累die

总的来说，想折腾一个好看的博客，可能并不是需要你学多少专业的知识，会多少专业的技能

而是看你有没有耐心，一颗坚持不懈的狂热的心

你需要的是借鉴模仿，以及如何从百度等搜索引擎找到解决问题方法的能力

赏