# 查看默认前端文件

本篇教程中，你将使用默认的main.mo文件，只需要修改前端代码。在修改代码前，让我们看一看默认的前端代码。

查看前端代码步骤：

1. 编辑器中打开`src/custom_greeting_assets/src/index.html` 文件

   这个前端文件是应用的默认入口，由dfx.json文件的frontend.entrypoint指定。 \
   这个文件包含标准HTML代码和指向CSS的引用以及位于src/custom\_greeting\_assets/assets目录的图片。默认的index.html文件也包含了一个输入框和一个可点击按钮的标准HTML语法。 \
   这个前端和[Viewing the default front-end](https://github.com/chengshuzhi/DfinityTutorials/tree/67efaf95e3f292cfe2fc958ffec63d10ccf7a6f9/si-.-jiao-cheng/1.-tan-suo-mo-ren-xiang-mu)章节一样
2. 编辑器中打开 `src/custom_greeting_assets/src/index.js` 文件

   ```
   import { Actor, HttpAgent } from '@dfinity/agent';
   import { idlFactory as custom_greeting_idl, canisterId as custom_greeting_id } from 'dfx-generated/custom_greeting';

   const agent = new HttpAgent();
   const custom_greeting = Actor.createActor(custom_greeting_idl, { agent, canisterId: custom_greeting_id });

   document.getElementById("clickMeBtn").addEventListener("click", async () => {
     const name = document.getElementById("name").value.toString();
     const greeting = await custom_greeting.greet(name);

     document.getElementById("greeting").innerText = greeting;
   });
   ```

   * 默认的index.js的第一个import语句使用JavaScript Agent库创建一个actor和一个agent实例
   * 第二个import语句会准备custom\_greeting canister来构造actor
   * 接下来的2个语句构造了agent和actor
   * 剩余的代码提供了处理默认程序的文档对象
3. 关闭index.js继续。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mixdao.gitbook.io/dfinity/si-.-jiao-cheng/8.-zi-ding-yi-qian-duan/cha-kan-mo-ren-qian-duan-wen-jian.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.