皮球 - 博客园主题

皮球,博客园,主题 · 浏览次数 : 38

小编点评

## cnblogs-theme-picue 主题配置指南 **1. 基本设置** * 使用 PetiteVue 和 PicoCSS 构建 * 取名 picue 皮球 **2. 设置** * 代码高亮: * 系统浅色模式: prism-material-light * 系统深色模式: prism-material-dark * 页面定制 CSS 代码: .dist/custom.css * 页首 HTML 代码: * .dist/page_begin.html * .dist/page_end.html * 自定义文章数: * 推荐每页 5篇文章 * 文章预览如何截断? * 文章预览如何使用 `<br class="more">>` 来截断 **3. 进阶配置** * 每页文章数: * 支持每页 5篇文章 * 调整文章数前,先拉取文章内容 * 文章摘要是 SEO 影响力较大的重要因素 * 首页与RSS 每页显示: * 设置选项页面数量为 5 **4. 代码配置** * 代码高亮: * 设置主题: prism-material-light 或 prism-material-dark * 代码高亮: * 系统浅色模式: prism-material-light * 系统深色模式: prism-material-dark **5. 文章预览** * 文章预览如何使用 `<br class="more">>` 来截断部分作为预览部分 **6. 其他设置** * 后端配置: * 设置页面标题 * 设置网站描述 **7. 注意事项** * 文章预览的具体截断方式需要根据文章内容进行调整

正文

又一个博客园主题 cnblogs-theme-picue,它使用 PetiteVue 和 PicoCSS 构建而成,取名 picue 皮球。

快速开始

进阶配置


进阶配置

每页文章数

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

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

上表显示了当前HTTP/1.1浏览器支持的每台服务器的连接数量

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

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

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

  • 选项 - 选项 - 首页与RSS每页显示 - 5。

代码跟随主题切换

您可以为浅色模式和深色模式分别设定不同代码块高亮主题, 当您勾选启用"跟随系统自动切换浅色/深色模式主题"后, 代码块的主题将随着系统主题的变化而变化。


您也可以通过自定义JS代码来自行决定何时切换为浅色模式或深色模式下的代码块高亮主题。

// 切换到深色主题
window.highlighter.setTheme(window.darkModeCodeHighlightTheme);
// 切换到浅色主题
window.highlighter.setTheme(window.codeHighlightTheme);

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

  • 设置 - 代码高亮 - 系统浅色模式时主题 - prism-material-light。
  • 设置 - 代码高亮 - 系统深色模式时主题 - prism-material-dark。

文章预览

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

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

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

  • 编辑 - 编辑/添加随笔 - 内容 - <br class="more">

会员救园

已在主题层面支持,希望园子走出困境,选择坚持下去。

与皮球 - 博客园主题 相似的内容:

皮球 - 博客园主题

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

博客园主题修改分享 - 基础篇

先上预览图 1. 进入博客园个人后台,选择设置 找不见博客园后台的,可以先进入博客园首页,点击头像下的账号设置,进入后左侧列表有博客设置,点击后可进入。 2. 基本设置里,选择皮肤 CodingLife 3. 点开页面定制css代码,将下面代码粘贴进去后,保存即可 body { min-height

如何基于R包做GO分析?实现秒出图

GO分析 基因本体论(Gene Ontology, GO)是一个用于描述基因和基因产品属性的标准术语体系。它提供了一个有组织的方式来表示基因在生物体内的各种角色。基因本体论通常从三个层面对基因进行描述:细胞成分(Cellular Component,CC)、生物学过程(Biological Proc

【Flink入门修炼】2-3 Flink Checkpoint 原理机制

如果让你来做一个有状态流式应用的故障恢复,你会如何来做呢? 单机和多机会遇到什么不同的问题? Flink Checkpoint 是做什么用的?原理是什么?

视频实时自然美颜, 无惧素颜上镜

华为HMS Core 视频编辑服务依托自身AI技术的核心优势,在最新版本HMS Core 6.8.0中上线了全新的视频美颜功能,能对指定图片或视频中的人脸实现磨皮、美白、大眼、瘦脸的美颜效果,适用于直播、相机、视频剪辑、图片处理等场景中,打造独特自然的美颜效果。 HMS Core视频美颜功能在技术上

618技术揭秘:探究竞速榜页面核心前端技术

本文将探究京东竞速榜H5页面的核心前端技术,包括动画、样式配置化、皮肤切换、海报技术、调试技巧等方面,希望能够为广大前端开发者提供一些有用的参考和思路。

华夏天信携手华为云开天aPaaS,打造安全、高效、节能的主煤流运输系统

摘要:基于开天aPaaS集成工作台,主煤流运输系统如何实现多源异构数据融合、皮带物料和人员违章的智能感知,以及皮带的智能控制。灵活架构、高效集成、快速开发! 本文分享自华为云社区《华夏天信携手华为云开天aPaaS,打造安全、高效、节能的主煤流运输系统》,作者:开天aPaaS小助手。 据权威数据显示,

[转帖]一文看懂家庭宽带光纤是如何入户

目前,家庭宽带普遍实现了光纤入户,入户光纤一般在弱电箱的位置,家庭装修需要预埋网线,才能在后期流畅的使用网络。下文对网线预埋、网线选择、组网方式三个方面说一说。 一、光纤如何入户 1、光纤如何入户 入户光纤是不用家庭用户操心的,运营商在小区附件,一般部署了分光箱等。装机员会从分光箱拉一条皮纤到房子的

【23种设计模式】外观模式(十)

前言 外观模式,英文名称是:Facade Pattern。我们先从名字上来理解一下“外观模式”。我看到了“外观”这个词语,就想到了“外表”这个词语,两者有着很相近的意思。就拿谈恋爱来说,“外表”很重要,如果第一眼看着很舒服、有眼缘,那就有交往下去的可能。如果长的“三寸钉、枯树皮”,估计就够呛了。在这