# cnblogs-MyTheme

**Repository Path**: oldsaltfish/cnblogs-MyTheme

## Basic Information

- **Project Name**: cnblogs-MyTheme
- **Description**: 博客园的主题修改
- **Primary Language**: Unknown
- **License**: AGPL-3.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-06
- **Last Updated**: 2025-09-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 介绍
该目录下的脚本是本人博客园的js主题脚本。  

~~大致上是基于https://github.com/Zou-Wang/CNblogs-Theme-Sakura这个主题的1.0版本进行修改的。  ~~
~~但是事实上我并不是很喜欢这个主题，现在已经将这个主题改得完全不一样了，有非常大的区别。~~  
全部重写了，不想再用别人的主题了。  

## 使用
博客园开通js权限……   
> 并不推荐除了我之外的人使用，因为我并没有新创建一个博客园账号去测试如何从零开始使用这个主题。  

由于是自己用的，因此并不会把使用说明写得很详细，但是你可以通过这个仓库，来了解这个博客的样式和js是如何写出来的。  
...

1. /css/index.css  
2. main.js(main后面可能加数字，因为博客园文件有缓存，改了之后不会立即生效)。  
## 开发
使用less简化css的编写。  
使用easy-less插件，按Ctrl+S时自动将less文件编译成css文件。  
https://marketplace.cursorapi.com/items?itemName=mrcrowl.easy-less  

### 博客园环境
1. 博客园自带jquery环境。  
截止到2025.3.9，目前的版本是3.3.1。  
2. jquery.writeCapture插件，没了解过。  
3. css环境，放在env目录下。这些css在网页中自动加载，因此如果我们写html控件，应当考虑这些css的影响。  
4. 百度和谷歌，以及博客园自带的js，一万来行，谁去看。  
### 博客园脚本执行顺序
页首(#page_begin_html) < 博客主体内容（比如文章） < 页脚(#page_end_html) < 页首缓存引入js < DCL(DOMContentLoaded) < 侧边栏嵌入HTML  < src初次引入js（意义不大）
越靠左越早。  
1. 哪怕在页首引入js操作文章主体，也是能成功的。  
2. sideBar内部的内容生成比DCL更晚，可能是脚本生成的。  

如此分析下来，如果要操作sideBar内部生成的内容（比如搜索框），最省事的方法是直接把引入js写在侧边栏html里面。  
如果追求最早渲染，那么应该放到页首，然后监听sideBar内部元素出现。  
```html
<script>
window.startTime = performance.now();
let dclTime = null;

document.addEventListener('DOMContentLoaded', () => {
  dclTime = performance.now();
  console.log('DCL time: '+(dclTime-window.startTime))
});
const observer = new MutationObserver(() => {
  const el = document.getElementById('sidebar_search');
  if (el) {
    const now = performance.now();
    console.log(`SEARCH出现 +${(now - startTime).toFixed(2)}ms`);
    observer.disconnect(); // 🛑 停止监听
  }
});

observer.observe(document.body, {
  childList: true,
  subtree: true,
});
</script>

```
### 博客园内联脚本限制
博客园对内联脚本有着某种审核机制。  
> 内联脚本就是直接在script标签中写代码的。使用src引入的js文件不受限制。
#### textarea限制
1. textarea限制，反引号包含`<textarea>`标签的那行会被删除。  
比如jquery中，经常使用反引号来创建dom元素。  
textarea就会
```js
$(`<div>
<h1>标题</h1>
<textarea>标题</textarea>
</div>`)
```  
```js
// 可以通过下面这种方法来解决
document.createElement("textarea");
```
但是这样创建dom效率实在太低了，因此构建页面还是使用src引入的js文件比较好。
#### window.open限制
window.open限制，当代码中出现window.open，整段代码都会直接被废弃，连报错都没有，因为根本没执行。  
可以通过创建a标签，然后模拟点击a标签来达到目的。  


### 单元测试?
使用singleFile保存博客园中的页面，然后嵌入脚本查看样式。  
> 由于上述提到的博客园的环境问题，因此如果要实现严谨的测试只能把代码写到博客园的设置里面，然后查看页面。  

使用vite作为开发测试服务器，当然，你也可以使用live-server.(二者皆具有热重载/热更新的功能，方便修改测试)