不知不觉，这已是MoreSound电子音乐社区运行的第四个年头，最近半年对社区从内而外进行了大量升级与优化，今天尝试写一篇笔记来记录一下。
社区使用了简洁美观的Flarum作为网站程序，并进行了大量的细节调整，力求获得较好的用户体验。
社区目前运行在香港腾讯云的一台 2H2G 的轻量服务器上，搭配OpenLiteSpeed+CyberPanel的作为服务器后端以及管理程序。得益于 OLS 的 lsphp 的低内存占用以及 LsCache 的缓存，Flarum在 2H2G 的较低配置环境下仍然可以实现较高并发数和较快的响应速度。
对于网络与文件存储，目前采用 CloudFlare CDN 与 CloudFlare R2 对象存储，以求获得较高的稳定性与较低的成本，CDN 及 R2 对象存储均进行了 SaaS 大陆三网 IP 优选以及缓存设置。
自定义扩展：
clamours/flarum-sticky-sidenav-blog
clamours/flarum-header-slideshow
clamours/flarum-music-link-preview
自定义CSS/LESS代码：
/* 搜索结果关键字高亮 */
.DiscussionListItem-main mark {
background: #ffff80 !important;
}
/* 屏蔽注册时间 */
li.item-joined {
display: none;
}
/* 屏蔽个人主页金钱 */
li.item-money {
display: none;
}
/* 屏蔽名称历史 */
li.item-username-requests {
display: none;
}
/* 通过按钮的 aria-label 属性来选择要隐藏的按钮 */
button[aria-label="黑幕"] {
display: none;
}
button[aria-label="图片"] {
display: none;
}
button[aria-label="行内代码"] {
display: none;
}
button[aria-label="有序列表"] {
display: none;
}
button[aria-label="插入付费阅读"] {
display: none;
}
button[aria-label="链接"] {
display: none;
}
button[aria-label="表情"] {
display: none;
}
button[aria-label="插入回复可见"] {
display: none;
}
button[aria-label="插入下载地址"] {
display: none;
}
/* 屏蔽个人主页的私密话题按钮 */
li.item-byobu a.hasIcon[href*="/u/"][href$="/private"] {
display: none;
}
/* 去除留白区域 */
@media (min-width: 992px) {
.Post-header>ul {
height: 15px;
}
}
/* 使用正确的选择器来选择搜索框中的占位符文本 */
.IndexPage-toolbar .IndexPage-toolbar-view .item-search input::placeholder {
font-size: 13px; /* 你希望的字体大小 */
}
/* 屏蔽博客侧边栏文章板块 */
li.item-categories {
display: none;
}
div.BlogCategories.BlogSideWidget {
display: none;
}
/* 移动设备反馈按钮上移 */
@media only screen and (max-width: 767px) {
#feedback-btn {
margin-top: -90px; /* 负值表示向上移动 */
}
#feedback-main {
transform: translateY(-90px) !important; /* 负值表示向上移动 */
}
#feedback-close {
margin-top: -90px; /* 负值表示向上移动 */
}
}
.carousel {
display: none;
}
body.home .carousel {
display: block;
}
/* 屏蔽掉关闭Hero按钮 */
.Hero-close {
display: none;
}
/* 屏蔽掉0条未读 */
.Scrubber-unread {
display: none;
}
.Button.Dropdown-toggle[aria-label="用户下拉菜单开关"] {
position: relative;
right: 30px;
}
.FlarumBlog-ToolButtons {
display: none;
}
.FlarumBlog-Article-Sidebar.item-nav {
display: none;
}
/* 帖子内容字体大小 */
.Post-body {font-size: 15px;}
/* 移动端标题字体 */
@media (max-width: 767px){.DiscussionListItem-title { font-size: 16px; font-weight: 500;}}
/* 桌面端标题字体 */
@media (min-width: 768px){.DiscussionListItem-title { font-size: 17px; font-weight: 500;}}
/* 移动端标题字体 */
@media (max-width: 767px){div.BlogForumNav.BlogSideWidget { display: none;}}
/* 概要字体 */
.item-excerptM div {
color: #999; /* 或者其他颜色值，如 #333、#00704a 等 */
}
/* 屏蔽时间跨度 */
div.PostStream-timeGap {
display: none;
}
/* 移动端公告条圆角 */
@media (max-width: 767px){.AfruxWidgets-Widget.Afrux-NewsWidget {
border-radius: 10px; /* 使用10像素的半径，可以根据需要调整 */
}
}
/* 博客列表黑色字体 */
div.BlogList {
h4 {
font-weight: 500;
color: black; // 默认颜色，假设为深色
& when (@config-dark-mode = true) {
color: white; // 在非暗黑模式下的颜色，假设为浅色
}
}
/* 博客列表灰色字体 */
p {
color: #999;
}
}
.UserCard.Hero.UserHero {
border-radius: 8px; /* 使用10像素的半径，可以根据需要调整 */
}
@media (min-width: 768px) and (max-width: 1024px) {
/* 在平板电脑上应用的样式 */
div.Sidebar {
display: none;
}
}
/* 默认样式适用于桌面端 */
h1.DiscussionHero-title {
font-size: 24px;
font-weight: 500;
}
/* 在小屏幕上（例如移动设备）应用不同的样式 */
@media screen and (max-width: 767px) {
h1.DiscussionHero-title {
font-size: 18px; /* 适应移动端的字号 */
font-weight: 500;
}
}
@media only screen and (max-width: 767px) {
.AfruxWidgets-topWidgetSection {
margin-top: -5px !important;
border-radius: 5px !important;
}
}
发表回复