修改当前主题，不再mini，宽度调整为正常宽度1320px(后台可配置)

人生不如意，十有八九，不如意了怎么办呢？自己想办法呗~

细心的人大概已经发现了，自从升级到最新版本之后，页面宽度基本就成了mini版了，并且最为严重的是，后台设置页面宽度为1320px并未生效啊？为啥嘞？

当然，排查问题的过程就是F12咯，但是具体怎么修改这里就直接说了~

原因就在这下面几段代码，想看的就看一下，不想看的跳过直接去后面看怎么修改，当然修改很简单。
当前显示出来的样式来自于global.min.css
样式代码:

@media (min-width: 576px) {
  #Joe>.joe_container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  #Joe>.joe_container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  #Joe>.joe_container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  #Joe>.joe_container {
    max-width: 1140px;
  }
}

这里做一个科普:

@media (max-width: 767px) { ... col-xs-3... } { //<=767的设备 } 手机
@media (min-width: 768px) { ... col-sm-3... } { //>=768的设备 } 平板
@media (min-width: 992px) { ... col-md-3...} { //>=992的设备 } 电脑
@media (min-width: 1200px) { ... col-lg-3...} { //>=1200的设备 } 大显示器

我们可以看到看到我们实际显示的这里是1140宽度，即屏幕尺寸大于1200时，按照1140显示，具体为什么会显示为这个样式呢？在link.ftl引入样式文件的时候，大家可以看到：

  <style>
    #Joe .joe_container {
      max-width: ${settings.content_max_width!"1320px"};
    }
  </style>
  <link rel="stylesheet" href="${BASE_RES_URL}/source/lib/qmsg/qmsg.css">
  <link rel="preload stylesheet" as="style" href="${BASE_RES_URL}/source/lib/animate/animate.min.css">
  <#if type == 'index' && settings.enable_banner == true>
    <link rel="stylesheet" href="${BASE_RES_URL}/source/lib/swiper/swiper.min.css">
  </#if>
  <#if type == 'post' || type == 'journals' || type == 'sheet'>
    <link rel="preload stylesheet" as="style" href="${BASE_RES_URL}/source/lib/prism/prism.min.css?v=${theme.version!}">
    <link rel="preload stylesheet" as="style" href="${BASE_RES_URL}/source/lib/prism/themes/prism-${(meta?? && metas.code_theme?? && metas.code_theme?trim!='')?then(metas.code_theme?trim,settings.code_theme)}.css?v=${theme.version!}">
  </#if>
  <link rel="preload stylesheet" as="style" href="${BASE_RES_URL}/source/css/min/global.min.css?v=${theme.version!}">

看出端倪来了没? 这里按照后台样式修改了之后或者后台不设置默认按照1320执行之后，引入了global.min.css，也就是前面代码块里的样式信息了，所以解决方法就出来了

方法一 把link.ftl内的样式添加important

即便后面有样式，也按照这里来，即：

  <style>
    #Joe .joe_container {
      max-width: ${settings.content_max_width!"1320px"}!important;
    }
  </style>

以上代码块只填了主要代码,自行比对代码位置修改。

方法二 把他们的先后顺序调整一下咯

再稍微科普一下 css选择器的执行顺序

css选择器优先级最高到最低顺序为：

1.id选择器(#id)
2.类选择器(.classname)
3.标签选择器(div,h1,p)
4.子选择器(ul < li)
5.后代选择器(li a)
6.伪类选择(a:hover,li:nth-child)

这样把link.ftl里按照如下顺序调整一下就可以了

  <link rel="stylesheet" href="${BASE_RES_URL}/source/lib/qmsg/qmsg.css">
  <link rel="preload stylesheet" as="style" href="${BASE_RES_URL}/source/lib/animate/animate.min.css">
  <#if type == 'index' && settings.enable_banner == true>
    <link rel="stylesheet" href="${BASE_RES_URL}/source/lib/swiper/swiper.min.css">
  </#if>
  <#if type == 'post' || type == 'journals' || type == 'sheet'>
    <link rel="preload stylesheet" as="style" href="${BASE_RES_URL}/source/lib/prism/prism.min.css?v=${theme.version!}">
    <link rel="preload stylesheet" as="style" href="${BASE_RES_URL}/source/lib/prism/themes/prism-${(meta?? && metas.code_theme?? && metas.code_theme?trim!='')?then(metas.code_theme?trim,settings.code_theme)}.css?v=${theme.version!}">
  </#if>
  <link rel="preload stylesheet" as="style" href="${BASE_RES_URL}/source/css/min/global.min.css?v=${theme.version!}">
  <style>
    #Joe .joe_container {
      max-width: ${settings.content_max_width!"1320px"};
    }
  </style>

方法三

如果实在不想修改代码，也可以，joe支持自定义CSS，在主题设置内-》自定义 选项中添加如下代码到自定义css即可：

    #Joe .joe_container {
      max-width: 1320px !important;
    }

具体在哪就不截图了，可以直接看到，这种方式虽然不用修改代码，但是后台自定义配置也就没什么什么作用了

好啦，上面三种方式自己选择，到这里就显示正常了，后台默认配置的是1320px，看看你的页面是不是也调整为1320了？ 不做mini的自己~

效果预览

就看本站就可以了~ http://www.sammery.com

Tips：
1- 如果修改了之后没有起作用，不要灰心，看看是不是没有清空缓存？CDN是不是没有更新？
2- 修改之前请做好备份，或者用notepad++、JB家族的软件等，方便获取历史变更版本回退。