Unfortunately, this does not work. All it does it put a "," after the month/day, then displays plain-text Javascript at the top of the page.
I figured out why.. you need to add an opening <script> tag before window.onload. So it should look like this:
<style type="text/css">
.day:after {
content: ',';
}
</style>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
window.onload = init;
function init() {
var $year = $('.dt-published').map(function() {
return $(this).attr('datetime').substr(0,4);
}).get();
$( '.date-wrapper' ).each( function ( i ) {
$( this ).append( '<span class="year">' + $year[i] + '</span>');
});
}
</script>
(Who makes a blog template that doesn't display the year anyway?!)