diff --git a/src/.vuepress/components/ExternalLinkIcon.ts b/src/.vuepress/components/ExternalLinkIcon.ts new file mode 100644 index 00000000..15a9a2fe --- /dev/null +++ b/src/.vuepress/components/ExternalLinkIcon.ts @@ -0,0 +1,44 @@ +import { useRouteLocale } from "@vuepress/client"; +import { defineComponent, h } from "vue"; + +const localeText: Record = { + "/": "(opens in new tab)", + "/en/": "(opens in new tab)", + "/ja/": "新しいウィンドウで開く", +}; + +const svg = h( + "svg", + { + class: "external-link-icon", + xmlns: "http://www.w3.org/2000/svg", + "aria-hidden": "true", + focusable: "false", + viewBox: "0 0 100 100", + width: "15", + height: "15", + }, + [ + h("path", { + fill: "currentColor", + d: "M18.8,85.1h56c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32c-2.2,0-4,1.8-4,4v56c0,2.2,1.8,4,4,4z", + }), + h("polygon", { + fill: "currentColor", + points: "45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9", + }), + ], +); + +export const ExternalLinkIcon = defineComponent({ + name: "ExternalLinkIcon", + setup() { + const routeLocale = useRouteLocale(); + + return () => + h("span", [ + svg, + h("span", { class: "external-link-icon-sr-only" }, localeText[routeLocale.value] ?? localeText["/"]), + ]); + }, +}); diff --git a/src/.vuepress/config.ts b/src/.vuepress/config.ts index 9528f487..7eea5773 100644 --- a/src/.vuepress/config.ts +++ b/src/.vuepress/config.ts @@ -2,10 +2,30 @@ import { defineUserConfig } from "vuepress"; import theme from "./theme.js"; import { searchPlugin } from "@vuepress/plugin-search"; import { shikiPlugin } from "@vuepress/plugin-shiki"; +import { externalLinkIconPlugin } from "@vuepress/plugin-external-link-icon"; import path from "path"; export default defineUserConfig({ base: "/", plugins: [ + externalLinkIconPlugin({ + locales: { + "/": { + openInNewWindow: "(opens in new tab)", + }, + "/en/": { + openInNewWindow: "(opens in new tab)", + }, + "/ja/": { + openInNewWindow: "新しいウィンドウで開く", + }, + }, + }), + { + name: "localized-external-link-icon", + alias: { + "@vuepress/plugin-external-link-icon/client": path.resolve(__dirname, "./components/ExternalLinkIcon.ts"), + }, + }, searchPlugin({ locales: { "/": { diff --git a/src/.vuepress/theme.ts b/src/.vuepress/theme.ts index 1c0a7257..b3607ce4 100644 --- a/src/.vuepress/theme.ts +++ b/src/.vuepress/theme.ts @@ -93,6 +93,8 @@ export default hopeTheme({ //插件选项 plugins: { + externalLinkIcon: false, + // You should generate and use your own comment service // comment: { // provider: "Giscus", @@ -104,6 +106,11 @@ export default hopeTheme({ // All features are enabled for demo, only preserve features you need here mdEnhance: { + locales: { + "/en/": { + tip: "Tip:", + }, + }, align: true, attrs: true, chart: true, diff --git a/src/en/getting-started.md b/src/en/getting-started.md index c4654347..6aca1155 100644 --- a/src/en/getting-started.md +++ b/src/en/getting-started.md @@ -1,9 +1,9 @@ # How to start making a WebGAL? ::: warning -No matter which way you choose to make a WebGAL game, you should spend some time reading through the entirety of the development guide. It won't take long, and it will save you from running into problems due to improper operation. +No matter which way you choose to make a WebGAL game, you should spend some time reading through the entirety of the development guide. It won't take long, and it will help you avoid issues caused by incorrect operations. -You know, most of the questions you are wondering about can be found in the documentation. If you firmly believe that you have encountered a bug, please raise an issue at [issues](https://github.com/OpenWebGAL/WebGAL/issues) or send an email to , you can also find a way to join the WebGAL discussion community in the "More" column at the top right corner of the website. +Note: most questions are already answered in the documentation. If you are confident that you have encountered a bug, please submit an issue on [GitHub](https://github.com/OpenWebGAL/WebGAL/issues) or email . You can also find links to the WebGAL community under "More" in the top-right corner of the website. ::: ::: danger @@ -40,13 +40,13 @@ npm install yarn -g yarn ``` -WebGAL uses vite as a packaging and debugging tool, you can start the development server by running the following script +WebGAL uses Vite as its build and development tool. Start the dev server with the following command: ``` bash yarn dev ``` -It is recommended to use VS Code for development, and use plugins to achieve syntax highlighting: +We recommend using VS Code with an extension that enables syntax highlighting: [Marketplace address of syntax highlighting plugin](https://marketplace.visualstudio.com/items?itemName=c6h5-no2.webgal-script-basics) diff --git a/src/en/webgal-script/animation.md b/src/en/webgal-script/animation.md index 472e5306..51d1e9b9 100644 --- a/src/en/webgal-script/animation.md +++ b/src/en/webgal-script/animation.md @@ -1,6 +1,6 @@ # Animation Effects -## Setting Animations for Backgrounds or Sprites +## Setting Animations for Backgrounds or Character Sprites Use the statement `setAnimation:animation name -target=target;` @@ -11,17 +11,17 @@ Use the statement `setAnimation:animation name -target=target;` setAnimation:enter-from-bottom -target=fig-center -next; ``` -Currently, the following preset animations are available: +The following built-in animations are available: | Animation Effect | Animation Name | Duration (ms) | | :--- | :--- | :--- | | Fade in | enter | 300 | | Fade out | exit | 300 | -| Shake once | shake | 1000 | +| Single Shake | shake | 1000 | | Enter from bottom | enter-from-bottom | 500 | | Enter from left | enter-from-left | 500 | | Enter from right | enter-from-right | 500 | -| Move front and back once | move-front-and-back | 1000 | +| Single Front-Back Movement | move-front-and-back | 1000 | | Blur in | blur | 300 | | Old film filter | oldFilm | 0 | | Dot film filter | dotFilm | 0 | @@ -129,7 +129,7 @@ Then, you can call it in the script: setAnimation:enter-from-left -target=fig-left -next; ``` -### Omitting Some Properties +### Omitting Properties If your animation only needs to manipulate some properties, you can leave the other properties that are not involved in the animation empty to keep them as default. diff --git a/src/en/webgal-script/base.md b/src/en/webgal-script/base.md index f580f014..ab7d917a 100644 --- a/src/en/webgal-script/base.md +++ b/src/en/webgal-script/base.md @@ -81,11 +81,11 @@ When writing CSS in text extension syntax, semicolons also need to be written as ## `none` Keyword -When setting **resources** such as立ち絵, BGM, backgrounds, you can turn off this object by setting it to `none`. +When setting **resources** such as character sprites, BGM, and backgrounds, you can disable the element by setting it to `none`. ## `-next` Parameter -You can add the parameter `-next` after any statement. This will cause the next statement to be executed immediately after this statement is executed. This is very useful when you need to perform multiple operations at the same time. +You can add the parameter `-next` after any statement. This causes the next statement to execute immediately after the current statement. This is particularly helpful when you need to perform multiple operations at the same time. Example: @@ -102,7 +102,7 @@ At this time, you can use the `-notend` `-concat` parameters to insert any state `-notend` means that this dialogue is not over, and there may be 演出 or dialogue connected later. -An example is given below: This is a demonstration of switching 立ち絵 in the middle of a dialogue. +Example: switch character sprites in the middle of a dialogue. ``` webgal WebGAL:Test statement insert 演出！Switch 立ち絵 immediately...... -notend; diff --git a/src/en/webgal-script/special-effect.md b/src/en/webgal-script/special-effect.md index 2e51a66c..f9f290bf 100644 --- a/src/en/webgal-script/special-effect.md +++ b/src/en/webgal-script/special-effect.md @@ -1,4 +1,4 @@ -# Effects +# Special Effects Currently, WebGAL's effect system is powered by PixiJS. @@ -26,9 +26,9 @@ Add effects using `pixiPerform`. pixiPerform:rain; // Add a rain effect ``` -Note: After the effect takes effect, if it is not re initialized, the effect will continue to run. +Note: Once a special effect is applied, it will continue running until reinitialized. -### List of Built-in Effects +### Built-in Special Effects | Effect | Command | | :--- | :--- | @@ -95,4 +95,4 @@ This way, you can call your effects in the script ``` webgal pixiPerform:myPerform; -``` \ No newline at end of file +```