Scss loading problem caused by pjax asynchronous refresh

support
1

the theme I am using is codex , very simple. So I want to add a global music player to MyWebsite ——APlayer+MetingJS+Pjax. I first wrapped it in music.html, the code is:

<!DOCTYPE html>
<html>
<head>
    <!-- require APlayer -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
    <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
    <!-- require MetingJS -->
    <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
	<!-- require pjax -->
    <script src='https://cdn.bootcdn.net/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
    <script src='https://cdn.bootcdn.net/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js'></script>
	<script>
      $(document).pjax('a[target!=_blank]', 'main', {fragment: 'maint', timeout:8000})
	</script> 
</head>
<body>
  <div id="player" bottom="30px">
    <meting-js server="netease" type="playlist" id="8422168819"
	fixed="true"  autoplay="false" loop="all" order="random" preload="auto"
	list-folded="ture" list-max-height="400px" lrc-type="0">
    </meting-js>
  </div>
  </body>
</html>

At this moment, I noticed there are issues with the CSS styles during page loading. It’s worth noting that this theme has three types of pages: blog list(list.html-posts.scss), blog post(single.html-post.scss), and greeting interface(index.html-about.scss). And in baseof.html, using code like this to load styles based on different pages:

<!-- Styles -->
  {{ block "styles" . }} {{ end }} <!-- Get "style_opts" variable from "styles" block -->
  {{ $base_styles_opts := .Scratch.Get "style_opts" | default (dict "src" "scss/pages/about.scss" "dest" "css/about.css") }}
  {{ $custom_styles_opts := (dict "src" "scss/custom.scss" "dest" "css/custom.css") }}
  
  {{ $current_page := . }}

  {{ range (slice $base_styles_opts $custom_styles_opts) }}
    {{ $style := resources.Get .src | resources.ExecuteAsTemplate .dest $current_page | toCSS | minify | fingerprint }}
    <link type="text/css" id="shit" rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}"/>
  {{ end }}

So only refreshing the content within <main> doesn’t change the currently loaded CSS file. However, there are conflicting parts in post.scss, posts.scss, and about.scss, causing the page styles to become chaotic. I’ve identified the issue but haven’t found a solution. I tried refreshing the <head> tag, but it failed; separating styles for different pages during loading also didn’t work. I even attempted to force-refresh CSS styles using JavaScript after pjax loading, but it still failed. Any suggestions from everyone? Of course, the ultimate solution would be to write all the SCSS into a single file, but I really don’t want to do that…

By the way, the author of this theme has stopped updating and maintaining it.

44
441171×562 39.5 KB