博客魔改教程总结(一)
 Invalid Date 未分类 2095 字  hexobutterfly
博客魔改教程总结(一)
智能摘要
Post-Abstract-AI

仿轻笑博客背景美化

原作者 {% link 轻笑Chuckle,漫天倾尘 风中轻笑,https://qcqx.cn/ %}

1.前言

因为这部分内容轻笑并没有有关于这个内容，所以我在这里写好了，方便以后查找

2.教程开始

  • 在 BlogRoot\themes\butterfly\layout\includes\head.pug 中引入 div模块
pug
#web_bg
#svg_bg
  • 在自定义css里面引入以下样式
css
#web_bg {
    position: fixed;
    z-index: -999;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(35deg, #0095c2 21%, #64e1C8f9 100%);
    background: -moz-linear-gradient(35deg, #0095c2 21%, #64e1C8f9 100%);
    background: -o-linear-gradient(35deg, #0095c2 21%, #64e1C8f9 100%);
    background: -ms-linear-gradient(35deg, #0095c2 21%, #64e1C8f9 100%);
    background: linear-gradient(55deg, #0095c2 21%, #64e1C8f9 100%);
    background-attachment: local;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
}
#svg_bg {
    background-image: url(https://www.myxz.top/img/background.svg);
    -webkit-background-size: initial;
    -moz-background-size: initial;
    background-size: initial;
    position: fixed;
    height: 100%;
    width: 100%;
    opacity: .2;
    background-position: center;
    z-index: -998;
}

侧边栏美化以及侧边栏卡片美化（轻笑）

原作者 {% link 轻笑Chuckle,漫天倾尘 风中轻笑,https://qcqx.cn/ %}

1. 前言

因为这部分内容轻笑并没有有关于这个内容，所以我在这里写好了，方便以后查找，喜欢这个风格的可以进行CTRL+C和CTRL+V

2. 教程开始

大部分已经有进行标识，对于以后可以进行维护

{% endfolding %}

首页文章卡片美化（轻笑）

原作者 {% link 轻笑Chuckle,漫天倾尘 风中轻笑,https://qcqx.cn/ %}

1. 前言

因为这部分内容轻笑并没有有关于这个内容，所以我在这里写好了，方便以后查找，喜欢这个风格的可以进行CTRL+C和CTRL+V

2. 在BlogRoot\source\css下新建自定义css并粘贴：

首页文章隐藏文字

效果来源 {% link 轻笑Chuckle,漫天倾尘 风中轻笑,https://qcqx.cn/ %}

这种隐藏文字的方式可以给大家展示出来，整个效果是非常可观的。

CSS
#recent-posts>.recent-post-item:hover .recent-post-info .content {
    opacity: 1;
    line-height: 1.5;
    transition: all .3s
}

#recent-posts>.recent-post-item:hover .recent-post-info {
    top: 0;
    transition: all .3s
}

#recent-posts>.recent-post-item>.recent-post-info>.content {
    opacity: 0;
    line-height: .7;
    transition: all .3s;
    bottom: 0
}

首页文章卡片美化

效果来源 {% link 轻笑Chuckle,漫天倾尘 风中轻笑,https://qcqx.cn/ %}

既然已经添加了文章文字隐藏，那么就可以进行美化文章卡片

首页分类条美化

效果来源 {% link 轻笑Chuckle,漫天倾尘 风中轻笑,https://qcqx.cn/ %} {% link 魔改笔记七：分类条及外链卡片,清羽飞扬,https://blog.liushen.fun/posts/a64defb4/ %}

教程基于清羽飞扬的教程和轻笑的样式进行魔改，感兴趣的可以去看。

1. 添加模块文件

在BlogRoot\themes\butterfly\layout\includes中新建categoryBar.pug

PUG
.home-catalog-bar#catalog-bar
  i.fa-fw.fas.fa-shapes
  #catalog-list(class=is_home() ? 'home' : '')
    .category-bar-item.catalog-shouye-item(class=is_home() ? 'select' : '', id="home-catalog-item")
      a(href=url_for('/'))= __('博客')
    each item in site.categories.find({ parent: { $exists: false } }).data
      .category-bar-item(class=select ? (select === item.name ? 'select' : '') : '', id=item.name)
        a(href=url_for(item.path))= item.name
  a.category-bar-more(href=url_for('/categories/'))= __('更多分类')

2. 添加指定文件

然后将其添加到不同的位置，比如我这里实现了添加到分类页面等位置，配合上pjax可以做到无刷更新，效果很好，打开分类文件地址：BlogRoot\themes\butterfly\layout\category.pug和主页文件地址：BlogRoot\themes\butterfly\layout\index.pug，添加其中两行代码，去掉加号即为正常缩进。这个和原教程基本一样 {% tabs 分栏 %}

{% note warning flat %} 注意：修改后需要将配置文件中，分类页面的主题改成index，否则不会显示。 {% endnote %}

PUG
extends includes/layout.pug

block content
  if theme.category_ui == 'index'
    include ./includes/mixins/post-ui.pug
    #recent-posts.recent-posts.category_ui
+      #category-bar.category-bar
+        include includes/categoryBar.pug
      +postUI
      include includes/pagination.pug
  else
    include ./includes/mixins/article-sort.pug
    #category
      <div id="categories-chart" data-parent="true" style="height: 300px; padding: 10px;"></div>
      .article-sort-title= _p('page.category') + ' - ' + page.category
      +articleSort(page.posts)
      include includes/pagination.pug
PUG
extends includes/layout.pug

block content
  include ./includes/mixins/post-ui.pug
  #recent-posts.recent-posts
+    #category-bar.category-bar
+      include includes/categoryBar.pug
    +postUI
    include includes/pagination.pug

{% endtabs %}

3. 引入样式

在BlogRoot\source\css\custom.css自定义样式的文件中引入如下代码（这是我的，你可以自行微调）：

{% note warning flat %} 注意：要想实现点击切换后，高亮部分跟随分类页面走的部分，需要修改源码，打开BlogRoot\themes\butterfly\source\js\main.js，添加js函数，比如我添加到了778行左右，switchComments函数的上面：

JS
/**
   * 切换类别表
   */ 
  const setCategoryBarActive = () => {
    const categoryBar = document.querySelector("#category-bar");
    const currentPath = decodeURIComponent(window.location.pathname);
    const isHomePage = currentPath === GLOBAL_CONFIG.root;

    if (categoryBar) {
        const categoryItems = categoryBar.querySelectorAll(".category-bar-item");
        categoryItems.forEach(item => item.classList.remove("select"));

        const activeItemId = isHomePage ? "category-bar-home" : currentPath.split("/").slice(-2, -1)[0];
        const activeItem = document.getElementById(activeItemId);

        if (activeItem) {
            activeItem.classList.add("select");
        }
    }
};

4. 添加js代码

然后再在引用部分执行这个函数，在同一个文件，找到下面的函数并添加函数的调用，位置看下方注释:

JS
window.refreshFn = function () {
  initAdjust()

  if (GLOBAL_CONFIG_SITE.isPost) {
    GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice()
    GLOBAL_CONFIG.relativeDate.post && relativeDate(document.querySelectorAll('#post-meta time'))
  } else {
    GLOBAL_CONFIG.relativeDate.homepage && relativeDate(document.querySelectorAll('#recent-posts time'))
    GLOBAL_CONFIG.runtime && addRuntime()
    addLastPushDate()
    toggleCardCategory()
    setCategoryBarActive()      // 切换类别栏目
  }

博客魔改教程总结(一)

作者

缘之境

许可协议

即刻短文的三种部署方案
功能美化

评论

评论加载中...