# cnblogs-theme-picue

**Repository Path**: eatenupme/cnblogs-theme-picue

## Basic Information

- **Project Name**: cnblogs-theme-picue
- **Description**: picue - petite-vue 和 pico.css 制作的博客园主题
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-10-03
- **Last Updated**: 2023-12-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: JavaScript

## README

> 又一个博客园主题 [cnblogs-theme-picue](https://gitee.com/aolob/cnblogs-theme-picue)，它使用 PetiteVue 和 PicoCSS 构建而成，取名 picue 皮球。

## 快速开始

- [设置](https://i.cnblogs.com/settings) - 基本设置 - 博客皮肤 - SimpleMemory。
- [设置](https://i.cnblogs.com/settings) - 代码高亮 - **除了**禁用全部开启。
- [设置](https://i.cnblogs.com/settings) - 页面定制 CSS 代码 - [.dist/custom.css](https://gitee.com/aolob/cnblogs-theme-picue/releases)。
- [设置](https://i.cnblogs.com/settings) - 页首 HTML 代码 - [.dist/page_begin.html](https://gitee.com/aolob/cnblogs-theme-picue/releases)。
- [设置](https://i.cnblogs.com/settings) - 页首 HTML 代码 - [.dist/page_end.html](https://gitee.com/aolob/cnblogs-theme-picue/releases)。

[进阶配置](https://www.cnblogs.com/aolob/p/cnblogs-theme-picue.html)

<!-- more -->

## 进阶配置

### **每页文章数**

在配置文章数之前，我们先来理解下主流浏览器对同域最大连接数的限制。

| Browser | `HTTP/1.1` |
| ------------ | ------------ |
| IE 8 | 6 |
| Chrome 4+ | 6 |
| Opera 10.51+ | 8 |

[上表显示了当前HTTP/1.1浏览器支持的每台服务器的连接数量](https://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/)。

因为博客园用户首屏的信息并不包括文章内容，而是显示文章设置的摘要，首屏确实有一定的抓用户眼球的影响力，所以我们提前拉取了文章内容，在规定的位置截断显示出来。

除此，文章本身的摘要是非常重要的，虽然呈现的内容不如直接抓取内容来的快，但是对于SEO爬取分析和站点结果优化均存在较大的影响力。

回到本页文章数，结合主流浏览器，推荐每页5篇文章比较合理。能让文章有可能在同时抓取并返回，减少用户等待的钝感。

- [选项](https://i.cnblogs.com/preference) - 选项 - 首页与RSS每页显示 - 5。

### **代码跟随主题切换**

> 您可以为浅色模式和深色模式分别设定不同代码块高亮主题, 当您勾选启用"跟随系统自动切换浅色/深色模式主题"后, 代码块的主题将随着系统主题的变化而变化。
> <br>
> 您也可以通过自定义JS代码来自行决定何时切换为浅色模式或深色模式下的代码块高亮主题。
> <br>
>```js
>// 切换到深色主题
>window.highlighter.setTheme(window.darkModeCodeHighlightTheme);
>// 切换到浅色主题
>window.highlighter.setTheme(window.codeHighlightTheme);
>```

主题已经兼容了代码随主题切换，只需要这里配置即可。

- [设置](https://i.cnblogs.com/settings) - 代码高亮 - 系统浅色模式时主题 - prism-material-light。
- [设置](https://i.cnblogs.com/settings) - 代码高亮 - 系统深色模式时主题 - prism-material-dark。

### **文章预览**

文章预览该从哪里截断呢？根据文章不同，截断权利应该由用户选择内容去做展示达到最好的效果。

文章预览该如何截断呢？`markdown`已经给出了答案，文章内定义`<!-- more -->`可以轻松截断部分作为预览部分。

实测博客园会吞`html`的注释部分，想到一个有损，通过配置可无损的解决方案就是利用本身的空元素代替，我用的是`br` 换行。如果不想让换行显示出来，可以选择直接设置`more`的样式。

- [编辑](https://i.cnblogs.com/posts/edit) - 编辑/添加随笔 - 内容 - `<br class="more">`。