首页 > 其他分享 >博客园主题美化(SimpleMemory 主题)

博客园主题美化(SimpleMemory 主题)

时间:2023-03-20 11:11:14浏览次数:44  
标签:github leader755 博客园 主题 gitee https SimpleMemory com

参考地址:https://cloud.tencent.com/developer/article/1953331

文档参考:https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v1.1/#/**

window.cnblogsConfig配置详情见:https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v1.1/#/Docs/Customization/config

1.主题效果

https://www.cnblogs.com/linzhifen5/

2.主题介绍

主题使用的 SimpleMemory 这款主题,看完本教程后你能搭出相同美化的博客园主题博客了,也可按照官方教程调整细节或者新增部分功能。
github 官网:https://github.com/BNDong/Cnblogs-Theme-SimpleMemory
官方教程:https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v1.1/#/

3.设置主题并申请 js 代码权限

  1. 进入管理>设置>博客设置>设置
  2. 博客主题>选择 SimpleMemory 主题
  3. 勾选申请 js 权限,填写开通的理由等待管理员审核通过(等待 10min 左右)。

4.覆盖默认的 css

  1. 进入 SimpleMemory 的 github 仓库,将 src/style/base.min.css 代码复制
  2. 将复制到的 css 粘贴到 css 代码块中,并且勾选上 禁用默认 css
  3. 点击保存,强制刷新局可以看到基本样式出来了

5.侧边栏公告的基本配置

侧边栏公告中将以下代码粘贴

<script type="text/javascript">
    window.cnblogsConfig = {
        GhVersions    : 'v1.3.3', // 版本(不需要改动)
        blogUser      : "userName", // 用户名
        blogAvatar    : "https://xxxx.png", // 用户头像
        blogStartDate : "2016-11-17", // 入园时间,年-月-日。入园时间查看方法:鼠标停留园龄时间上,会显示入园时间
    }
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/[email protected]/src/script/simpleMemory.min.js" defer></script>

6.菜单栏拓展功能(可选)

  1. 菜单栏扩展
  2. 打赏码配置
  3. 夜间模式配置
<script type="text/javascript">
    window.cnblogsConfig = {
        GhVersions    : 'v1.3.3', // 版本
        blogUser      : "leader755", // 用户名
        blogAvatar    : "https://gitee.com/leader755/imagehost/raw/master/blog/wx_avatar.png", // 用户头像
        blogStartDate : "2018-03-105", // 入园时间,年-月-日。入园时间查看方法:鼠标停留园龄时间上,会显示入园时间
        webpageTitleOnblur: '(o゚v゚)ノ风里雨里,我再这里等你',
        webpageIcon: "https://gitee.com/leader755/imagehost/raw/master/blog/wx_avatar.webp",
        menuNavList: [ // 列表数据 ['导航名称', '链接', 'icon']
            ['Blog', 'https://www.leader755.com', 'icon-blog-solid'],
            ['yuque', 'https://www.yuque.com/leader755', 'icon-logo'],
            ['github', 'https://github.com/Leader755/', 'icon-github'],
            ['gitee', 'https://gitee.com/leader755', 'icon-gitee'],
            ['cnblogs', 'https://www.cnblogs.com/', 'icon-cnblogs']
        ],
        switchDayNight:{
            enable: true,       // 是否开启日/夜间模式切换按钮
            auto: {             // 自动切换相关配置
                 enable: false,  // 开启自动切换
                 dayHour: 5,     // 日间模式开始时间,整数型,24小时制
                 nightHour: 19   // 夜间模式开始时间,整数型,24小时制
            }
       },
       homeBannerTextType: "one",
       reward: {  //赞赏码功能
          enable: true,
          wechatpay: 'https://gitee.com/leader755/imagehost/raw/master/blog/wxz.jpg',
          alipay: 'https://gitee.com/leader755/imagehost/raw/master/blog/zfb.jpg'
      },
      weChatOfficialAccounts: 'https://gitee.com/leader755/imagehost/raw/master/blog/wxgzh.jpg',
      essayCodeHighlighting: "a11y-dark"
   }
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/[email protected]/src/script/simpleMemory.min.js" defer></script>

7.配置音乐播放器功能(可选)

将以下代码直接粘贴在页脚 HTML 代码 位置

  <style>
  @media only screen and (max-width: 767px){
  #sidebar_search_box input[type=text]{width:calc(100% - 24px)}
  }
  </style>

  <!--音乐-->
  <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/elkyo/APlayer.min.css">
  <div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="3025663508" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="#2D8CF0"></div>
  <script src="https://blog-static.cnblogs.com/files/elkyo/APlayer.min.js"></script>
  <script src="https://blog-static.cnblogs.com/files/elkyo/Meting.min.js"></script>
  <!--点击冒点-->
  <canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas><script src="https://blog-static.cnblogs.com/files/elkyo/mouse-click.js"></script>

标签:github,leader755,博客园,主题,gitee,https,SimpleMemory,com
From: https://www.cnblogs.com/linzhifen5/p/17235620.html

相关文章

  • Android Studio 样式和主题背景
    样式和主题背景转载自 StylesandThemes | AndroidDevelopers借助Android中的样式和主题背景,您可以将应用设计的细节与界面的结构和行为分开,其作用类似于网......
  • 主题upd
    updatecss2.0a,button{outline:0}.day,.entrylistItem,.entrylistPostSummary,.feedbackCon,.feedbackItem,.feedbackListSubtitle,.postCon,.postMeta,.postSticky{pos......
  • 107之Linux的zsh主题
    zsh是什么wiki:​ zsh是一种UNIX和类UNIX操作系统上的命令行shell解释器,它是Bourneshell(sh)的扩展,也是Bash、ksh、tcsh等其他shell的改进版。​ zsh的作用是提供一......
  • Jenkins - 主题设置
    jenkins最新版本适配的theme有哪些?更新于2023-03-17,以下回答来自ChatGPTJenkins最新版本(Jenkins2.303LTS)目前支持以下几种官方适配的主题:ClassicJenki......
  • uni-app 实现轮播图组件外轮廓背景色随图片主题色改变
    uni-app实现轮播图组件外轮廓背景色随图片主题色改变<template><viewclass="container"><canvascanvas-id="getThemeColorCanvas"id="getThemeCo......
  • (五)博客园美化(风格1):音乐插件等小模块的运用
    空闲的时候自己根据很多大神的美化教程,把自己的博客园简单装修了下。再此整理一下美化方式和步骤,如果喜欢本人博客这种风格,可以参考一下这个系列。一、ForkmeonGitee......
  • cnblogs 博客园自定义样式
    在博客园搜索资料时,发现很多博友的园子装饰的非常炫酷。想着也装饰一下自己的园子,搜索后发现一个不错的插件,记录一下。使用、配置教程:https://bndong.github.io/Cnblog......
  • uni-app 实现图片主题色的获取
    uni-app实现图片主题色的获取<canvascanvas-id="getImageThemeColorCanvas"id="getImageThemeColorCanvas"></canvas>canvas元素默认宽为300,高为150。需要注意的......
  • 语雀文档转换成博客园文章
    背景现在本人是在语雀中写博客,然后导出,再上传到博客园。其中我希望我在语雀设置的空行、文字大小、图片等都能和我发布在博客园当中的是一样的。需求点文字的大小图......
  • (三)博客园美化:博客签名设置
    空闲的时候自己根据很多大神的美化教程,把自己的博客园简单装修了下。再此整理一下美化方式和步骤,如果喜欢本人博客这种风格,可以参考一下这个系列。一、博客签名博客签名......