https://docmaker.ir/dataفهرست سندهای مادر منتشرشده، ترجمهها و اطلاعات سازنده.
DocMakerDEVELOPERS
دریافت و نمایش دادههای عمومی اسناد منتشرشده در وبسایت و نرمافزار شما
تمام نمونهها از دامنه اصلی DocMaker استفاده میکنند. در محیط توسعه نیز خروجی عمومی روی همین دامنه قابل مصرف است.
https://docmaker.ir/dataفهرست سندهای مادر منتشرشده، ترجمهها و اطلاعات سازنده.
https://docmaker.ir/data/<slug-or-uuid>جزئیات کامل یک سند و آرایه صفحات و ماژولهای آن.
| نام | نوع | توضیح | نمونه |
|---|---|---|---|
page | integer | شماره صفحه فهرست | 1 |
per_page | integer | تعداد نتیجه؛ بین ۱ تا ۳۰ | 12 |
q | string | جستجو در عنوان، آدرس و شرکت | niawell |
lang | string | انتخاب ترجمه منتشرشده | fa |
type | string | نوع سند | catalog |
company | string | slug شرکت | legacy-4 |
پاسخ جزئیات سند در کلید data قرار دارد. هر صفحه شامل آرایه blocks است و مقدار type مشخص میکند کدام ماژول باید رندر شود.
{
"ok": true,
"data": {
"title": "Catalog title",
"language": "fa",
"company": { "name": "Company name" },
"content": {
"pages": [
{ "blocks": [
{ "type": "heading", "content": "عنوان" },
{ "type": "specs", "content": [] }
] }
]
}
}
}این روش از همان کلاسها و همان فایل استایل صفحه عمومی کاتالوگ استفاده میکند. بنابراین جدول دینامیک، ویژگیها، تصاویر، فرمول، مشخصات، ابعاد، سربرگ و پاورقی با ظاهر واقعی DocMaker نمایش داده میشوند؛ نه با یک CSS نمونه و متفاوت.
سه فایل رسمی Font Awesome، استایل رندر سند و رندرر عمومی را اضافه کنید؛ سپس خروجی /data/<slug> را مستقیماً رندر کنید.
<link rel="stylesheet"
href="https://docmaker.ir/static/vendor/fontawesome/css/all.min.css">
<link rel="stylesheet"
href="https://docmaker.ir/static/fonts/font.css">
<link rel="stylesheet"
href="https://docmaker.ir/static/css/document-renderer.css">
<div id="docmaker-catalog" aria-live="polite"></div>
<script src="https://docmaker.ir/static/js/catalog-api-renderer.js" defer></script>
/* فقط برای قرارگیری کاتالوگ داخل صفحه شما؛
ظاهر بلوکها از document-renderer.css میآید. */
#docmaker-catalog {
width: min(100%, 794px);
margin-inline: auto;
}
#docmaker-catalog .doc-page {
max-width: 100%;
}
@media (max-width: 820px) {
#docmaker-catalog {
overflow: hidden;
}
#docmaker-catalog .doc-page {
transform-origin: top center;
}
}
document.addEventListener('DOMContentLoaded', async () => {
const target = document.querySelector('#docmaker-catalog');
try {
await DocMakerCatalogRenderer.fetchAndRender(
target,
'https://docmaker.ir/data/YOUR_DOCUMENT_SLUG'
);
} catch (error) {
target.textContent = 'خطا در دریافت کاتالوگ: ' + error.message;
}
});
رندر dynamic_specs با همان ساختار mainTable، مدلهای چهارتایی، ادغام مقادیر تکراری و کلاسهای واقعی کاتالوگ.
رندرر آماده، ۱۶ نوع محتوای واقعی ویرایشگر را میشناسد و از همان نام کلاسهای قالب عمومی استفاده میکند.
متغیرهای --doc-accent، اندازه متن، فاصله صفحه و preset از داده خود سند اعمال میشوند.
pages[].blocksهر بلوک چهار فیلد مشترک دارد: id شناسه یکتا، type نام ماژول، content داده اصلی و settings تنظیمات نمایشی. رندرر شما باید نوعهای ناشناخته را نادیده بگیرد تا با نسخههای آینده سازگار بماند.
{
"id": "block-uuid",
"type": "heading",
"content": "عنوان بخش",
"settings": { "align": "start" }
}در JavaScript یا React یک map از نام type به renderer بسازید. اگر type شناختهشده نبود، آن بلوک را رد کنید و خطای کل صفحه ایجاد نکنید.
headingبرای تیترهای اصلی و فرعی سند استفاده میشود. مقدار content یک رشته ساده است و سطح تیتر از settings.level تعیین میشود.
contentstringsettingslevel: 1 تا 6، align: start | center | end | left | right{
"id": "block-1",
"type": "heading",
"content": "مشخصات فنی",
"settings": {
"level": 2,
"align": "start"
}
}برای ساخت فهرست، عنوان صفحه و سئو بهتر است متن content بدون HTML باشد.
richtext / htmlمحتوای متنی قالببندیشده. richtext نوع اصلی است و html بهعنوان نام سازگار با نسخههای قدیمی پذیرفته میشود.
contentstring شامل HTML مانند p، ul، ol، strong، em، a و tablesettingsalign و تنظیمات تایپوگرافی مانند fontSize، lineHeight و spacing{
"id": "block-2",
"type": "richtext",
"content": "<p>این دستگاه برای <strong>کار مداوم</strong> طراحی شده است.</p><ul><li>راندمان بالا</li><li>نصب آسان</li></ul>",
"settings": {
"align": "start",
"fontSize": 16,
"lineHeight": 1.9
}
}هنگام تزریق در DOM، HTML را فقط از خروجی مورد اعتماد DocMaker بگیرید و برای دادههای خارجی دوباره پاکسازی کنید.
calloutیک متن HTML برجسته برای نکته فنی، هشدار ایمنی، پیام موفقیت یا خطا.
contentstring شامل HTMLsettingstone: info | success | warning | danger، align و semantic{
"id": "block-3",
"type": "callout",
"content": "<p><strong>هشدار:</strong> پیش از نصب، برق ورودی را قطع کنید.</p>",
"settings": {
"tone": "warning",
"align": "start"
}
}رنگ و آیکون را بر اساس tone انتخاب کنید؛ متن هشدار را تنها با رنگ مشخص نکنید و آیکون/عنوان هم داشته باشید.
imageنمایش یک تصویر با متن جایگزین، زیرنویس، اندازه و نحوه برازش قابل کنترل.
contentobject: url، name، altsettingswidth درصدی، height، fit: contain | cover | fill | scale-down، align و caption{
"id": "block-4",
"type": "image",
"content": {
"url": "https://docmaker.ir/static/example/product.webp",
"name": "product.webp",
"alt": "نمای جلوی محصول"
},
"settings": {
"width": 70,
"height": "auto",
"fit": "contain",
"align": "center",
"caption": "نمای جلوی محصول"
}
}همیشه alt معنادار قرار دهید و loading="lazy" و decoding="async" را در خروجی وب فعال کنید.
image_gridآرایهای از تصاویر که میتواند بهصورت یک تا چهار ستون، با ارتفاع خودکار یا ثابت نمایش داده شود.
contentarray از objectهای url، name، alt، width، height، span، fit، x و ysettingscolumns، gap، fit، height، autoHeight، width و align{
"id": "block-5",
"type": "image_grid",
"content": [
{
"url": "https://docmaker.ir/static/example/front.webp",
"alt": "نمای جلو",
"span": 1,
"fit": "contain",
"x": 50,
"y": 50
},
{
"url": "https://docmaker.ir/static/example/back.webp",
"alt": "نمای پشت",
"span": 1,
"fit": "contain",
"x": 50,
"y": 50
}
],
"settings": {
"columns": 2,
"gap": 16,
"autoHeight": true,
"width": 100,
"align": "center"
}
}در برخی دادههای قدیمی ممکن است آرایه تصاویر داخل content.images باشد؛ رندرر مقاوم بهتر است هر دو شکل را پشتیبانی کند.
signatureاز نظر داده شبیه image است اما برای امضا، مهر و عنوان زیر آن طراحی شده است.
contentobject: url، name، altsettingswidth، height، fit، align، label و caption{
"id": "block-6",
"type": "signature",
"content": {
"url": "https://docmaker.ir/static/example/signature.webp",
"name": "signature.webp",
"alt": "امضای مدیر فنی"
},
"settings": {
"width": 35,
"height": "auto",
"fit": "contain",
"align": "end",
"label": "مدیر فنی"
}
}برای حفظ شفافیت مهر یا امضا، PNG یا WebP شفاف مناسبتر است.
tableجدول ساده دوبعدی. ردیف اول معمولاً سرستونهاست و سایر ردیفها داده هستند.
contentarray دوبعدی؛ هر عضو یک ردیف و هر مقدار یک سلول استsettingsstriped و repeatHeader{
"id": "block-7",
"type": "table",
"content": [
[
"مدل",
"توان",
"ولتاژ"
],
[
"NX-18",
"18 kW",
"380V"
],
[
"NX-22",
"22 kW",
"400V"
]
],
"settings": {
"striped": true,
"repeatHeader": true
}
}برای موبایل جدول را داخل ظرف overflow-x:auto قرار دهید و سرستونها را با th رندر کنید.
specsفهرست سادهی برچسب/مقدار برای مشخصات کوتاه مانند وزن، جنس، ولتاژ و گارانتی.
contentarray از objectهای label و valuesettingsمعمولاً خالی؛ تنظیمات تایپوگرافی عمومی قابل استفاده است{
"id": "block-8",
"type": "specs",
"content": [
{
"label": "توان نامی",
"value": "22 kW"
},
{
"label": "درجه حفاظت",
"value": "IP65"
},
{
"label": "گارانتی",
"value": "24 ماه"
}
],
"settings": {}
}این نوع را میتوان بهصورت dl/dt/dd یا جدول دو ستونه دسترسپذیر رندر کرد.
columnsچند قطعه HTML را در ستونهای مستقل قرار میدهد و در موبایل میتواند زیر هم نمایش داده شود.
contentarray از رشتههای HTML؛ تعداد معمولاً 2 تا 4settingscount و stackMobile{
"id": "block-9",
"type": "columns",
"content": [
"<h3>مزایا</h3><p>راندمان بالا و نگهداری آسان.</p>",
"<h3>کاربرد</h3><p>تابلو برق و خطوط تولید.</p>"
],
"settings": {
"count": 2,
"stackMobile": true
}
}اگر stackMobile فعال است، در عرض کم grid-template-columns را به یک ستون تبدیل کنید.
formulaرشتهی فرمول که میتواند متن ریاضی ساده یا ورودی TeX/LaTeX باشد. برای نمایش حرفهای از MathJax یا KaTeX استفاده کنید.
contentstring مانند E = mc² یا \(P = V \times I\)settingsمعمولاً خالی؛ fontSize، align و spacing قابل استفاده است{
"id": "block-10",
"type": "formula",
"content": "\\(P = V \\times I\\)",
"settings": {
"fontSize": 22,
"align": "center"
}
}قبل از اجرای MathJax، content را با textContent وارد کنید یا فقط دستورهای مجاز TeX را بپذیرید.
standardsشناسه یا شماره استانداردها را نگهداری میکند تا لوگو/نشان متناظر از کتابخانه داراییها نمایش داده شود.
contentarray از string یا number مانند IEC، CE یا شماره فایل نشانsettingssemantic: standards{
"id": "block-11",
"type": "standards",
"content": [
"CE",
"IEC-61439",
"ISO-9001"
],
"settings": {
"semantic": "standards"
}
}اگر برای یک شناسه تصویر موجود نیست، متن استاندارد را بهعنوان fallback نشان دهید.
features_applicationsدو فهرست مستقل برای مزایا/ویژگیهای محصول و محیطهای کاربرد آن.
contentobject با دو آرایه features و applicationssettingssemantic: features_applications و تنظیمات تایپوگرافی{
"id": "block-12",
"type": "features_applications",
"content": {
"features": [
"حفاظت چندمرحلهای",
"راندمان بالا"
],
"applications": [
"خط تولید",
"تابلو برق صنعتی"
]
},
"settings": {
"semantic": "features_applications"
}
}هر فهرست ممکن است خالی باشد؛ فقط بخشهایی را رندر کنید که حداقل یک عضو دارند.
model_encodingبخشهای یک نام مدل را به معنی هر قطعه از کد متصل میکند.
contentarray از objectهای model و meaningsettingssemantic: model_encoding{
"id": "block-13",
"type": "model_encoding",
"content": [
{
"model": "NX",
"meaning": "خانواده محصول"
},
{
"model": "22",
"meaning": "توان نامی 22 کیلووات"
},
{
"model": "P",
"meaning": "سهفاز"
}
],
"settings": {
"semantic": "model_encoding"
}
}ترتیب آرایه مهم است و باید از چپ به راست مطابق کد واقعی مدل حفظ شود.
dynamic_specsکاملترین نوع جدول برای مقایسه چند مدل. سطرها در بخشها گروهبندی میشوند و values مقدار هر ویژگی را برای هر مدل نگه میدارد.
contentobject شامل models و sections؛ هر section دارای name، subtitle و features است؛ هر feature شامل name، values و allSame استsettingssemantic: dynamic_specs و repeatHeader{
"id": "block-14",
"type": "dynamic_specs",
"content": {
"models": [
"NX-18",
"NX-22"
],
"sections": [
{
"name": "مشخصات الکتریکی",
"subtitle": "ورودی",
"features": [
{
"name": "توان نامی",
"values": {
"NX-18": "18 kW",
"NX-22": "22 kW"
},
"allSame": false
},
{
"name": "فرکانس",
"values": {
"NX-18": "50 Hz",
"NX-22": "50 Hz"
},
"allSame": true
}
]
}
]
},
"settings": {
"semantic": "dynamic_specs",
"repeatHeader": true
}
}مدلها را از content.models بخوانید، سپس برای هر feature مقدار values[model] را پیدا کنید. allSame فقط یک راهنمای بهینهسازی نمایش است و نباید جای values را بگیرد.
dimensionsطول، عرض و ارتفاع را با واحد اصلی و در صورت نیاز واحدهای جایگزین نگهداری میکند.
contentobject: length، width، height، unit و other_unitssettingssemantic: dimensions{
"id": "block-15",
"type": "dimensions",
"content": {
"length": "510",
"width": "220",
"height": "440",
"unit": "mm",
"other_units": [
{
"unit": "in",
"length": "20.08",
"width": "8.66",
"height": "17.32"
}
]
},
"settings": {
"semantic": "dimensions"
}
}مقادیر ممکن است string باشند؛ برای محاسبه ابتدا با Number تبدیل و نامعتبر بودن را بررسی کنید.
page_breakیک دستور چیدمان است و محتوای دیداری ندارد. هر بلوک بعد از آن باید از صفحه تازه شروع شود.
contentرشته خالی یا nullsettingsobject خالی{
"id": "block-16",
"type": "page_break",
"content": "",
"settings": {}
}در HTML معمولی میتوانید آن را نمایش ندهید؛ برای چاپ از break-after: page یا page-break-after: always استفاده کنید.
در همه نمونهها پاسخ شبکه و وضعیت HTTP بررسی شده است. این کدها فقط داده را دریافت میکنند و چیزی در DocMaker تغییر نمیدهند.
async function loadDocuments() {
const response = await fetch('https://docmaker.ir/data?lang=fa&per_page=6', {
headers: { Accept: 'application/json' }
});
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const payload = await response.json();
return payload.data;
}
loadDocuments().then(console.log).catch(console.error);import { useEffect, useState } from 'react';
export default function PublishedDocuments() {
const [documents, setDocuments] = useState([]);
const [error, setError] = useState('');
useEffect(() => {
const controller = new AbortController();
fetch('https://docmaker.ir/data?per_page=6', {
signal: controller.signal,
headers: { Accept: 'application/json' }
})
.then(response => {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
})
.then(payload => setDocuments(payload.data))
.catch(error => error.name !== 'AbortError' && setError(error.message));
return () => controller.abort();
}, []);
if (error) return <p>{error}</p>;
return <ul>{documents.map(item => <li key={item.uuid}>{item.title}</li>)}</ul>;
}from flask import Flask, jsonify
import requests
app = Flask(__name__)
@app.get('/published-documents')
def published_documents():
response = requests.get(
'https://docmaker.ir/data',
params={'lang': 'fa', 'per_page': 6},
headers={'Accept': 'application/json'},
timeout=15,
)
response.raise_for_status()
return jsonify(response.json()['data'])
<?php
$url = 'https://docmaker.ir/data?lang=fa&per_page=6';
$context = stream_context_create([
'http' => [
'method' => 'GET',
'header' => "Accept: application/json\r\n",
'timeout' => 15
]
]);
$json = file_get_contents($url, false, $context);
if ($json === false) {
throw new RuntimeException('Unable to load published documents.');
}
$documents = json_decode($json, true, 512, JSON_THROW_ON_ERROR)['data'];
foreach ($documents as $document) {
echo htmlspecialchars($document['title']) . "<br>";
}
curl --request GET \
--url 'https://docmaker.ir/data?lang=fa&per_page=6' \
--header 'Accept: application/json'این نمونه، بلوکهای heading و richtext/html را با همان کلاسهای واقعی کاتالوگ رندر میکند. هیچ استایل جداگانهای برای شبیهسازی نوشته نشده است.
<div id="catalog-text" class="template-niawell" dir="rtl">
<main class="doc-content"></main>
</div>
@import url('https://docmaker.ir/static/css/document-renderer.css');
#catalog-text {
--doc-accent: #2657a4;
--doc-body-size: 15px;
--doc-heading-size: 20px;
}
const blocks = data.content.pages
.flatMap(page => page.blocks || [])
.filter(block => ['heading', 'richtext', 'html'].includes(block.type));
const main = document.querySelector('#catalog-text .doc-content');
main.innerHTML = blocks.map(block =>
DocMakerCatalogRenderer.renderBlockHTML(block, { direction: 'rtl' })
).join('');هشدار و نکته با کلاسهای واقعی block-callout، rich-content و tone-* رندر میشوند.
<div id="catalog-callout" class="template-niawell" dir="rtl">
<main class="doc-content"></main>
</div>
@import url('https://docmaker.ir/static/css/document-renderer.css');
#catalog-callout { --doc-accent: #2657a4; }
const block = data.content.pages
.flatMap(page => page.blocks || [])
.find(item => item.type === 'callout');
document.querySelector('#catalog-callout .doc-content').innerHTML =
block ? DocMakerCatalogRenderer.renderBlockHTML(block, { direction: 'rtl' }) : '';این همان جدول واقعی کاتالوگ است: مدلها چهارتایی گروهبندی میشوند، مقادیر یکسان ادغام میشوند و کلاسهای mainTable، dynamic-section-group و dynamic-parameter-cell عیناً استفاده میشوند.
<div id="catalog-specs" class="template-niawell" dir="rtl">
<main class="doc-content"></main>
</div>
@import url('https://docmaker.ir/static/css/document-renderer.css');
#catalog-specs { --doc-accent: #2657a4; overflow-x: auto; }
#catalog-specs .doc-content { min-width: 700px; }
const block = data.content.pages
.flatMap(page => page.blocks || [])
.find(item => item.type === 'dynamic_specs');
const main = document.querySelector('#catalog-specs .doc-content');
main.innerHTML = block
? DocMakerCatalogRenderer.renderBlockHTML(block, { direction: 'rtl' })
: '<p>جدول دینامیک در این سند وجود ندارد.</p>';ویژگیها و کاربردها با همان ساختار دو بخشی کاتالوگ و همان عنوانها، آیکونها و فاصلهها نمایش داده میشوند.
<div id="catalog-features" class="template-niawell" dir="rtl">
<main class="doc-content"></main>
</div>
@import url('https://docmaker.ir/static/css/document-renderer.css');
#catalog-features { --doc-accent: #2657a4; }
const block = data.content.pages
.flatMap(page => page.blocks || [])
.find(item => item.type === 'features_applications');
document.querySelector('#catalog-features .doc-content').innerHTML =
block ? DocMakerCatalogRenderer.renderBlockHTML(block, { direction: 'rtl' }) : '';تصویر تکی و گالری با همان block-image-grid، تعداد ستون، فاصله، ارتفاع خودکار، fit و موقعیت تصویر خود سند رندر میشوند.
<div id="catalog-images" class="template-niawell" dir="rtl">
<main class="doc-content"></main>
</div>
@import url('https://docmaker.ir/static/css/document-renderer.css');
#catalog-images { --doc-accent: #2657a4; }
const blocks = data.content.pages
.flatMap(page => page.blocks || [])
.filter(block => ['image', 'image_grid'].includes(block.type));
document.querySelector('#catalog-images .doc-content').innerHTML = blocks.map(block =>
DocMakerCatalogRenderer.renderBlockHTML(block, { direction: 'rtl' })
).join('');این رابط فقط برای خواندن اسناد عمومی است. ساخت، ویرایش، حذف، انتشار و ترجمه از مسیرهای احراز هویتشده پنل انجام میشوند.