2026-11-02 · プロジェクト紹介

ビジュアル編集：コードを知らなくても全設定が変えられる

astro-blog-admin の設定エディタは JSONC 設定をカードフォームに変えます。多言語フィールドは言語ごとに編集でき、画像フィールドにはプレビューがあり、保存ボタンを押してもページは微動だにしません。

Astro管理画面エディタ

ブログのサイト設定はすべて数個の JSONC ファイルの中にあります。トップページのモジュール、ナビゲーション、About、サブスクリプション、サービス……フィールドは数百個、その多くが多言語対応。ファイルを直接編集するのは間違いのもとですし、変えた結果がどう見えるかも分かりません。astro-blog-admin の変数エディタは、この設定をカードフォームとして描画します。目に入るのは JSON のキー名ではなく、「サブタイトル」「リンク URL」のような人間のためのラベルです。

エディタの見た目

カード式フォーム

設定は構造に沿って自動でカードに分かれます。オブジェクトごとに 1 枚のカード、配列は展開できる項目の列、文字列は入力欄、真偽値はスイッチ、色はテキスト欄とスウォッチの二重入力。新規項目の追加では、空の行を先に入れるのではなく、まずダイアログで名前を入力させます。アイコングリッド系のリスト（カルーセルのロゴなど）には専用の編集ダイアログがあります。

画像フィールドにはプレビュー

画像 URL のフィールドはすべて、ラベルの上にプレビューを表示します。入力に合わせてリアルタイムに更新され、読み込みに失敗すれば自動で隠れます。アイコンとアバターのプレビューは 1:1 の正方形に全体を収めて切り取らず、通常の画像は横長のプレビューです。差し替える前に絵が見えるので、URL の貼り間違いは一目で分かります。

多言語フィールドの編集方法

編集言語カプセル

多くのフィールドの値は 1 文ではなく、5 言語分の文言です。エディタ上部には「編集言語」カプセルがあり、記事エディタとまったく同じコンポーネントです。タップで切替、長押しでドラッグして言語を選べます。選んだ言語に合わせて、ページ上のすべての多言語フィールドはその言語だけを表示・編集し、他の言語の訳文を上書きすることは決してありません。

切替でリフレッシュも揺れもなし

言語切替はフィールドの値をその場で差し替えるだけ——ページの再構築もスクロールの飛びもありません。保存も同じです。新しいファイルバージョンを記録するだけでページ自体は一切リフレッシュされず、結果は画面内の小さなトーストで成功・失敗を知らせます。管理画面のどこにも、「OK」を押させるネイティブダイアログは存在しません。

保存のルール

エディタはリポジトリのソースファイルを読み、保存時は API 経由でバージョン（sha）を検証して書き戻します。ファイルが別の場所で変更されていれば、黙って上書きせず、再読み込みを促して保存を止めます。1 つ正直に言うべきトレードオフもあります。ビジュアル保存では JSONC ファイル内のコメントが失われるため、コメントが必要なときのために「生テキスト」タブを残し、手編集に戻れるようにしています。

次回はこの管理画面のもう半分——画像ホスティングと、1 つのコードベースを 2 つのプラットフォームで動かすデプロイ方式です。

2026-11-02 · Projects

Visual editing: change every site setting without touching code

The settings editor in astro-blog-admin turns JSONC configuration into card forms — multilingual fields edited per language, image fields with previews, and a save button that never disturbs the page.

AstroAdmin PanelEditor

All of the blog’s site settings live in a few JSONC files: homepage modules, navigation, about, subscriptions, services — hundreds of fields, many of them multilingual. Editing those files directly is error-prone, and you cannot see what a change will look like. The variable editor in astro-blog-admin renders the configuration as card forms: you see human labels like “Subtitle” and “Link URL”, never raw JSON keys.

What the editor looks like

Card forms

Configuration is split into cards by structure: one card per object, arrays as expandable entries, strings as inputs, booleans as switches, colors as a text field paired with a swatch. Adding a list item opens a dialog asking for its name first, instead of inserting an empty row; icon-grid lists (like carousel logos) get their own dedicated edit dialog.

Image fields with previews

Every image-URL field shows its preview above the field’s label, updating live as you type and hiding itself if the image fails to load. Icons and avatars preview in a 1:1 square with the whole image fitted inside, never cropped; regular images get a wide preview. You see the picture before you commit to it, so a mistyped URL is obvious at a glance.

Editing multilingual fields

The edit-language capsule

Many fields hold not one sentence but five — one per language. At the top of the editor sits an “Edit language” capsule, the very same component as the post editor’s: tap to switch, long-press and drag to pick a language. Whichever language is selected, every multilingual field on the page shows and edits only that language, and never overwrites the other translations.

Switching never refreshes or jitters

Changing language swaps field values in place — no page rebuild, no scroll jump. Saving behaves the same way: it records the file’s new version id and leaves the page exactly as it was, reporting success or failure through a small in-page toast. There is not a single native dialog anywhere in the admin that makes you click “OK”.

Saving rules

The editor reads the source files from the repository and writes back through the API with version (sha) checking: if the file changed elsewhere, the save is refused with a prompt to reload instead of silently overwriting. One trade-off is worth stating plainly: visual saves drop the comments in JSONC files, which is why the editor keeps a “raw text” tab for hand-editing when comments matter.

Next: the admin’s other half — the image bed, and how one codebase runs on two platforms at once.

2026-11-02 · 项目介绍

可视化编辑：不懂代码也能改全站设置

astro-blog-admin 的设置编辑器把 JSONC 配置变成卡片表单：多语言字段能逐个语言改，图片字段带预览，点保存页面纹丝不动。

Astro管理后台编辑器

博客的全站设置都在几个 JSONC 文件里：主页模块、导航、关于、订阅、服务……字段几百个，还带多语言。直接改文件既容易写错，也看不出改完长什么样。astro-blog-admin 的变量编辑器把这些配置渲染成卡片表单——你看到的是“子标题”“链接地址”这样的中文标签，而不是 JSON 的键名。

编辑器长什么样

卡片式表单

配置按结构自动分卡：一个对象一张卡，数组是一条条可展开的条目，字符串是输入框，布尔值是开关，颜色是文本框加色块双输入。新增列表项会先弹窗让你把名字填好，而不是先塞一条空数据进去；图标网格类的列表（比如轮播标志）有专门的编辑弹窗。

图片字段带预览

凡是图片地址字段，预览图显示在字段子标题的上方，输入时实时更新，加载失败自动隐藏。图标和头像类的预览是 1:1 方图、完整装入不裁剪；普通图片是宽幅预览。换图之前先看到图，手滑贴错地址一眼就能发现。

多语言字段怎么编辑

编辑语言胶囊

很多字段的值不是一句话，而是五种语言五份文案。编辑器顶部有一条「编辑语言」胶囊，和文章编辑器里的是同一套组件：点按切换、长按可以拖动选语言。选中哪个语言，页面上所有多语言字段就只显示和修改那个语言，绝不覆写其他语言的译文。

切换不刷新、不抖动

切换语言只就地更换字段的值，页面不重建、不滚动。点保存也是如此：保存只把新的文件版本号记下来，页面本身不刷新、不跳动，结果用站内的小提示条告知成功或失败——全站没有任何需要你点「确定」的系统弹窗。

保存的规矩

编辑器读的是仓库里的源文件，保存时经 API 写回并校验版本（sha）：如果文件在别处被改过，保存会被拦下并提示刷新，而不是默默覆盖。还有一个取舍要说清楚：可视化保存会丢掉 JSONC 文件里的注释，所以编辑器保留了「原始文本」页签，需要注释时可以切回去手改。

下一篇是这个后台的另一半：图床，以及同一套代码同时跑在两个平台上的部署方式。

2026-11-02 · 프로젝트 소개

시각적 편집: 코드를 몰라도 모든 사이트 설정을 바꾸는 법

astro-blog-admin의 설정 편집기는 JSONC 설정을 카드 폼으로 바꿉니다. 다국어 필드는 언어별로 고칠 수 있고, 이미지 필드에는 미리보기가 있으며, 저장을 눌러도 페이지는 꿈쩍도 하지 않습니다.

Astro관리 화면편집기

블로그의 사이트 설정은 전부 JSONC 파일 몇 개 안에 있습니다. 홈페이지 모듈, 내비게이션, 소개, 구독, 서비스…… 필드가 수백 개에 그중 다수가 다국어입니다. 파일을 직접 고치는 건 실수하기 쉽고, 고친 결과가 어떻게 보일지도 알 수 없습니다. astro-blog-admin의 변수 편집기는 이 설정을 카드 폼으로 그려 줍니다. 눈에 들어오는 것은 JSON 키 이름이 아니라 “부제”, “링크 주소” 같은 사람을 위한 라벨입니다.

편집기의 모습

카드식 폼

설정은 구조를 따라 자동으로 카드로 나뉩니다. 객체마다 카드 한 장, 배열은 펼칠 수 있는 항목들, 문자열은 입력란, 불리언은 스위치, 색상은 텍스트 칸과 색상 견본의 이중 입력. 목록 항목을 추가할 때는 빈 행부터 넣지 않고 먼저 대화 상자로 이름을 입력하게 합니다. 아이콘 그리드 류의 목록(캐러셀 로고 등)에는 전용 편집 대화 상자가 있습니다.

미리보기가 있는 이미지 필드

이미지 주소 필드는 모두 필드 라벨 위에 미리보기를 표시하고, 입력하는 대로 실시간으로 갱신되며, 불러오기에 실패하면 스스로 숨습니다. 아이콘과 아바타의 미리보기는 1:1 정사각형에 전체를 잘리지 않게 담고, 일반 이미지는 가로로 긴 미리보기를 씁니다. 바꾸기 전에 그림이 보이니 주소를 잘못 붙여 넣어도 한눈에 알 수 있습니다.

다국어 필드 편집법

편집 언어 캡슐

많은 필드의 값은 한 문장이 아니라 다섯 언어의 문구입니다. 편집기 위에는 “편집 언어” 캡슐이 있고, 글 편집기의 것과 완전히 같은 컴포넌트입니다. 눌러서 전환하고, 길게 눌러 드래그로 언어를 고릅니다. 어떤 언어를 고르든 페이지의 모든 다국어 필드는 그 언어만 보여 주고 고치며, 다른 언어의 번역문을 덮어쓰는 일은 결코 없습니다.

전환해도 새로고침도 흔들림도 없다

언어 전환은 필드 값을 그 자리에서 바꿀 뿐, 페이지를 다시 만들지도 스크롤이 튀지도 않습니다. 저장도 마찬가지입니다. 파일의 새 버전 번호를 기록할 뿐 페이지 자체는 새로고침되지 않고, 결과는 화면 안의 작은 알림으로 성공과 실패를 전합니다. 관리 화면 어디에도 “확인”을 눌러야 하는 시스템 대화 상자는 없습니다.

저장 규칙

편집기는 저장소의 원본 파일을 읽고, 저장할 때는 API를 통해 버전(sha)을 검증하며 다시 씁니다. 파일이 다른 곳에서 바뀌어 있으면 조용히 덮어쓰지 않고, 새로고침을 권하며 저장을 막습니다. 솔직히 말해야 할 트레이드오프도 하나 있습니다. 시각적 저장은 JSONC 파일 속 주석을 지워 버리므로, 주석이 필요할 때 손으로 고칠 수 있도록 “원문 텍스트” 탭을 남겨 두었습니다.

다음 글에서는 이 관리 화면의 나머지 절반인 이미지 호스팅과, 하나의 코드베이스를 두 플랫폼에서 동시에 돌리는 배포 방식을 다룹니다.

2026-11-02 · 項目介紹

可視化編輯：不懂程式碼也能改全站設定

astro-blog-admin 的設定編輯器把 JSONC 配置變成卡片表單：多語言欄位能逐個語言改，圖片欄位帶預覽，點保存頁面紋絲不動。

Astro管理後台編輯器

部落格的全站設定都在幾個 JSONC 檔案裡：主頁模組、導航、關於、訂閱、服務……欄位幾百個，還帶多語言。直接改檔案既容易寫錯，也看不出改完長什麼樣。astro-blog-admin 的變量編輯器把這些配置渲染成卡片表單——你看到的是「子標題」「連結地址」這樣的中文標籤，而不是 JSON 的鍵名。

編輯器長什麼樣

卡片式表單

配置按結構自動分卡：一個物件一張卡，陣列是一條條可展開的條目，字串是輸入框，布林值是開關，顏色是文字框加色塊雙輸入。新增列表項會先彈窗讓你把名字填好，而不是先塞一條空資料進去；圖標網格類的列表（比如輪播標誌）有專門的編輯彈窗。

圖片欄位帶預覽

凡是圖片地址欄位，預覽圖顯示在欄位子標題的上方，輸入時即時更新，載入失敗自動隱藏。圖標和頭像類的預覽是 1:1 方圖、完整裝入不裁剪；普通圖片是寬幅預覽。換圖之前先看到圖，手滑貼錯地址一眼就能發現。

多語言欄位怎麼編輯

編輯語言膠囊

很多欄位的值不是一句話，而是五種語言五份文案。編輯器頂部有一條「編輯語言」膠囊，和文章編輯器裡的是同一套組件：點按切換、長按可以拖動選語言。選中哪個語言，頁面上所有多語言欄位就只顯示和修改那個語言，絕不覆寫其他語言的譯文。

切換不刷新、不抖動

切換語言只就地更換欄位的值，頁面不重建、不捲動。點保存也是如此：保存只把新的檔案版本號記下來，頁面本身不刷新、不跳動，結果用站內的小提示條告知成功或失敗——全站沒有任何需要你點「確定」的系統彈窗。

保存的規矩

編輯器讀的是倉庫裡的源檔案，保存時經 API 寫回並校驗版本（sha）：如果檔案在別處被改過，保存會被攔下並提示刷新，而不是默默覆蓋。還有一個取捨要說清楚：可視化保存會丟掉 JSONC 檔案裡的註釋，所以編輯器保留了「原始文字」頁籤，需要註釋時可以切回去手改。

下一篇是這個後台的另一半：圖床，以及同一套程式碼同時跑在兩個平台上的部署方式。