侧边栏壁纸
博主头像
沙漠渔

把過去的累積,善用到當下

  • 累计撰写 490 篇文章
  • 累计创建 295 个标签
  • 累计收到 960 条评论
标签搜索

目 录CONTENT

文章目录

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

沙漠渔
2022-06-15 / 1 评论 / 2 点赞 / 134 阅读 / 2,031 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-06-15,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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

细心的人大概已经发现了,自从升级到最新版本之后,页面宽度基本就成了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家族的软件等,方便获取历史变更版本回退。

2
广告 广告

评论区