Content Management

The Fuwafuwa Framework includes a complete Content Management System (CMS) for managing Pages and Posts with full multilingual support. This feature provides everything you need to create, edit, and publish content in multiple languages with SEO optimization.

💡 Key Features

Pages - Static content with hierarchical structure support
Posts - Blog articles with categories, tags, and publishing dates
Multilingual - Full translation support for all content fields
SEO Optimized - Meta tags, Open Graph, Twitter Cards, JSON-LD
Rich Editor - TinyMCE with RTL support and media embedding

Pages

Pages are designed for static content that doesn't change frequently. They're perfect for About Us, Contact, Privacy Policy, and other informational content.

Page Fields

Field	Required	Description
`title`	Yes	Page title displayed in browser tab and headings
`slug`	Yes	URL-friendly identifier (auto-generated from title)
`content`	No	Main content using TinyMCE rich editor
`status`	Yes	draft, published, or archived
`meta_title`	No	Custom SEO title (falls back to page title)
`meta_description`	No	SEO meta description for search engines
`canonical_url`	No	Custom canonical URL for SEO
`featured_image`	No	Featured image for social sharing

Creating a Page

Navigate to Content → Pages
Click Add New button
Fill in the title (slug auto-generates)
Add content using the rich text editor
Configure SEO settings in the Settings tab
Click Publish or Save as Draft

Viewing Pages

Pages are accessible via their slug:

/page/about-us
/page/contact
/page/privacy-policy

Posts

Posts are designed for time-based content like blog articles, news updates, and announcements. They support categories, tags, and scheduled publishing.

Post Fields

Field	Required	Description
`title`	Yes	Post title
`slug`	Yes	URL-friendly identifier
`summary`	No	Short excerpt for listings
`content`	No	Main article content
`category`	No	Primary category
`tag`	No	Comma-separated tags
`published`	No	Publish date (can be scheduled)
`status`	Yes	draft, published, or archived
`featured_image`	No	Featured image
`meta_title`	No	Custom SEO title
`meta_description`	No	SEO meta description
`canonical_url`	No	Custom canonical URL

Creating a Post

Navigate to Content → Posts
Click Add New button
Fill in title and summary
Add content using the rich editor
Select category and add tags
Set publish date (defaults to now)
Click Publish

Viewing Posts

Posts are accessible via their slug:

/post/welcome-to-our-blog
/post/company-announcement-2024

Multilingual Support

The Content Management system supports multiple languages for both Pages and Posts. Each content item can have translations for all configured languages.

✅ Supported Features

Language-specific slugs (e.g., /page/about-us vs /page/tentang-kami)
Independent titles, content, and SEO metadata per language
Language switcher on frontend for visitors
Automatic fallback to default language if translation missing
RTL (Right-to-Left) support for Arabic

Creating a Translation

Edit any Page or Post
Click the language tab (e.g., "Indonesian", "Arabic", "Japanese")
Fill in the translated fields:
- Title (language-specific)
- Slug (auto-generated, can be customized)
- Content (full translation)
- SEO fields (meta_title, meta_description)
Click Save - translation is automatically created

Deleting a Translation

Edit the Page or Post
Switch to the translation tab you want to delete
Click Delete Translation button (bottom left)
Confirm the deletion

Viewing Translations

Access content in different languages using the lang query parameter:

/page/about-us?lang=id        # Indonesian
/page/about-us?lang=ar        # Arabic
/page/tentang-kami?lang=id    # Indonesian with localized slug

Language Indicators in Table View

The Pages and Posts tables show language badges indicating which translations exist:

EN ✓ - English (default language, always exists)
ID ✓ - Indonesian translation exists
JA ✗ - Japanese translation missing

SEO Features

Every Page and Post includes comprehensive SEO optimization:

Meta Tags

Title - <title> tag with language-specific content
Description - <meta name="description">
Canonical URL - <link rel="canonical"> for duplicate content prevention

Hreflang Tags

Automatic hreflang tags for multilingual SEO:

<link rel="alternate" hreflang="en" href="https://example.com/page/about-us">
<link rel="alternate" hreflang="id" href="https://example.com/page/tentang-kami">
<link rel="alternate" hreflang="x-default" href="https://example.com/page/about-us">

Open Graph & Twitter Cards

Social media optimization with:

og:title, og:description, og:image
twitter:card, twitter:title, twitter:description
Featured image support for rich social previews

JSON-LD Structured Data

Automatic structured data for:

Pages - WebPage schema
Posts - BlogPosting schema with author and publish date

Sitemap

The sitemap includes all language versions:

<url>
    <loc>https://example.com/page/about-us</loc>
    <xhtml:link rel="alternate" hreflang="en" href="https://example.com/page/about-us"/>
    <xhtml:link rel="alternate" hreflang="id" href="https://example.com/page/tentang-kami"/>
</url>

Rich Text Editor

Content editing uses TinyMCE with the following features:

Formatting - Bold, italic, headings, lists, quotes
Media - Image upload and embedding, video embed
Links - Internal and external links with target control
Tables - Create and edit tables
Code - Source code editing, code blocks
RTL Support - Automatic direction change for Arabic

RTL (Right-to-Left) Languages

When editing in Arabic or other RTL languages:

Editor automatically switches to RTL mode
Text direction is preserved in output
Form fields adapt to RTL layout

Configuration

Supported Languages

Configure available languages in app/configs/config.ini:

[TRANSLATION]
supported_languages = en,id,ar,ja
fallback_lang = en

Database Tables

The system uses these tables:

page - Main pages table (default language content)
page_translation - Page translations
post - Main posts table (default language content)
post_translation - Post translations
media - Shared media library

API Endpoints

Content can be managed programmatically via AJAX endpoints:

Pages

Endpoint	Method	Description
`/ajax/page/list`	POST	List pages with pagination
`/ajax/page/get?id={id}`	GET	Get page with all translations
`/ajax/page/edit`	POST	Create/update page
`/ajax/page/save_translation`	POST	Save translation for a page
`/ajax/page/slug`	POST	Generate unique slug

Posts

Endpoint	Method	Description
`/ajax/post/list`	POST	List posts with pagination
`/ajax/post/get?id={id}`	GET	Get post with all translations
`/ajax/post/edit`	POST	Create/update post
`/ajax/post/save_translation`	POST	Save translation for a post
`/ajax/post/slug`	POST	Generate unique slug

Best Practices

Use descriptive slugs - Keep URLs readable and SEO-friendly
Write unique meta descriptions - Don't leave them empty for important pages
Use featured images - They improve social sharing appearance
Translate slugs too - Localized URLs are better for SEO
Set canonical URLs - When cross-posting or syndicating content
Use scheduled publishing - Write posts in advance and schedule them