2. 开发
    3. 48 1 2
Xiuno BBS 开发实践教程 - 主题 - The Easy Way
Tillreetree 9小时前

Xiuno BBS 开发实践教程 - 主题 - The Easy Way

前言 - 为什么要这么做

通常来说，全新安装好的xiuno bbs 4.0.4 会有这些外观特征：

  • 深灰色的页眉导航栏和页脚
  • 深蓝色的主要按钮
  • 卡片组件里的头部有渐变色
  • 除了以上xiuno bbs作者所作出的少需必要修改之外，与原始版本Bootstrap 4完全一致

导致视觉上没有任何吸引力。

而你不想要这种无聊透顶的外观。所以我们要对它进行外观定制。

理论

自定义主题的基本思路

  • 创建新的主题文件夹：在xiunobbs/view/目录下创建一个新的文件夹，例如my_custom_theme。
  • 覆盖默认模板文件：将需要修改的模板文件从默认主题复制到新创建的主题文件夹中，并进行相应的修改。
  • 添加自定义CSS：通过自定义CSS文件覆盖或扩展默认样式。

Bootstrap 4

Bootstrap 4 是一个流行的前端框架，提供了丰富的组件和样式库，可以帮助我们快速构建响应式、移动优先的网站。在Xiuno BBS中，使用了Bootstrap 4作为基础样式库，这意味着我们可以轻松地通过覆盖默认的CSS类来实现自定义样式。

同时，整个xiuno bbs生态系统也强烈依赖Bootstrap，所以在制作自己的主题时也必须考虑到这一点。

CSS速成教程

在深入学习如何自定义Xiuno BBS网站的外观之前，掌握CSS（层叠样式表）的核心概念至关重要。CSS是用于描述网页外观和格式的样式语言，通过它，您可以控制网页元素的布局、颜色、字体以及其他视觉效果。本教程将首先介绍CSS的基本概念，帮助您建立扎实的基础，然后引导您应用这些知识来美化您的BBS网站。

CSS核心概念

我个人更建议您阅读菜鸟教程中的CSS教程，因为菜鸟教程写的更加全面和系统化，有助于切实提升你的技能水平。看完后可以回到本文继续阅读“实践”部分。

但如果你懒得动，则可以继续看本文，因为我帮你总结了CSS里的核心概念（因为我就是这么爱你呀）。

1. 选择器

选择器用于指定CSS样式应用的目标HTML元素。通过不同的选择器，您可以精准地定位到网页中的特定元素或元素组。

  • 元素选择器：基于HTML标签名，如p选择所有段落元素。
  • 类选择器：基于HTML元素的class属性，如.classname选择所有具有该类的元素。
  • ID选择器：基于HTML元素的id属性，如#idname选择具有特定ID的唯一元素。
  • 属性选择器：根据元素的属性及其值进行选择，如[type="text"]选择所有类型为文本的输入框。
  • 伪类和伪元素：用于选择元素的特定状态或部分，如:hover选择鼠标悬停时的元素，::before在元素内容前插入内容。

2. 属性和值

属性定义了要应用的具体样式特性，值则是属性的具体设置。

示例

  • color: red; 中，color是属性，red是值。
  • background-color: #f7f7f7; 中，background-color是属性，#f7f7f7是值。

3. 样式规则

样式规则由选择器和声明块组成，声明块包含一个或多个属性及其值的组合。

示例

p {
    color: blue;
    font-size: 16px;
}

这条规则将所有段落文本的颜色设置为蓝色，字体大小设置为16像素。

4. 层叠和优先级（Cascading and Specificity）

CSS的“层叠”特性决定了当多个样式规则应用于同一元素时，哪个规则优先生效。优先级由选择器的特异性（specificity）、来源（source order）和重要性（!important）决定。

  • 特异性：内联样式 > ID选择器 > 类选择器/属性选择器/伪类 > 元素选择器/伪元素。
  • 来源：浏览器默认样式 < 用户样式 < 作者样式。
  • 重要性：使用!important可以提高样式的优先级，但不建议频繁使用。

5. 盒模型

每个HTML元素都被视为一个矩形盒子，包含内容区、内边距（padding）、边框（border）和外边距（margin）。盒模型决定了元素在页面上的布局和间距。

  • 示例： 
    .box {
    width: 200px;
    padding: 10px;
    border: 2px solid #000;
    margin: 15px;
}
    这个盒子的总宽度为200px + 2*10px + 2*2px + 2*15px = 274px。

6. 布局（Layout）

CSS提供了多种布局方式，包括浮动（float）、定位（position）、Flexbox和Grid布局。这些布局方法帮助您控制元素在页面上的排列和对齐方式。

  • Flexbox：适用于一维布局，方便对齐和分配空间。
  • Grid：适用于二维布局，能够同时处理行和列。

7. 响应式设计（Responsive Design）

响应式设计确保网站在不同设备和屏幕尺寸下都能良好显示。通过媒体查询（media queries）、百分比单位和弹性单位（如em、rem），您可以创建适应各种屏幕的布局。

  • 示例： 
    @media (max-width: 600px) {
    .container {
        width: 100%;
    }
}

8. 变量（Variables）

CSS变量允许您定义可重用的值，便于维护和统一管理样式。

  • 示例：

    :root {
    --primary-color: #31C177;
}

.button {
    background-color: var(--primary-color);
}

总结

掌握以上CSS核心概念后，您将具备构建和自定义网页外观的基础知识。接下来，您可以将这些理论知识应用于实际的CSS代码中，通过实践进一步巩固和提升您的CSS技能。

现在，让我们将所学的知识应用到Xiuno BBS网站的自定义中，通过编写和调整CSS代码，实现您理想中的网站外观。

实践

现在我们已经了解了CSS的核心概念，接下来我们将把这些概念应用到实际的CSS代码中，创建一个美观的Xiuno BBS主题。

目录结构

- my_theme_custom/
  - conf.json
  - hook/
    - header_bootstrap_bbs_after.htm
  - view/
    - css/
      - custom.css

按照以上目录层次在xiuno bbs的plugin文件夹依次创建文件夹和文件，然后继续阅读。

conf.json

{
    "name": "我的第一个主题",
    "brief": "教学用主题",
    "version": "1.0.0",
    "bbs_version": "4.0.4",
    "installed": 0,
    "enable": 0,
    "hooks_rank": [],
    "overwrites_rank": [],
    "dependencies": []
}

header_bootstrap_bbs_after.htm

<link rel="stylesheet" href="plugin/my_theme_custom/view/css/custom.css">

custom.css

定义变量

先定义一些全局变量，方便后面重复使用这些颜色和值。

/* 【定义变量】 */
:root {
    --primary: #31C177;         /* 主色调 */
    --primary-hover: #33CC7D;   /* 主色调悬停状态 */
    --primary-focus: #2DB36D;   /* 主色调聚焦状态 */
    --dark: #1a1d20;            /* 深色，用于文字 */
    --light: #f7f7f7;           /* 浅色，用于背景 */
    --white: #fff;              /* 白色，其实 Bootstrap 4 已经定义了，但这里再明确一下 */
}

全局样式

给整个页面设置一些基础样式，比如字体、颜色、盒模型等。

/* 【全局】 */
*,
*:after,
*:before {
    /* 所有元素都用 border-box，方便计算宽高 */
    box-sizing: border-box;
}

body {
    font-size: 1rem;
    font-family: "思源黑体", "思源黑体 CN","Source Han Sans","Source Han Sans CN","Noto Sans CJK","Noto Sans CJK SC","Microsoft YaHei",  "PingFang SC", sans-serif;
    -webkit-font-smoothing: antialiased; /* 让字体更平滑 */
    color: var(--dark);                  /* 文字用深色 */
    background-color: var(--light);      /* 背景用浅色 */
    font-weight: 400;
}

/* 链接样式 */
a {
    color: var(--dark);                  /* 链接默认颜色 */
    text-decoration: none;               /* 去掉下划线 */
    transition: .2s;                     /* 加点过渡效果 */
}

a:hover {
    color: var(--primary);               /* 鼠标悬停时变成主色调 */
    text-decoration: none;
}

/* 标题样式 */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: var(--dark);                  /* 标题也用深色 */
}

容器样式

容器的样式主要是为了布局，保持内容居中并留出间距。

/* 【容器】 */
.container {
    width: 100%;
    padding-right: 1.42rem;
    padding-left: 1.42rem;
    margin-right: auto;
    margin-left: auto;
}

.row {
    display: flex;
    flex-wrap: wrap;                     /* 允许换行 */
    margin-right: -1.42rem;              /* 抵消 padding */
    margin-left: -1.42rem;
}

/* 所有列的共同样式 */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col, .col-auto,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-sm, .col-sm-auto,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-md, .col-md-auto,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-lg, .col-lg-auto,
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6,
.col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12,
.col-xl, .col-xl-auto {
    position: relative;
    width: 100%;
    min-height: 0.07rem;
    padding-right: 1.42rem;
    padding-left: 1.42rem;
}

卡片样式

卡片是常见的UI组件，这里给它加点样式，让它看起来更现代。

/* 【卡片】 */
.card {
    background: var(--white);            /* 白色背景 */
    border: none;                        /* 去掉边框 */
    box-shadow: 0 0.07rem 0.14rem 0 rgba(0, 0, 0, .04); /* 加点阴影 */
}

.card > .card-header {
    color: var(--dark);                  /* 深色文字 */
    font-size: 1rem;
    border-bottom: 0.07rem solid var(--light); /* 底部加条浅色线 */
    background: var(--white);            /* 白色背景 */
}

.card-header-tabs > .nav-item > .nav-link {
    padding: 0 0.71rem 0.71rem 0.71rem;  /* 调整内边距 */
}

.card-header-tabs > .nav-item > .nav-link.active {
    background: var(--white);            /* 激活状态背景 */
    border-color: var(--white);          /* 边框颜色 */
    border-bottom-color: var(--primary); /* 底部边框用主色调 */
    color: var(--primary);               /* 文字用主色调 */
}

.card-body {
    padding: 1.42rem;                    /* 内边距 */
}

.thread,
.post {
    padding: 0rem 0 1.42rem;
    border-color: var(--light);          /* 浅色边框 */
    margin-bottom: 0.71rem;
}

.card-footer {
    padding: 0.75rem 1.25rem;
    background-color: var(--white);      /* 白色背景 */
    border-top: 0.07rem solid var(--light); /* 顶部加条浅色线 */
}

页眉样式

导航栏是页面的重要部分，这里给它加点样式，让它更醒目。

/* 【页眉】 */
.logo-2 {
    width: auto;
    height: 1.71rem;
}

.bg-dark {
    background: var(--white) !important; /* 覆盖 Bootstrap 的深色背景 */
    box-shadow: 0 0.07rem 0.14rem rgba(0, 0, 0, .04); /* 加点阴影 */
}

.navbar-dark .navbar-brand {
    color: var(--dark);                  /* 深色文字 */
}

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 0.71rem;
    padding-right: 0.71rem;
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--dark);                  /* 深色文字 */
}

.card-header-tabs > .nav-item > .nav-link:hover:not(.active) {
    border: 1px solid rgba(255, 255, 255, 0);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: var(--primary);               /* 悬停时用主色调 */
}

.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--primary) !important;    /* 激活状态用主色调 */
}

按钮样式

按钮是用户交互的核心，这里给它加点样式，让它更吸引人。

/* 【按钮】 */
.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.21rem;
    transition: all 0.15s ease-in-out;   /* 加点过渡效果 */
}

.btn:hover {
    transform: translateY(-0.07rem);     /* 悬停时往上移一点 */
    box-shadow: 0 0.28rem 0.56rem rgba(0, 0, 0, .08); /* 加点阴影 */
}

.btn-primary {
    color: var(--white);                 /* 白色文字 */
    background-color: var(--primary);    /* 主色调背景 */
    border-color: var(--primary);        /* 主色调边框 */
}

.btn-primary:hover {
    color: var(--white);                 /* 悬停时保持白色文字 */
    background-color: var(--primary-hover); /* 悬停时用主色调的悬停状态 */
    border-color: var(--primary-hover);  /* 边框也用悬停状态 */
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: var(--white);                 /* 激活状态保持白色文字 */
    background-color: var(--primary-focus); /* 激活状态用主色调的聚焦状态 */
    border-color: var(--primary-focus);  /* 边框也用聚焦状态 */
}

.list-group-item.active {
    z-index: 2;
    color: var(--white);                 /* 激活状态用白色文字 */
    background-color: var(--primary-hover); /* 背景用主色调的悬停状态 */
    border-color: var(--primary-hover);  /* 边框也用悬停状态 */
}

.aside .btn {
    padding: 0.71rem;                    /* 侧边栏按钮的内边距 */
}

杂项样式

最后，处理一些小细节，比如面包屑导航和头像。

/* 【杂项】 */
.breadcrumb {
    background: var(--white) !important; /* 白色背景 */
    border: none;                        /* 去掉边框 */
    box-shadow: 0 0.07rem 0.14rem 0 rgba(0, 0, 0, .04); /* 加点阴影 */
}

.avatar-3 {
    border-radius: 0.21rem;              /* 头像加个圆角 */
}

响应式适配

为了让页面在不同设备上都能正常显示，这里加点响应式样式。

/* 【响应式适配】 */
@media (min-width: 576px) {
    #body {
        padding-top: 1.42rem;            /* 桌面端顶部间距 */
    }
}

@media (max-width: 576px) {
    #body {
        padding-top: 0.71rem;            /* 移动端顶部间距 */
    }
    #body > .container > .row > div {
        padding: 0;                      /* 移动端去掉内边距 */
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 68.5rem;              /* 大屏幕上限制容器宽度 */
    }
}

启用新主题

经过上述步骤后，您的Xiuno BBS站点将具有以下变化：

  • 页眉导航栏背景变为白色，文字颜色为深灰色，悬停和聚焦时链接颜色变为绿色。
  • 主要按钮背景颜色为绿色，鼠标悬停时颜色加浅，激活时颜色更深。
  • 激活或选中的标签文字颜色与底部边框颜色变为绿色。

这些简单的改动可以让您的站点看起来更加现代化和吸引人。

结束语

通过本教程，您学习了如何使用CSS的核心概念来创建美观的Xiuno BBS主题。虽然这只是入门级别的定制，但着实展示了如何利用自定义CSS来快速提升站点的视觉效果。

随着您对Xiuno BBS和Bootstrap 4的熟悉程度增加，您可以进一步探索更多高级定制选项，以满足您的具体需求。敬请期待未来的《Xiuno BBS 开发实践教程 - 主题 - The Hard Way》。

上传的附件：
收藏的用户（1） X
正在加载信息~
相关帖子
最新回复 (2)
全部楼主
  • Tillreetree 版主 楼主
    1小时前 2楼
    0
    续集难产了，因为要讲解的点过多
  • Airhelym
    42分钟前 3楼
    0

    当初摸索时，我是对着MDN、菜鸟教程和现有插件一点点调试的。
    感觉如果只是外观样式方面调整，这两个站可以解决一些入门问题，但仍需加以变通。

返回
Tillreetree
版主
131
主题数 		1072
帖子数
  作者最近主题   
  引用仅你和被引用者可见
   Xiuno BBS 开发实践教程 - 主题 - The Easy Way
   重新审视兴趣与生活的平衡
   灵澜主题：轻盈如风，流畅如水
   Xiuno BBS 开发实践教程 - 网站大事记
扫码访问