Cnblogs博客皮肤开发调试最佳方案

Cnblogs博客园支持自定义js来美化站点（需要申请JS权限），可以将主题托管到自己的云资源或CDN加速节点节点上。

基于BNDong/cnblogs-theme主题二次开发，美化博客园主题，我们移步到操作文档，根据文档一步步安装。

开发调试

例如我们的网站为 www.example.com（IP或其它host），将编译后的文件夹 dist 放到了网站的根目录。

这样可以通过加载 https://www.example.com/dist/simpleMemory.js 来加载主题：

<script type="text/javascript">
    window.cnblogsConfig = {
      info: {
        name: 'userName', // 用户名
        startDate: '2021-01-01', // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间
        avatar: 'http://xxxx.png', // 用户头像
      },
    }
</script>
<script src="https://www.example.com/dist/simpleMemory.js" defer></script>

当主题需要自定义一些功能，发现不方便调试js脚本，要反复将生产包部署到服务器，来回操作繁琐复杂，现可以通过云开发方式来做调试。

使用Codespaces调试开发

fork仓库后，如果没有云资源又想要调试代码，这时候可以尝试github推出的codespaces云IDE。

在github上创建一个codespaces

创建codespaces

control + shift + ~打开终端，执行命令语句 npm run server

打开终端，执行命令语句

切换到端口面板, 右键链接地址，更改端口可见性为public

右键链接地址，更改端口可见性为

打开链接地址，就能看到dist为目录的站点

dist站点

最后在csblogs博客设置中，临时将script脚本地址替换

打开终端，执行命令语句

在codespaces编译后，在刷新博客园网站就能看到更改后的内容

github codespaces 每个月免费时长为120 core/h，2核数CPU可以使用60h。

打包后dist包部署到服务器。

生产部署

使用静态资源托管服务商（推荐）

静态资源服务商目前有 github pages、gitee pages、Vercel、Netlify等。考虑国外防火墙和CDN的影响，推荐使用gitee pages

1. 打包

仓库根目录build.sh脚本，更换远程仓库源地址，执行

bash publish.sh

脚本打包产物到dist，再把产物提交的仓库gh-pages分支

2. 部署

gitee仓库 服务 - gitee pages

选取发布分支 gh-pages, 确认发布
Alt text

云服务器

如果想要部署到自己的服务器，以下使用Docker容器化部署。

注意Cnblogs是https站点，所以引入第三方资源的站点也必须是https，详见https混合内容

1. 申请SSL证书__已有证书跳过此步骤

以ZeroSSL申请证书为例，面板中点击New Certificate，输入IP地址-选择90天免费证书
验证域名所有权，下载验证文件，替换仓库路径./well-known/pki-validation下的.txt文件
服务器中拉取仓库代码, 执行docker-compose up -d - ZeroSSL点击校验

2. 安装证书

ZeroSSl下载的证书包
将模块包ca-boundle.crt和并到certificate.crt中（手动扣过去就行）,并替换仓库ssl下的证书文件；
服务器拉取最新代码
执行docker-compose up -d --force-recreate --build --remove-orphans

参考

以下为本站 cnblogsConfig 参考配置：

<script type="text/javascript">
window.cnblogsConfig = {
  info: {
    name: 'Alson',
    startDate: '2023-01-25',
    avatar: 'https://pic.cnblogs.com/avatar/1475521/20230213112709.png',
    blogIcon: 'https://blog.dbnuo.com/images/favicon-32x32-next.png'
  },
  sidebar: {
    navList: [
      ['GitHub', 'https://github.com/fzxiang', 'icon-github'],
      ['Gitee', 'https://gitee.com/fzxiang', 'icon-gitee1'],
      ['Cnblogs', 'https://www.cnblogs.com/', 'icon-cnblogs']
    ],
  },
  title: {
    onblur: 'Hi',
    onblurTime: 500,
    focus: '欢迎回来！',
    focusTime: 1000
  },
  switchDayNight: {
    enable: true,
    nightMode: false,
    auto: {
      enable: false,
      dayHour: 5,
      nightHour: 19
    }
  },
  banner: {
    home: {
      background: [
        "https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230203060826_background.jpeg",
      ],
      title: [],
      titleSource: 'jinrishici',
    },
    article: {
      background: [
          'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131071130_wallhaven-1j65pv.webp',
          'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131071656_wallhaven-2e37y9.webp', 
          'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131071715_wallhaven-4d38m0.webp', 
          'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131071804_wallhaven-4gj334.webp', 
          'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131071813_wallhaven-6k3oox.webp', 
          'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131071822_wallhaven-13dv2g.webp',
          'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131071907_wallhaven-49gw1n.webp', 
          'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131071928_wallhaven-83dkk1.webp', 
          'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131071937_wallhaven-96w5gk.webp', 
          'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072051_wallhaven-d5yzvg.webp', 
          'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072103_wallhaven-dg6pel.webp', 
          'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072223_wallhaven-dgeqoj.webp', 
          'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072232_wallhaven-ey1pow.webp', 
          'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072250_wallhaven-j5y525.webp', 
          'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072308_wallhaven-j82g35.webp', 
          'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072324_wallhaven-kwkg5q.webp', 
          'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072337_wallhaven-kwxz16.webp', 
          'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072401_wallhaven-lqddel.webp', 
          'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072410_wallhaven-r2yjg1.webp', 
          'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072423_wallhaven-wymo2p.webp', 
          'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072439_wallhaven-wyomo6.webp', 
          'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072452_wallhaven-ym56zg.webp', 
          'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072505_wallhaven-ym62z7.webp', 
          'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072512_wallhaven-yml8wd.webp'
      ],
    }
  },
  links: {},
  articleSuffix: {
    imgUrl: '',
  },
  footer: {
    style: 2
  },
  rtMenu: {
    downScrollDom: '#blog_post_info_block',
  },
  code: {
    type: 'hljs',
    options: {
      hljs: {
        theme: 'atom-one-dark-reasonable',
        languages: ['Bash', 'CSS', 'Dockerfile', 'Go', 'HTML', 'XML', 'HTTP', 'Less', 'Lua', 'PHP', 'Python', 'Shell', 'SQL', 'Java', 'JSON']
      },
      maxHeight: '',
      fontSize: 12,
      line: true,
      macStyle: true,
    },
  },
  articleDirectory: {
    position: 'right',
    minBodyWeight: 900
  },
  progressBar: {
    color: "#f87171"
  },
  animate: {
    bannerImages: {
      enable: false,
      options: {
        itemNum: 5,
        current: -1,
        sort: 1,
        time: 30000
      }
    },
    homeBanner: {
      enable: true,
      // 如果设置自定义homeBanner.animate动画脚本，替换默认动画配置项homeBanner.options
      animate: {
        script: [
          'https://blog-static.cnblogs.com/files/alson/rocket.min.js',
          'https://blog-static.cnblogs.com/files/alson/plane.umd.js',
          'https://blog-static.cnblogs.com/files/alson/rabbit.min.js',
        ],
        onload: (element) => {
          __animation__.render({
            element: element
          })
        }
      },
      options: {
        radius: 15,
        density: 0.2,
        color: 'rgba(255,255,255, .2)',
        clearOffset: 0.3
      }
    },
    articleTitle: {
      enable: true
    },
    articleBanner: {
      enable: false
    },
    background: {
      enable: false,
      options: {
        colorSaturation: "60%",
        colorBrightness: "50%",
        colorAlpha: 0.5,
        colorCycleSpeed: 5,
        verticalPosition: "random",
        horizontalSpeed: 200,
        ribbonCount: 3,
        strokeSize: 0,
        parallaxAmount: -0.2,
        animateSections: true
      }
    },
    backgroundMouse: {
      enable: false
    },
    mouse: {
      enable: false,
      options: {
        size: 8,
        sizeF: 36
      }
    }
  },
  consoleList: [
    ['Hello', "Welcome to Alson's blog"],
  ],
}

window.cnblogsConfig.links.footer = [
  ["bndong", 'https://www.cnblogs.com/bndong/'],
]

window.cnblogsConfig.hooks = {
  beforeCode: (_) => {
    // console.log('code 渲染开始前');
  },
  afterCode: (_) => {
    // console.log('code 渲染结束后');
  },
  beforeLoading: (_) => {
    // console.log('loading 开始前');
  },
  afterLoading: (_) => {
    // console.log('loading 结束后');
  },
  dayNightControl: (_, type) => {
    // console.log(type);
    // console.log('日/夜间模式');
  },
}

</script>
<script src="//fzxiang.gitee.io/alson-cnblogs-theme/simpleMemory.js" defer></script>

posted @ 2023-02-10 14:38 Hello_Alson 阅读(509) 评论(2) 收藏举报

刷新页面返回顶部

子湘（Alson）