The so-called static resources refer to pictures, js, css and other files. The official statement is Here.
To illustrate with a small project, the following is the catalog structure of the project:

.
├── static
│   ├── css
│   │   ├── base.css
│   │   ├── bootstrap.min.css
│   │   └── font-awesome.min.css
│   ├── font
│   │   ├── FontAwesome.otf
│   │   ├── fontawesome-webfont.eot
│   │   ├── fontawesome-webfont.svg
│   │   ├── fontawesome-webfont.ttf
│   │   └── fontawesome-webfont.woff
│   └── index.html
└── proxy_server.py

Add routing to two static file directories static/css and static/font in proxy_server.py:

 app.router.add_static('/css/',
                       path='static/css',
                       name='css')
 app.router.add_static('/font/',
                       path='static/font',
                       name='font')

Let's first look at the definition of the add_static method:

def add_static(self, prefix, path, *, name=None, expect_handler=None,
                   chunk_size=256*1024, response_factory=StreamResponse,
                   show_index=False, follow_symlinks=False):
        """Add static files view.

        prefix - url prefix
        path - folder with files

        """
        # TODO: implement via PrefixedResource, not ResourceAdapter
        assert prefix.startswith('/')
        if prefix.endswith('/'):
            prefix = prefix[:-1]
        resource = StaticResource(prefix, path,
                                  name=name,
                                  expect_handler=expect_handler,
                                  chunk_size=chunk_size,
                                  response_factory=response_factory,
                                  show_index=show_index,
                                  follow_symlinks=follow_symlinks)
        self.register_resource(resource)
        return resource

Two parameters are required:
Prefix: is the prefix of the url of the static file, starting with / after the browser address bar is displayed on the website host, it is also used to reference the index.html static page.
Path: The path of the static file directory can be a relative path, and the static/css used by the above code is the relative path -- relative to the path of proxy_server.py.
The following is the effect of the page:

Loading index.html, here is the code that references static resources:

<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Base CSS -->
<link href="css/base.css" rel="stylesheet">

<!-- FA CSS -->
<link href="css/font-awesome.min.css" rel="stylesheet">

The path to add font is because / font-awesome.min.css requires:

Open the css file in the browser:

You can see that the prefix for url is / css /.
If the prefix is modified:

 app.router.add_static('/css2017/',
                       path='static/css',
                       name='css')

The page becomes:

The css file is also inaccessible:

Modify the reference path of css in index.html:

<!-- Bootstrap CSS -->
<link href="css2017/bootstrap.min.css" rel="stylesheet">

<!-- Base CSS -->
<link href="css2017/base.css" rel="stylesheet">

<!-- FA CSS -->
<link href="css2017/font-awesome.min.css" rel="stylesheet">

Although the directory itself is css, it has been treated as CSS 2017 by adding_static, and the page returns to normal:

The css file can also be opened:

The url prefix has changed to / css2017 / now.
At this point, open the index.html file directly and it will display as follows

Because there is no css2017 folder in the static directory.

So far we have learned the basic usage of add_static. By redefining the prefix parameter, we can hide the real directory of static resources on the server, and also unify the resource files scattered everywhere under the same path prefix.

In addition, if show_index=True is added, the directory index of the static resource can be displayed - by default, access is prohibited:

app.router.add_static('/css2017/',
                       path='static/css',
                       name='css',
                       show_index=True)