Within the configuration file conf.py for Sphinx, I have specified the following:
html_css_files = ['css/custom.css']
html_js_files = ['js/custom.js']
However, any alterations made to custom.js or custom.css do not immediately appear in the user's browser unless the URL http://www.example.com/_static/js/custom.js is forcefully reloaded on the client (same applies for CSS).
Is there a way to ensure that the custom CSS + JS files are never cached by the user's browser?
Recent builds using the following solution are encountering failures with the error message:
Reason: ThemeError("Local asset file paths must not contain query strings: '_static/custom.css?v=12345678'")
Bug reports indicate that this issue has also affected builds in other major projects such as MathJax, NumPy, Gentoo, and Bokeh.
As per a comment by a contributor to Sphinx, the new approach involves Sphinx handling cache busting through a content checksum, eliminating the need for manual cache busting.
Although the configuration file seems to only support standard string values, it is essentially a Python script allowing us to utilize functions like a random number generator.
Add the following line at the top of conf.py:
from secrets import token_urlsafe
Modify your custom CSS + JS as follows:
html_css_files = [f'css/custom.css?v={token_urlsafe(8)[:8]}']
html_js_files = [f'js/custom.js?v={token_urlsafe(8)[:8]}']
This change will ensure that your custom CSS + JS files load similar to vanilla CSS + JS files, with an 8-character random slug appended at the end, thus preventing caching:
<!-- Vanilla CSS from Sphinx: -->
<link rel="stylesheet" type="text/css" href="../_static/pygments.css?v=80d5e7a1" />
<link rel="stylesheet" type="text/css" href="../_static/css/theme.css?v=19f00094" />
<link rel="stylesheet" type="text/css" href="../_static/copybutton.css?v=76b2166b" />
<!-- Custom CSS now includes a random slug, similar to vanilla: -->
<link rel="stylesheet" type="text/css" href="../_static/css/custom.css?v=Rdy7RNCQ" />
<!-- Vanilla JS from Sphinx: -->
<script src="../_static/jquery.js?v=5d32c60e"></script>
<script src="../_static/_sphinx_javascript_frameworks_compat.js?v=2cd50e6c"></script>
<script data-url_root="../" id="documentation_options" src="../_static/documentation_options.js?v=e91dff3d"></script>
<script src="../_static/doctools.js?v=888ff710"></script>
<script src="../_static/sphinx_highlight.js?v=4825356b"></script>
<script src="../_static/clipboard.min.js?v=a7894cd8"></script>
<script src="../_static/copybutton.js?v=f281be69"></script>
<!-- Custom JS now includes a random slug, similar to vanilla: -->
<script src="../_static/js/custom.js?v=8QronLhw"></script>
It's important to note that if you're using Sphinx within a Docker environment, the ?v=xxxxxxxx slug may remain unchanged unless you utilize the --no-cache option when running your docker build.
Imagine a scenario with three pages: A, B, and C. In this setup, it is possible to navigate from page A to C, as well as from page B to C. However, the displayed content on page C will vary depending on the origin page of the navigation. I am curious to ...
Two user inputs are being received: area time Utilizing this information, the available restaurants in the specified area during that particular time are displayed. In addition, all the cuisines offered by these restaurants are displayed as checkboxes. ...
Recently, I delved into the React documentation on lifting state up and found this helpful resource. In one of my projects, I encountered a similar issue with a slight twist. Instead of dealing with <TemperatureInput />, I had to work with <Senso ...
I'm confused about the connection between scope.ngModel and controller.$viewValue/controller.$modelValue/controller.$setViewValue(). I'm specifically unsure of the purpose of the latter three. Take a look at this jsfiddle: <input type="text" ...
When hovering over the first column of the table, a tooltip will appear. Within each material tooltip, I would like to include a button at the bottom right after the JSON data. When this button is clicked, it should open an Angular Material dialog. <ng ...
Implementing a sub directive to be utilized in multiple directives is my current challenge. These parent directives share a common controller that has useful methods for updating scope variables within these directives: (potentially changing controllers ...
My task involves sorting an array of strings: ['1.2.3', '1.5.2', '1.23', '1.20.31'] I am looking for a way to sort the array by splitting each string separated by dots, such as 1.2.3 into ['1','2&apo ...
I'm interested in altering the keyboard language when an input element changes. Is it possible to modify the keyboard language using client-side programming languages? And specifically, can JavaScript be used to change the keyboard language? ...
Here is a simple demo showcasing blocks with tooltips that appear when hovered over. However, there seems to be an issue with the functionality. The tooltip should ideally be displayed either from the left or right side of the block. To determine the size ...
My goal is to incorporate a simple interpolation into a mixin call: $shapes: "square", "square-green", "circle"; $platforms: "facebook", "twitter", "linkedin", "gplus", "feed"; @each $shape in $shapes { @include sprite-#{$shape}; @each $platform ...
I am currently utilizing the DataTables plugin to enhance my HTML table. While I have managed to successfully implement most functionalities, I am facing a challenge with the boolean column. This particular column consists of icons representing X (value 0) ...
I'm struggling to find examples of ko.observablearrays that deal with complex JSON objects instead of simple strings. I have an observable array containing a large JSON object with several properties, and I need to retrieve a specific object based on ...
I have been attempting to transfer/copy a large file from a remote server to my server in segmented parts or chunks. My initial approach involved utilizing a script I found here: . After making some modifications, I integrated a form into the script and e ...
Using React Redux, I am able to pass values successfully. However, the component I intend to render only does so once. Interestingly, when I save my code in VSCode, it renders again and the data displays on the page as expected. return ( <div classN ...
I am attempting to replicate the React-Leaflet example of a list of markers. I have an array of objects that I am passing to MarkerList to be transformed into Fragments and displayed on the map. However, my mapping function is not functioning as expected ...
Is there a way to reload a form inside a materialize modal with empty fields without closing the modal after submitting? The issue is that currently, when the submit button is clicked, the modal closes and redirects. <div class="modal" id="docM ...
Hey there! I'm currently in the process of updating a client's Moodle website. Our goal is to create responsive tables on the homepage, but I've encountered some challenges. Due to conflicts with other Moodle libraries, I wasn't able to ...
Currently, I am working on integrating file upload using Ajax and Php on my local Apache server. This is strong text. $('.uploadButton').click(function(){ var formData = new FormData($(this).closest('.fileUploadFor ...
I'm currently developing a React project where I am aiming to implement an infinite loop animation using GSAP. The concept involves animating a series of elements from the bottom left corner to the top right corner. The idea is for the animation to sm ...
I need to print a table and two popup windows when an action is triggered, but I am facing issues with the page-break in CSS. None of the solutions I have attempted so far seem to work. Currently, the two pop-up windows overlap with the table data, and I w ...