Silence 博客园主题使用教程

Silence 博客园主题使用教程

cnblogs-theme-silence📖 一款专注于阅读的博客园主题项目地址:https://gitcode.com/gh_mirrors/cn/cnblogs-theme-silence

1. 项目的目录结构及介绍

Silence 博客园主题的目录结构如下：

cnblogs-theme-silence/
├── dist/
│   ├── silence.min.css
│   ├── silence.min.js
├── docs/
│   ├── guide.md
├── src/
│   ├── css/
│   ├── js/
│   ├── images/
├── .gitignore
├── LICENSE
├── README.md

目录结构介绍

• dist/：包含编译后的 CSS 和 JS 文件。
• docs/：包含项目文档，如使用指南。
• src/：源代码目录，包含 CSS、JS 和图片资源。
• .gitignore：Git 忽略文件配置。
• LICENSE：项目许可证。
• README.md：项目说明文档。

2. 项目的启动文件介绍

Silence 博客园主题的启动文件主要是 dist/ 目录下的 silence.min.css 和 silence.min.js。

silence.min.css

这是主题的主要样式文件，包含了所有必要的 CSS 样式，以确保主题的界面简洁优雅。

silence.min.js

这是主题的主要脚本文件，包含了所有必要的 JavaScript 代码，以实现主题的动态功能，如导航栏菜单项、悬浮标题目录等。

3. 项目的配置文件介绍

Silence 博客园主题的配置主要通过博客园的后台设置进行。以下是主要的配置步骤：

基本设置

1. 博客标题：设置博客名称。
2. 博客皮肤：选择 Custom 作为博客皮肤。
3. 代码高亮：设置渲染引擎为 highlight.js，取消勾选“显示行号”，并将系统主题设为 cnblogs。

页面定制CSS代码

在“页面定制CSS代码”中勾选“禁用模板默认CSS”，并在输入框中填入如下内容：

@import url(https://cdn.jsdelivr.net/gh/esofar/cnblogs-theme-silence@latest/dist/silence.min.css);

页脚HTML代码

在“页脚HTML代码”中填入如下代码：

<script>
window.$silence = {
    avatar: 'https://files.cnblogs.com/files/blogs/611458/avatar.ico',
    favicon: 'https://files.cnblogs.com/files/blogs/611458/favicon.ico',
    github: 'https://github.com/chinjinyu',
    defaultMode: 'auto',
    defaultTheme: 'a',
    navbars: [
        { title: '标签', url: 'https://www.cnblogs.com/chinjinyu/tag/' },
        { title: '归档', url: 'https://www.cnblogs.com/chinjinyu/p/' }
    ],
    showNavAdmin: true,
    catalog: {
        enable: true,
        index: true,
        active: false,
        levels: ['h2', 'h3', 'h4']
    },
    signature: {
        enable: true,
        author: 'chinjinyu',
        license: ['署名-非商业性使用-相同方式共享 4.0 国际', 'https://creativecommons.org/licenses/by-nc-sa/4.0/']
    },
    sponsor: {
        enable: true
    }
};
</script>
<script src="https://fastly.jsdelivr.net/gh/esofar/cnblogs-theme-silence@3.0.0-rc2/dist/silence.min.js"></script>

页首HTML代码

在“页首HTML代码”中填入如下代码：

<div class="loading">
    <div class="box">
        <h2>Loading</h2>
        <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
    </div>
</div>

通过以上配置，您可以成功部署并使用 Silence 博客园主题。

cnblogs-theme-silence📖 一款专注于阅读的博客园主题项目地址:https://gitcode.com/gh_mirrors/cn/cnblogs-theme-silence