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?