How to edit page with script and css files in Plone


I want to add some script to head tag when I edit a page to let DataTabel works inside the page.
Now I add some content into index.html above the tag as follow:

  <link rel="stylesheet" href="./DataTables/bootstrap.min.css">	
  <link rel="stylesheet" type="text/css" href="./DataTables/jquery.dataTables.min.css">
  <script src="./DataTables/jquery.dataTables.min.js"></script>
  <script src="./DataTables/jquery-3.5.1.js"></script>
  <script src="./DataTables/bootstrap.min.js"></script>

and above the <footer id="portal-footer-wrapper"> add:

		<script type="text/javascript" src="./DataTables/jquery.dataTables.min.js"></script>
		<script type="text/javascript">
			$(document).ready( function () {

it works well but I know it is not correct way works in Plone.
It looks like /@@resourceregistry-controlpanel could add something javascripts and css but I don't know how to do.
Could some master teach me step by step how to add scripts and css files use for page edit or Mosaic RichText in right way?


Plone Foundation Code of Conduct