新主题

与 Gzip 一样，Brotli 也是 Google 开发的通用压缩算法。它结合现代技术和算法来压缩数据。它的速度与放气相似，但提供更高的压缩。所有主要浏览器（例如 Chrome、Firefox、Safari、Edge）都支持 Brotli 压缩。

本教程帮助您在 Apache Web 服务器和 Xenforo 2 中启用 brotli 压缩。

以下是在 Apache（也称为 apache2）上启用 Brotli 压缩的方法：

1. 安装 Brotli 模块：
sudo apt install brotli

2. 启用 Brotli 模块：
sudo a2enmod brotli

3. 配置 Brotli 压缩：
接下来，您需要配置 Apache 以使用 Brotli 压缩。为此，您需要将以下代码添加到 Apache 配置文件中：

代码:

<IfModule mod_brotli.c>
    AddOutputFilterByType BROTLI_COMPRESS text/plain text/javascript text/html text/xml text/css text/vtt text/x-component application/xml application/xhtml+xml application/rss+xml application/js application/javascript application/x-javascript application/x-httpd-php application/x-httpd-fastphp application/atom+xml application/json application/ld+json application/x-web-app-manifest+json application/manifest+json
    BrotliCompressionQuality 4
</IfModule>

注意：如果您使用 DEFLATE mod，请删除其配置行。

4. 错误检查：
sudo apache2ctl configtest

5. 重新启动 Apache 服务器：
sudo systemctl reload apache2

6. 在 Xenforo 上禁用 enableGzip 2
打开文件 src/config.php。添加以下行：
$config['enableGzip'] = false;

oksgo · 02 14, 2024

oksgo · 02 14, 2024

oksgo · 02 14, 2024

oksgo · 02 14, 2024

oksgo · 02 14, 2024

oksgo · 02 13, 2024

oksgo · 02 12, 2024

转到 widgets admin.php?widgets，选择添加 HTML 小部件并编写代码：

Less:

<div class='filter'>
  <p class='title_items'>Type</p>
  <ul>
    <li>
      <input id='all' name='type' type='radio'>
      <label for='all'>All</label>
    </li>
    <li>
      <input id='website' name='type' type='radio'>
      <label for='website'>Website</label>
    </li>
    <li>
      <input id='icon' name='type' type='radio'>
      <label for='icon'>Icon</label>
    </li>
    <li>
      <input id='mobile' name='type' type='radio'>
      <label for='mobile'>Mobile</label>
    </li>
    <li>
      <input id='logo' name='type' type='radio'>
      <label for='logo'>Logo</label>
    </li>
    <li>
      <input id='print' name='type' type='radio'>
      <label for='print'>Print</label>
    </li>
    <li>
      <input id='ui' name='type' type='radio'>
      <label for='ui'>UI</label>
    </li>
    <li>
      <input id='illustration' name='type' type='radio'>
      <label for='illustration'>Illustration</label>
    </li>
  </ul>
  <p class='title_items'>City</p>
  <ul>
    <li>
      <input id='ny' name='city' type='radio'>
      <label for='ny'>New York</label>
    </li>
    <li>
      <input id='va' name='city' type='radio'>
      <label for='va'>Vancouver</label>
    </li>
    <li>
      <input id='la' name='city' type='radio'>
      <label for='la'>Los Angeles</label>
    </li>
    <li>
      <input id='ch' name='city' type='radio'>
      <label for='ch'>Chicago</label>
    </li>
    <li>
      <input id='se' name='city' type='radio'>
      <label for='se'>Seattle</label>
    </li>
    <li>
      <input id='san' name='city' type='radio'>
      <label for='san'>San Francisco</label>
    </li>
    <li>
      <input id='to' name='city' type='radio'>
      <label for='to'>Toronto</label>
    </li>
  </ul>
  <p class='title_items'>Budget</p>
  <ul>
    <li>
      <input id='small' name='bonus' type='radio'>
      <label for='small'>100 - 300</label>
    </li>
    <li>
      <input id='medium' name='bonus' type='radio'>
      <label for='medium'>300 - 1000</label>
    </li>
    <li>
      <input id='big' name='bonus' type='radio'>
      <label for='big'>1000 - 3000</label>
    </li>
    <li>
      <input id='bigest' name='bonus' type='radio'>
      <label for='bigest'>more 3000</label>
    </li>
  </ul>
</div>


<style>
.filter {
  width: 220px;
  font-family: 'Whitney', sans-serif;
}
.filter p {
  padding: 0 10px;
}
.filter p, .filter li {
  font-weight: bold;
  line-height: 35px;
  font-size: 12px;
}
.filter .title {
  color: #fff;
  background-color: #1ba0eb;
  -moz-border-radius: 3px 3px 0 0;
  -webkit-border-radius: 3px;
  border-radius: 3px 3px 0 0;
}
.filter .title_items {
  color: #94a4c3;
  cursor: pointer;
  position: relative;
  background-color: #fff;
  border-bottom: 1px solid #e4effd;
  -moz-transition: linear 0.2s background-color;
  -o-transition: linear 0.2s background-color;
  -webkit-transition: linear 0.2s background-color;
  transition: linear 0.2s background-color;
}
.filter .title_items:hover {
  background-color: #f4f4f4;
}
.filter .title_items.active + ul + .title_items {
  border-top: 1px solid #e4effd;
}
.filter .title_items.active:after {
  height: 5px;
  width: 5px;
  right: 14px;
  margin-top: -2.5px;
}
.filter .title_items:before, .filter .title_items:after {
  content: "";
  position: absolute;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background-color: #c3d0e8;
  -moz-transition: linear 0.3s all;
  -o-transition: linear 0.3s all;
  -webkit-transition: linear 0.3s all;
  transition: linear 0.3s all;
}
.filter .title_items:before {
  height: 5px;
  width: 13px;
  top: 50%;
  right: 10px;
  margin-top: -2.5px;
}
.filter .title_items:after {
  height: 13px;
  width: 5px;
  top: 50%;
  right: 14px;
  margin-top: -6.5px;
}
.filter ul {
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
    list-style-type: none;
}
.filter ul li {
  height: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  color: #92a5bf;
  background-color: #f5f8fe;
  -moz-transition: linear 0.2s all;
  -o-transition: linear 0.2s all;
  -webkit-transition: linear 0.2s all;
  transition: linear 0.2s all;
}
.filter ul li:nth-child(odd) {
  -moz-transform: scale(0.5) translateX(-150px);
  -ms-transform: scale(0.5) translateX(-150px);
  -webkit-transform: scale(0.5) translateX(-150px);
  transform: scale(0.5) translateX(-150px);
}
.filter ul li:nth-child(even) {
  -moz-transform: scale(0.5) translateX(150px);
  -ms-transform: scale(0.5) translateX(150px);
  -webkit-transform: scale(0.5) translateX(150px);
  transform: scale(0.5) translateX(150px);
}
.filter ul li.visible {
  height: 36px;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  -moz-transform: scale(1) translateX(0);
  -ms-transform: scale(1) translateX(0);
  -webkit-transform: scale(1) translateX(0);
  transform: scale(1) translateX(0);
  position: relative;
  left: -36px;
  width: 217px;
}
.filter ul li:last-child label {
  border-bottom: none;
}
.filter ul li:nth-child(1) label:before, .filter ul li:nth-child(1) label:after {
  border-color: #5db6e2;
}
.filter ul li:nth-child(2) label:before, .filter ul li:nth-child(2) label:after {
  border-color: #c0a2f1;
}
.filter ul li:nth-child(3) label:before, .filter ul li:nth-child(3) label:after {
  border-color: #f7a238;
}
.filter ul li:nth-child(4) label:before, .filter ul li:nth-child(4) label:after {
  border-color: #f6d04d;
}
.filter ul li:nth-child(5) label:before, .filter ul li:nth-child(5) label:after {
  border-color: #40c9a1;
}
.filter ul li:nth-child(6) label:before, .filter ul li:nth-child(6) label:after {
  border-color: #ea8b8b;
}
.filter ul li:nth-child(7) label:before, .filter ul li:nth-child(7) label:after {
  border-color: #fe8ae0;
}
.filter ul li:nth-child(8) label:before, .filter ul li:nth-child(8) label:after {
  border-color: #abb6d2;
}
.filter input[type="radio"] {
  display: none;
}
.filter input[type="radio"]:checked + label:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.filter label {
  margin: 0 15px;
  display: block;
  cursor: pointer;
  position: relative;
  padding: 0 10px 0 25px;
  border-bottom: 1px solid #ddebfd;
}
.filter label:before {
  content: "";
  height: 10px;
  width: 10px;
  top: 50%;
  left: 0;
  margin-top: -9px;
  position: absolute;
  border-width: 3px;
  border-style: solid;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.filter label:after {
  content: "";
  top: 50%;
  left: 5px;
  margin-top: -4px;
  position: absolute;
  border-width: 3px;
  border-style: solid;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-transition: linear 0.2s all;
  -o-transition: linear 0.2s all;
  -webkit-transition: linear 0.2s all;
  transition: linear 0.2s all;
}
</style>
<xf:js>
$(function() {
 
  transition_timeout = 40;
 
  $('.title_items').click(function() {
   
    current = $(this).next().find('li');
   
    $(this).toggleClass('active');
    current.toggleClass('visible');
   
    if ($(this).hasClass('active')) {
      for( i = 0; i <= current.length; i++ ) {
        $(current[i]).css('transition-delay', transition_timeout * i + 'ms');
      }
    }
    else {
      for( i = current.length, j = -1; i >= 0; i--, j++) {
        $(current[i]).css('transition-delay', transition_timeout * j + 'ms');
      }
    }
 
  });
});
</xf:js>

oksgo · 02 12, 2024

这是顶部导航菜单的超级菜单的示例代码：

HTML:

<div class="cxf-megaMenu">
    <div class="cxf-megaMenu-column">
        <h3>First Category</h3>
        <ul>
            <li><a href="#">Test link</a></li>
            <li><a href="#">Another test link</a></li>
            <li><a href="#">Just testing</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Maybe longer test link</a></li>
            <li><a href="#">Other links</a></li>
            <li><a href="#">New link</a></li>
            <li><a href="#">End link</a></li>
        </ul>
    </div>

    <div class="cxf-megaMenu-column">
        <h3>Home</h3>
        <ul>
            <li><a href="#">Hometown</a></li>
            <li><a href="#">Room</a></li>
            <li><a href="#">Garden</a></li>
        </ul>

        <h3>Far far away</h3>
        <ul>
            <li><a href="#">Sea</a></li>
            <li><a href="#">Mountains</a></li>
            <li><a href="#">Hills</a></li>
        </ul>
    </div>

    <div class="cxf-megaMenu-column">
        <h3>Some category</h3>
        <ul>
            <li><a href="#">customizeXF</a></li>
            <li><a href="#">Add-ons</a></li>
            <li><a href="#">DIY</a></li>
            <li><a href="#">Icons</a></li>
            <li><a href="#">Nodes</a></li>
            <li><a href="#">Style properties</a></li>
            <li><a href="#">Options</a></li>
            <li><a href="#">Admin</a></li>
        </ul>
    </div>

    <div class="cxf-megaMenu-column">
        <h3>Related Categories</h3>
        <ul>
            <li><a href="#">XenForo</a></li>
            <li><a href="#">Forums</a></li>
            <li><a href="#">Website</a></li>
        </ul>

        <h3>Contact</h3>
        <ul>
            <li><a href="#">Hello</a></li>
            <li><a href="#">The end</a></li>
        </ul>
    </div>
</div>

<style>
.cxf-megaMenu,
.cxf-megaMenu a,
.cxf-megaMenu ul,
.cxf-megaMenu li,
.cxf-megaMenu div {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
.cxf-megaMenu {
    display: inline-block;
    width: 100%;
}
.cxf-megaMenu .cxf-megaMenu-column {
    float: left;
    max-width: 100%;
    padding: 0 2%;
}
.cxf-megaMenu ul li {
    display: block;
}
.cxf-megaMenu h4 {
    font-size: 18px;
}
</style>

插件地址：

https://oksgo.com/resources/157/

oksgo · 02 12, 2024

转到 widgets admin.php?widgets，选择添加 HTML 小部件并编写代码：

HTML:

        <div class="lines">
            <div class="line" style="width: 69px;"></div>
            <div class="line" style="width: 59px;"></div>
            <div class="line" style="width: 66px;"></div>
            <div class="line" style="width: 46px;"></div>
        </div>
  </div>
   
    <div class="datas">
       
        <div class="data users">
            <div class="text">
                <span class="left">1 User</span>
                <span class="right">5 Users</span>
            </div>
            <div class="line">
                <div class="fill"></div>
            </div>
        </div>
       
        <div class="data gb">
            <div class="text">
                <span class="left">2 GB</span>
                <span class="right">20 GB</span>
            </div>
            <div class="line">
                <div class="fill"></div>
            </div>
        </div>
       
        <div class="data projects">
            <div class="text">
                <span class="left">1 项目</span>
                <span class="right">5 项目</span>
            </div>
            <div class="line">
                <div class="fill"></div>
            </div>
        </div>
       
    </div>
   
</div>
<style>
.frame {
    position: relative;
    width: 100%;
    height: 325px;
    border-radius: 2px;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    background: #E9EDEF;
    color: #5E5E5E;
    font-family: "Open Sans", Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.plan {
    position: absolute;
    width: 65px;
    height: 135px;
    top: 10px;
    left: 10px;
    background: #fff;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.plan.basic:hover ~ .datas .users .fill,
.plan.basic:hover ~ .datas .gb .fill,
.plan.basic:hover ~ .datas .projects .fill {
  transform: scaleX(0.05) translate3d(0, 0, 0);
}
.plan.pro {
  left: 83px;
}
.plan.pro:hover ~ .datas .users .fill {
  transform: scaleX(0.3) translate3d(0, 0, 0);
}
.plan.pro:hover ~ .datas .gb .fill {
  transform: scaleX(0.7) translate3d(0, 0, 0);
}
.plan.pro:hover ~ .datas .projects .fill {
  transform: scaleX(0.5) translate3d(0, 0, 0);
}
.plan.premium {
  left: 155px;
}
.plan.premium:hover ~ .datas .users .fill,
.plan.premium:hover ~ .datas .gb .fill,
.plan.premium:hover ~ .datas .projects .fill {
  transform: scaleX(1) translate3d(0, 0, 0);
}
.plan:hover {
  transform: scale(1.1) translate3d(0, 0, 0);
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.1);
}
.plan:hover .title {
  background: #27A6D2;
}
.plan:hover .price {
  color: #27A6D2;
}
.plan .title {
  height: 36px;
  text-align: center;
  background: #7DD0ED;
  color: #fff;
  font-weight: 600;
  line-height: 36px;
  font-size: 14px;
  transition: all 0.3s ease-in-out;
}
.plan .price {
    text-align: center;
    font-size: 30px;
    line-height: 30px;
    font-weight: 700;
    padding: 6px 0 7px 0;
    transition: all 0.3s ease-in-out;
}
.plan .price span {
  display: block;
  font-size: 12px;
  line-height: 12px;
  font-weight: 400;
}
.plan .line {
  height: 3px;
  background: #E4E4E4;
  margin: 0 auto 7px auto;
}

.datas {
    position: absolute;
    height: 160px;
    width: 92%;
    top: 157px;
    left: 10px;
    background: #fff;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.datas .data {
  margin: 17px 15px 0 15px;
}
.datas .data .text {
  font-size: 12px;
  height: 20px;
}
.datas .data .text .left {
  float: left;
}
.datas .data .text .right {
  float: right;
}
.datas .data .line {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 10px;
  background: #E9EDEF;
  border-radius: 5px;
  overflow: hidden;
}
.datas .data .line .fill {
  position: relative;
  z-index: 1;
  height: 10px;
  width: 100%;
  background: #7DD0ED;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: all 0.3s ease-in-out;
  border-radius: 3px;
}
</style>

oksgo · 02 12, 2024

oksgo 提交新资源：

DohTheme - Royal - DohTheme - Royal

浏览附件1150

阅读关于此资源更多信息...

oksgo · 02 10, 2024

oksgo 提交新资源：

UI.X 2 Add-on - UI.X 2 Add-on 2.2.0 Patch Level 3

该附加组件是我们 XenForo 主题产品线的基础。这是必要的功能，使我们能够扩展 XenForo 软件，以便能够完成主题项单独无法完成的事情。

它保持独立，因为它不以任何方式与主题、视图、图像、文件或模板绑定。当主题需要更新时，附加组件可能并不总是需要更新，因为主题通常需要在每次更新 XenForo 软件时进行更新。

TH] UI.X 模板插件
安装ThemeHouse的主题之前需安装此插件！

阅读关于此资源更多信息...

oksgo · 02 10, 2024

oksgo 提交新资源：

OpenAI Davinci - AI 写作助手和内容创建 - OpenAI Davinci - AI 写作助手和内容创建

浏览附件1143

阅读关于此资源更多信息...

oksgo · 02 9, 2024

oksgo 提交新资源：

PlayLab Nulled – 点播电影流媒体平台 - PlayLab Nulled – 点播电影流媒体平台

浏览附件1141

阅读关于此资源更多信息...

搜索

新主题

新主题

欢迎客人!

仅显示:

Add-ons/Plugins ThemeHouse-Nodes 中文包

Add-ons/Plugins ThemeHouse-Nodes

Add-ons/Plugins Snog-Movies 电影线程启动器中文包

Add-ons/Plugins Leopard - WordPress Offload Media

Wordfence Security Premium

Add-ons/Plugins Ultimate Membership Pro - WordPress Membership

Ultimate Affiliate Pro - WordPress/WooCommerce 联盟插件

Style/Theme UI.X Pro

ALL Thrive Plugins Bundle February

Add-ons/Plugins OzzModz - 阿凡达画廊 Avatar Gallery 中文包

Add-ons/Plugins OzzModz - 阿凡达画廊 Avatar Gallery

Tutorial/教程 Xenforo 2 启用 Brotli 压缩

附件

Style/Theme King – Viral Magazine WordPress Theme

Shopify Quickstore – 大型商店多功能 Shopify 商店

PHP/Scripts DNS Manager For WHMCS untouched

PHP/Scripts Lagom 电子邮件模板

PHP/Scripts Lagom WHMCS 客户端主题 By RSStudio

删除禁止的用户名 Slash through Banned Usernames

Tutorial/教程包含有用信息的手风琴小部件

附件

Tutorial/教程 cXF - 超级菜单 DIY 示例代码

附件

Tutorial/教程付费用户升级小部件

附件

Style/Theme DohTheme - Royal

Add-ons/Plugins UI.X 2 Add-on

PHP/Scripts OpenAI Davinci - AI 写作助手和内容创建

PHP/Scripts PlayLab Nulled – 点播电影流媒体平台

过滤器

热门资源

新主题

新主题

欢迎客人!

Add-ons/Plugins ThemeHouse-Nodes 中文包

Add-ons/Plugins ThemeHouse-Nodes

Add-ons/Plugins Snog-Movies 电影线程启动器 中文包

Add-ons/Plugins Leopard - WordPress Offload Media

Wordfence Security Premium

Add-ons/Plugins Ultimate Membership Pro - WordPress Membership

Ultimate Affiliate Pro - WordPress/WooCommerce 联盟插件

Style/Theme UI.X Pro

ALL Thrive Plugins Bundle February

Add-ons/Plugins OzzModz - 阿凡达画廊 Avatar Gallery 中文包

Add-ons/Plugins OzzModz - 阿凡达画廊 Avatar Gallery

Tutorial/教程 Xenforo 2 启用 Brotli 压缩

附件

Style/Theme King – Viral Magazine WordPress Theme

Shopify Quickstore – 大型商店多功能 Shopify 商店

PHP/Scripts DNS Manager For WHMCS untouched

PHP/Scripts Lagom 电子邮件模板

PHP/Scripts Lagom WHMCS 客户端主题 By RSStudio

删除禁止的用户名 Slash through Banned Usernames

Tutorial/教程 包含有用信息的手风琴小部件

附件

Tutorial/教程 cXF - 超级菜单 DIY 示例代码

附件

Tutorial/教程 付费用户升级小部件

附件

Style/Theme DohTheme - Royal

Add-ons/Plugins UI.X 2 Add-on

PHP/Scripts OpenAI Davinci - AI 写作助手和内容创建

PHP/Scripts PlayLab Nulled – 点播电影流媒体平台

登录

过滤器

热门资源

Add-ons/Plugins Snog-Movies 电影线程启动器中文包

Tutorial/教程包含有用信息的手风琴小部件

Tutorial/教程付费用户升级小部件