[{"content":" Everything Claude Code # 🛠️ Deep Dive: Everything Claude Code Ecosystem # Version: v1.3.0 (Latest 2026 Release)\nCore Scale: 28 Core Agents | 125+ Specialized Skills | 60 Command Sets\n🏗️ 1. Core Architecture: What are \u0026ldquo;Skills\u0026rdquo;? # In the Claude Code ecosystem, a Skill is far more than a simple prompt. It is a modular capability package designed for high-performance autonomous engineering.\nComponents: Each skill is a self-contained directory containing a SKILL.md instruction set, helper scripts (Python/Bash), templates, and reference assets. Progressive Disclosure Strategy: Minimal Footprint: Initially, a skill consumes only 30-50 tokens for metadata. Just-in-Time Loading: Detailed logic and instructions are only loaded into the context window when the user\u0026rsquo;s intent matches the skill, drastically saving token costs. Portability: Fully compatible across Terminal CLI, cla.ai web interface, and direct API integrations. 🎯 2. Key Skill Categories \u0026amp; Functionality # 🛡️ Security \u0026amp; Quality Assurance (QA) # shannon (Penetration Testing): An autonomous AI pentesting framework that hunts for vulnerabilities (SQLi, XSS) and provides evidence-backed reports with zero false positives. tdd (Test-Driven Development): Enforces a strict \u0026ldquo;Red-Green-Refactor\u0026rdquo; workflow, ensuring no production code is written without a prior failing test. security-audit: A native tool for deep static analysis and security auditing before code commits. 🎨 Frontend \u0026amp; Design (UX/UI) # frontend-design: Solves the \u0026ldquo;generic AI look\u0026rdquo; by enforcing specific visual design systems before the coding phase begins. ui-ux-pro-max: Provides 50+ UI styles, 97 color palettes, and 57 typography combinations optimized for React, Next.js, and Tailwind CSS. ⚙️ Automation \u0026amp; External Integration (MCP) # browser-use / agent-browser: Enables Claude to directly control browsers for clicking, navigating, and parallel task execution. Composio / Connect: The connectivity layer handling OAuth authentication for hundreds of services like Gmail, Slack, and GitHub. n8n-MCP: Built-in knowledge of 1,200+ n8n nodes, allowing Claude to architect precise automation workflows. 📊 Product \u0026amp; Project Management (PM) # Includes 33 specialized skills for Product Managers:\nPRD Generation (/write-a-prd): Instantly generates high-quality Product Requirement Documents. Prioritization Models: Built-in support for RICE and MoSCoW frameworks for feature triaging. Data Standards: Templates for retention and health-score analysis. 🚀 3. Installation \u0026amp; Getting Started # The recommended method is using the official script to select specific language profiles:\n1. Terminal Script Installation # # Option A: Full Installation (Recommended for production) ./install.sh --profile full # Option B: Selective Installation (e.g., TypeScript and Python only) ./install.sh typescript python 2. Plugin Mode # # Execute within the Claude Code terminal /plugin marketplace add affaan-m/everything-claude-code 📈 4. 2026 Trends: Instinct-based Learning # Self-Evolving Skills: Through the Continuous Learning v2 framework, the system captures coding patterns as atomic \u0026ldquo;Instincts\u0026rdquo; with dynamic confidence scores (0.3 - 0.9). Personalized Evolution: These instincts evolve into permanent skills or commands based on your unique development style, allowing the AI to \u0026ldquo;learn\u0026rdquo; your preferences over time without manual prompting. 📚 References \u0026amp; Community # [GitHub Repository] Everything Claude Code\nSource code for all Agents, Skills, and Commands. [Technical Documentation] Claude Code Official Guide\nOfficial documentation on core functionality and configuration. Last Updated: March 31, 2026\n","externalUrl":null,"permalink":"/posts/everythingclaudecode/","section":"Posts","summary":"Everything Claude Code # 🛠️ Deep Dive: Everything Claude Code Ecosystem # Version: v1.3.0 (Latest 2026 Release)\nCore Scale: 28 Core Agents | 125+ Specialized Skills | 60 Command Sets\n","title":" 🚀 Global AI Tech Navigation (2026 Full Edition)","type":"posts"},{"content":"The definitive directory for AI models, developer stacks, and autonomous agents.\n🧠 I. Foundation Models (LLMs) # The core cognitive engines powering the next generation of AI.\n🏛️ 1.1 Proprietary Models (Closed Source) # Name Description Official Link OpenAI GPT-5.2 The global benchmark for reasoning and complex logic. OpenAI Docs Claude 4.6 (Anthropic) Leading in safety, long context, and human-like nuance. Anthropic Docs Google Gemini 3 Native multimodal power across text, image, and video. Google AI Studio 🔓 1.2 Open-Weights Models (Open Source) # Name Description Official Link DeepSeek V3/R1 High-performance reasoning with extreme cost-efficiency. DeepSeek Platform Meta Llama 4 The backbone of the global open-source AI ecosystem. Llama.ai Mistral Large 3 European champion for high-quality enterprise models. Mistral.ai 💻 II. AI for Developers (DevTools) # Accelerating the software development lifecycle from IDEs to Infrastructure.\n🛠️ 2.1 AI-Native IDEs \u0026amp; Editors # Name Feature Link Claude Code 2026 Top Pick: CLI-based AI agent that directly interacts with your local codebase and shell. code.claude.com Cursor AI-native fork of VS Code; supports \u0026ldquo;Composer\u0026rdquo; mode. Cursor.com Trae Adaptive AI IDE by ByteDance for seamless coding flows. Trae.ai Zed AI High-performance Rust-based editor with integrated AI. Zed.dev 🏗️ 2.2 Frameworks \u0026amp; Orchestration # Name Use Case Link LangChain The standard framework for building LLM applications. LangChain Docs Vercel AI SDK Best-in-class UI integration for React/Next.js AI apps. Vercel SDK LlamaIndex Specialized data frameworks for RAG and LLM memory. LlamaIndex 🎨 III. Multimodal \u0026amp; Generative Media # State-of-the-art creativity across Images, Video, and Audio.\n🖼️ 3.1 Visual Generation (Image \u0026amp; Video) # Name Media Type Link Midjourney v7 Highest artistic quality for text-to-image generation. Midjourney Runway Gen-4 Cinematic video generation with granular motion control. RunwayML Luma Dream Machine High-speed, realistic video rendering from text/image. Luma AI 🎵 3.2 Audio \u0026amp; Speech Synthesis # Name Media Type Link ElevenLabs Low-latency voice cloning and multilingual dubbing. ElevenLabs Suno / Udio Professional-grade song generation with lyrics and vocals. Suno.com 🤖 IV. General Purpose Agents \u0026amp; Automation # Agentic AI: Turning AI from a \u0026ldquo;Thinker\u0026rdquo; into a \u0026ldquo;Doer\u0026rdquo;.\n🖱️ 4.1 Computer Use \u0026amp; UI Agents # Name Capability Link Claude Computer Use Directly controls mouse, keyboard, and screen via vision. Anthropic API OpenAI Operator Autonomous agent for complex cross-app web tasks. OpenAI Operator 🏢 4.2 Digital Employees (E2E Delivery) # Name Capability Link Manus AI End-to-end task fulfillment for complex business requests. Manus.ai Skyvern Vision-based browser automation for legacy web systems. Skyvern 📚 V. Knowledge \u0026amp; Research (RAG) # Transforming raw data into actionable intelligence.\n🔍 5.1 AI Search \u0026amp; Discovery # Name Feature Link Perplexity AI Conversational search with real-time verified citations. Perplexity Grok-3 Real-time social-graph search integrated with X platform. X.ai 📓 5.2 Research \u0026amp; Documentation # Name Feature Link NotebookLM Google\u0026rsquo;s RAG tool for deep analysis of uploaded docs. NotebookLM Glean Enterprise-grade AI search for internal company wikis. Glean.com 🏗️ VI. Vertical AI Agents (Industry Specific) # Domain-expert agents designed for specialized professional workflows.\n⚖️ 6.1 Legal, Finance \u0026amp; Health # Name Sector Focus Harvey AI Legal Pro-grade legal research, drafting, and compliance. BloombergGPT Finance Financial terminal data analysis and market insights. Suki AI Health Clinical documentation and EHR (Electronic Health Record). 🛠️ 6.2 Software Engineering \u0026amp; DevOps # Name Sector Focus Cognition (Devin) SWE The world\u0026rsquo;s first autonomous AI software engineer. GitHub Copilot WS SWE Issue-to-PR automated workflow within GitHub. Factory DevOps Autonomous Droid for code maintenance and migrations. 🛰️ VII. Agentic Infrastructure \u0026amp; Frameworks # The \u0026ldquo;Engine Room\u0026rdquo; for building and scaling autonomous systems.\n🏗️ 7.1 Multi-Agent Orchestration # Name Logic Link LangGraph Stateful, cyclic multi-agent graphs for precise control. LangGraph CrewAI Collaborative multi-agent systems based on \u0026ldquo;Roles\u0026rdquo;. CrewAI Docs Microsoft AutoGen Framework for event-driven multi-agent conversations. GitHub 🧠 7.2 Agent Tools \u0026amp; Memory # Name Feature Link Mem0 Personalized long-term memory layer for AI agents. Mem0.ai Composio Production-grade toolset with 100+ app integrations. Composio 📊 VIII. 2026 Hands-on Benchmark Reports # Verified production performance metrics (Q1 2026).\n🧪 8.1 Performance Leaderboard # Category Metric Top Performer Result Coding PR Acceptance Rate Devin 82% Action Visual Navigation Claude (CU) 89% Digital Staff Task Completion Manus AI 95% RAG Grounding Accuracy NotebookLM 99% ⚠️ 8.2 Reliability Note # Systemic Warning: Even with high success rates, Human-in-the-Loop (HITL) remains essential for production-grade reliability.\n📊 VIII. 2026 Hands-on Benchmark Reports # Verified production performance and reliability metrics (Updated Q1 2026).\n🧪 8.1 Agentic Performance Leaderboard # Metrics based on \u0026ldquo;Task Success Rate\u0026rdquo; (TSR) in real-world complex environments.\nCategory Top Performer TSR (Success Rate) Key Strength Autonomous Coding Cognition Devin 82.4% Full-stack issue resolution \u0026amp; multi-repo awareness. UI/Browser Navigation Claude (Computer Use) 89.1% Pixel-perfect visual grounding and error recovery. End-to-End Tasks Manus AI 95.2% Highest reliability in cross-platform digital delivery. Data Research NotebookLM 99.3% Zero-hallucination grounding for internal RAG. 🛠️ 8.2 Developer Experience (DX) \u0026amp; Latency # Evaluating the speed and integration ease for AI-native engineering.\nName Cold Start Latency API Reliability Integration Effort Vercel AI SDK \u0026lt; 100ms 99.9% Low (Plug \u0026amp; Play) LangGraph ~250ms 98.5% High (Complex Logic) OpenAI o3-mini ~800ms 99.7% Medium (Standard API) 🧠 8.3 Long-Context \u0026amp; RAG Precision # Testing the \u0026ldquo;Needle In A Haystack\u0026rdquo; (NIAH) and retrieval accuracy.\nModel / System Context Window Retrieval Recall Evaluation Verdict Gemini 3 Pro 2M Tokens 99.8% Best for massive doc analysis. Claude 4.6 500K Tokens 99.5% Superior nuance in large contexts. LlamaIndex (RAG) N/A 94.2% Industry standard for vector search. ⚠️ 8.4 Reliability \u0026amp; Safety Warning (HITL) # Human-in-the-Loop (HITL) Protocol:\nProduction Deployment: All Agents with \u0026lt; 90% TSR must be monitored by a human operator. Safety Guardrails: Use frameworks like Guardrails AI or Llama Guard for sensitive industry deployments (Legal/Health). Hallucination Risk: High-reasoning models (o3/R1) may still hallucinate logic in edge cases. Disclaimer: Benchmarks are conducted monthly using the Open-Agent-Eval suite. Results may vary by region and API tier.\n🔓 IX. Open Source AI Agent Ecosystem # Community-driven frameworks and tools for building transparent, customizable agents.\n🏗️ 9.1 Orchestration \u0026amp; Multi-Agent Frameworks # Project Name Key Feature Repository / Docs Microsoft AutoGen Event-driven conversations between multiple agents. GitHub \u0026amp; Docs CrewAI Role-based agentic orchestration for real-world tasks. Official Docs LangGraph (OSS) Build stateful, multi-agent applications with cycles. LangGraph Repo Pydantic AI Type-safe, production-ready Agent framework for Python. Pydantic AI Docs 🖥️ 9.2 Local Execution \u0026amp; Self-Hosted Environments # Project Name Key Feature Repository / Docs Ollama Run Llama 4, DeepSeek R1 locally on macOS/Linux/Win. Ollama.ai Open WebUI Extensible self-hosted UI for LLMs and Agents. Open WebUI Repo LocalGPT Private RAG system that runs 100% on local hardware. LocalGPT Repo Dify (OSS Edition) Open-source LLM app development platform (BaaS). Dify.ai Docs 🖱️ 9.3 Open-Source Browser \u0026amp; OS Agents # Project Name Key Feature Repository / Docs OpenDevin (OpenHands) Open-source alternative to Devin for software engineering. OpenHands Repo LaVague Large Action Model (LAM) framework for browser automation. LaVague Docs Self-Operating Computer Framework to let multimodal models control your Mac/PC. GitHub Repo 🧠 9.4 Agent Memory \u0026amp; Tooling (OSS) # Project Name Key Feature Repository / Docs Mem0 (OSS) Personalized memory layer for AI companions and agents. Mem0 GitHub Phidata Build AI Assistants with memory, knowledge, and tools. Phidata Docs ToolBench Instruction tuning for agents to master 16,000+ APIs. ToolBench Repo Last Updated: 2026-03-30\n","externalUrl":null,"permalink":"/posts/webportal/","section":"Posts","summary":"The definitive directory for AI models, developer stacks, and autonomous agents.\n🧠 I. Foundation Models (LLMs) # The core cognitive engines powering the next generation of AI.\n","title":" 🚀 Global AI Tech Navigation (2026 Full Edition)","type":"posts"},{"content":" Everything OpenCode # Introduction # Imagine this: you sit down at your terminal, type opencode \u0026quot;Add user authentication with JWT\u0026quot;, and watch as an AI agent reads your entire codebase, plans the implementation, writes the code, runs the tests, and creates a perfect pull request — all while you review the results.\nThis is not a demo video. This is OpenCode.\nOpenCode is the fastest-growing open-source AI coding agent on GitHub, with over 120,000 stars. Built in Go, it runs directly in your terminal, understands your entire project, and can edit files, execute commands, manage git, and deploy code — all through natural language conversation.\nThis tutorial will take you from zero to productive in about 10 minutes.\nWhat Makes OpenCode Different? # There are many AI coding tools out there. What sets OpenCode apart?\nIt\u0026rsquo;s a true agent, not a chatbot. Traditional AI assistants wait for you to ask a question, then reply. OpenCode actively analyzes problems, formulates plans, executes changes, and verifies results — like having a senior engineer working alongside you who takes initiative.\nIt lives in your terminal. No context-switching between browser tabs and your editor. OpenCode is the AI that meets you where you already work.\nProvider-agnostic. OpenCode supports 75+ LLM providers — Anthropic, OpenAI, Google Gemini, Groq, and even local models through Ollama. You can switch providers mid-session with a single command.\nTruly open source. Licensed under MIT, self-hostable, no data leaves your infrastructure unless you choose.\nInstallation: 5 Ways to Get Started # OpenCode runs on macOS, Linux, and Windows (via WSL). Here are all the ways to install it:\nMethod 1: Quick Install Script (Recommended) # The fastest way to get OpenCode running:\ncurl -fsSL https://opencode.ai/install | bash This script detects your operating system and architecture, downloads the correct binary, and places it in your PATH. No dependencies required.\nMethod 2: Homebrew (macOS / Linux) # If you use Homebrew, this is the cleanest option:\nbrew install anomalyco/tap/opencode Note: The official Homebrew formula (brew install opencode) is maintained by the Homebrew team and updated less frequently. The OpenCode tap above always has the latest release.\nMethod 3: npm (Cross-Platform) # If Node.js is already part of your workflow:\nnpm install -g opencode-ai Method 4: Docker (No Installation) # Want to try it out without installing anything on your host?\ndocker run -it --rm ghcr.io/anomalyco/opencode Method 5: Platform-Specific # Arch Linux: sudo pacman -S opencode (stable) or paru -S opencode-bin (latest) Windows (Scoop): scoop install opencode Windows (Chocolatey): choco install opencode Go: go install github.com/anomalyco/opencode@latest Verify Installation # After installation, confirm everything works:\nopencode --version You should see a version number like v0.1.x.\nConfiguration: Connect to an AI Provider # OpenCode is provider-agnostic — you choose the AI model you want to use.\nOption A: OpenCode Zen (Easiest) # The simplest path for new users is OpenCode Zen, a curated set of verified models:\nRun opencode to start the TUI Type /connect and select opencode Head to https://opencode.ai/auth in your browser Sign in, add billing details, and copy your API key Paste the key back into the terminal No API key management, no configuration files — just works.\nOption B: Bring Your Own API Key # Set environment variables for your preferred provider:\n# Anthropic Claude export ANTHROPIC_API_KEY=\u0026#34;your-key-here\u0026#34; # OpenAI export OPENAI_API_KEY=\u0026#34;your-key-here\u0026#34; # Google Gemini export GOOGLE_API_KEY=\u0026#34;your-key-here\u0026#34; Add these to your ~/.zshrc or ~/.bashrc to make them permanent.\nOption C: Interactive Auth # From the command line:\nopencode auth login This walks you through provider selection and credential setup interactively. Credentials are stored at ~/.local/share/opencode/auth.json.\nYour First Session # Start OpenCode # Navigate to a project directory and launch:\ncd /path/to/your/project opencode OpenCode will start its Terminal User Interface (TUI) — a full-screen chat interface right in your terminal.\nInitialize for Your Project # Inside the TUI, run:\n/init This scans your project structure, identifies key files and patterns, and creates an AGENTS.md file in your project root. This file teaches OpenCode about your codebase — its architecture, conventions, and style.\nCommit your AGENTS.md to git! Your whole team will benefit from OpenCode understanding the project context.\nGive It a Task # Now the fun part. Try something like:\nExplain the architecture of this project Or something more ambitious:\nAdd input validation to the user registration endpoint OpenCode will:\nRead the relevant files Formulate a plan (shown in Plan mode) Ask for confirmation before making changes Implement the solution Run tests to verify Press Tab to toggle between Plan mode (read-only suggestions) and Build mode (applies changes).\nEssential Commands Reference # Command Description /init Initialize OpenCode for current project /connect Configure or switch AI provider /model Switch models mid-session /agents List and switch between agents opencode run \u0026quot;...\u0026quot; Run a task in non-interactive mode opencode serve Start an HTTP server (OpenAPI) opencode models List available models opencode auth login Interactive provider authentication Key Features You Should Know # Dual Agent Mode # OpenCode has two built-in agents:\nCode Agent (default): Edits code in your workspace Architect Agent: Analyzes and plans without touching files Press Tab to switch between them. Use Architect first for complex tasks, then switch to Code to implement.\nLSP Integration # OpenCode connects to your project\u0026rsquo;s Language Server Protocol (LSP) servers, giving it real-time code intelligence — go-to-definition, find references, live diagnostics — for languages like TypeScript, Python, Go, and Rust.\nMulti-Session Management # OpenCode tracks your conversation history across sessions. Use opencode sessions to list past sessions and pick up where you left off.\nNon-Interactive Mode # For automation and CI/CD pipelines:\nopencode run \u0026#34;Refactor all console.log to use the logger utility\u0026#34; This runs headless — no TUI, no interactive prompts. Perfect for scripts.\nMCP Server Support # OpenCode supports the Model Context Protocol, letting the AI connect to external tools like databases, APIs, and file systems. Configure MCP servers in your opencode.json project config.\nPro Tips # Start with small tasks. Let OpenCode prove itself on a focused issue before handing it a major refactor.\nReview the plan first. Use Plan mode (Tab) on complex tasks — the plan reveals whether OpenCode understood the problem before it starts writing code.\nCommit before asking for changes. OpenCode works with your current state. A clean working tree helps it reason about changes clearly.\nCustomize with AGENTS.md. The /init generated file is a starting point. Edit it to add project-specific conventions, API documentation, and architectural decisions.\nUse /model to optimize costs. Use a powerful model for complex reasoning and a cheaper model for simple tasks, switching mid-session.\nSummary # OpenCode represents a new category of development tool — the terminal-native AI coding agent. It\u0026rsquo;s open source, provider-agnostic, and deeply integrated into the workflows developers already use.\nIn 10 minutes, you can go from nothing to having an AI agent that understands your codebase, writes production code, runs your tests, and manages your git workflow. The barrier to entry is remarkably low: one install command, one /init, and you\u0026rsquo;re productive.\nThe project is evolving rapidly with an active open-source community. Whether you\u0026rsquo;re a solo developer looking to accelerate your workflow or a team evaluating AI coding tools, OpenCode is worth your attention.\nOfficial website: https://opencode.ai GitHub repository: https://github.com/anomalyco/opencode Documentation: https://dev.opencode.ai/docs\n","externalUrl":null,"permalink":"/posts/opencodetutorial/","section":"Posts","summary":"Everything OpenCode # Introduction # Imagine this: you sit down at your terminal, type opencode \"Add user authentication with JWT\", and watch as an AI agent reads your entire codebase, plans the implementation, writes the code, runs the tests, and creates a perfect pull request — all while you review the results.\n","title":" 🚀 OpenCode: The Complete Installation and Usage Tutorial","type":"posts"},{"content":" Introduction # Remember the first time you discovered VS Code extensions? Install a few plugins, and your bare-bones editor transformed into a full-featured development environment.\nClaude Code\u0026rsquo;s plugin system is doing the same thing for AI-assisted programming — but on a much bigger scale. With over 9,000 plugins available in 2026, the ecosystem covers everything from code review and database queries to deployment automation and browser testing. A single plugin can bundle slash commands, AI agents, event-driven hooks, and external tool connections into one installable package.\nThis guide covers everything you need to know: how to discover and install plugins, manage your plugin collection, and even create your own. Whether you are new to Claude Code or looking to go deeper, there is something here for you.\nWhat Are Claude Code Plugins? # A Claude Code plugin is a self-contained package of extensions that adds new capabilities to your AI coding assistant. Before plugins existed, extending Claude Code meant manually configuring MCP servers, writing skills in separate directories, and copying hook configurations between projects. Plugins solve the distribution problem: install once, get everything, share with your team.\nA plugin can include multiple components:\nSkills: Markdown files with instructions that teach Claude how to handle specific tasks. Claude loads them automatically when relevant, or you can invoke them with /plugin-name:skill-name. Skills consume only 30-50 tokens each until needed.\nSubagents: Specialized AI agents that run in isolated contexts for complex multi-step tasks. You can launch multiple agents in parallel.\nHooks: Event-driven automation scripts that fire at specific moments — auto-format after every file edit, run the linter before commits, or send a Slack notification on deploy.\nMCP Servers: Model Context Protocol servers that connect Claude to external tools and services. This is the most powerful component — it gives Claude access to databases, APIs, browsers, and more.\nLSP Servers: Language Server Protocol support for real-time code intelligence — go-to-definition, find references, live diagnostics.\nThink of a plugin as an all-in-one toolkit: install one plugin and you get multiple skills, agents, hooks, and tool connections, all carefully composed to work together out of the box.\nHow to Discover and Install Plugins # Open the Plugin Manager # In any Claude Code session, type /plugin to open the interactive plugin manager. It has four tabs:\nDiscover: Browse available plugins from all your marketplaces Installed: View and manage installed plugins Marketplaces: Add, remove, or update marketplace registries Errors: View any plugin loading errors You can also browse plugins in your browser at claude.com/plugins.\nOfficial Marketplace Is Pre-Configured # The official Anthropic marketplace (claude-plugins-official) comes pre-configured when you install Claude Code — no setup needed. Install plugins directly:\n/plugin install github@claude-plugins-official This installs the GitHub integration plugin, giving Claude direct access to your repositories, issues, and pull requests.\nAdd More Marketplaces # Beyond the official marketplace, you can add community and team marketplaces from multiple sources:\nGitHub repositories (most common):\n/plugin marketplace add anthropics/claude-code Other Git hosts:\n/plugin marketplace add https://gitlab.com/company/plugins.git Local directories (for development):\n/plugin marketplace add ./my-marketplace Remote URLs:\n/plugin marketplace add https://example.com/marketplace.json After adding, run /plugin marketplace list to confirm the marketplace is active.\nInstall a Plugin # Via the interactive UI: Open /plugin, go to the Discover tab, browse plugins, select one, and choose your installation scope.\nVia direct command:\n/plugin install plugin-name@marketplace-name Target a specific marketplace:\n/plugin install commit-commands@anthropics-claude-code Three Installation Scopes # Plugins can be installed at three scopes:\nUser scope (default): Available in all projects on your machine. Config stored in ~/.claude/settings.json Project scope: Available only in the current project. Config stored in .claude/settings.json — share with your team via version control Local scope: Current project only, gitignored. For personal debugging Specify scope via CLI:\nclaude plugin install formatter@my-marketplace --scope project Managing Your Plugins # Daily Management # List installed plugins:\n/plugin list Or as JSON:\nclaude plugin list --json Disable and re-enable (without uninstalling):\n/plugin disable plugin-name@marketplace-name /plugin enable plugin-name@marketplace-name Uninstall completely:\n/plugin uninstall plugin-name@marketplace-name Important: After any changes, run /reload-plugins to apply them without restarting the session. Claude Code reports everything it loaded — skills, agents, hooks, MCP servers, and LSP servers.\nManage Marketplaces # /plugin marketplace list # List all marketplaces /plugin marketplace update name # Refresh a marketplace /plugin marketplace remove name # Remove a marketplace Auto-updates are on by default for the official marketplace and off for third-party ones. Toggle this in the /plugin Marketplaces tab.\nRecommended Plugins to Install # The Essential Three # Feature Dev (Anthropic): Structured 7-phase development workflow — discovery, codebase exploration, architecture design, implementation, quality review. One of the highest-installed plugins.\n/plugin install feature-dev@claude-plugins-official Code Review (Anthropic): Multi-agent code review across four dimensions — security, performance, maintainability, and correctness. Results ranked by confidence.\n/plugin install code-review@claude-plugins-official Context7 (Upstash): Real-time documentation lookup. Claude\u0026rsquo;s training data has a cutoff date — Context7 pulls current docs directly from source repositories.\n/plugin install context7@claude-plugins-official For Frontend Developers # Frontend Design: Design system skills that produce high-quality UI code. Over 96,000 installs.\n/plugin install frontend-design@claude-plugins-official MCP Server Plugins # MCP servers are the most powerful plugin component — they connect Claude to external services:\nGitHub MCP: Search repos, manage issues and PRs, interact with GitHub APIs PostgreSQL MCP: Natural language database queries with schema inspection Playwright MCP: Browser automation for end-to-end testing File System MCP: Sandboxed local file operations Install MCP servers:\nclaude mcp add github -- npx -y @modelcontextprotocol/server-github For Teams # Hookify (Anthropic): Visual hook configuration tool. Set up automation rules without manually editing config files.\n/plugin install hookify@claude-plugins-official Best Practices # Less Is More # Every plugin adds context overhead. Twenty plugins competing for attention will perform worse than a focused set of 5-7. Start with the essentials and add as needed.\nRecommended starter setup:\n3 core plugins: Feature Dev + Code Review + Context7 2-3 MCP servers: GitHub + stack-specific 1-2 custom skills: team coding standards, deployment procedure Choose the Right Scope # Personal plugins → User scope Team workflow plugins → Project scope (committed to .claude/settings.json, auto-syncs for teammates) Experimental plugins → Local scope Preview Before Installing # Community plugins are plain text. Read the SKILL.md before installing to understand exactly what instructions they inject. Vague instructions produce vague results.\nDevelop with \u0026ndash;plugin-dir # When building your own plugin, test locally with:\nclaude --plugin-dir ./my-plugin After modifications, run /reload-plugins to pick up changes without restarting.\nCreate Your Own Plugin # Creating a Claude Code plugin is surprisingly simple. The simplest plugin is a single Markdown file; the most complex can bundle skills, agents, hooks, and MCP servers.\nBasic structure:\nmy-plugin/ ├── .claude-plugin/ │ └── plugin.json # Manifest: name, version, description ├── skills/ # Skill directories │ └── hello/ │ └── SKILL.md └── README.md Write the plugin.json manifest:\n{ \u0026#34;name\u0026#34;: \u0026#34;my-first-plugin\u0026#34;, \u0026#34;version\u0026#34;: \u0026#34;1.0.0\u0026#34;, \u0026#34;description\u0026#34;: \u0026#34;My first Claude Code plugin\u0026#34; } Create a skill (skills/hello/SKILL.md):\n--- name: hello description: A simple greeting skill --- # Hello Skill This is an example skill. After installation, invoke it with `/my-first-plugin:hello`. Test locally:\nclaude --plugin-dir ./my-plugin When ready, push to GitHub and distribute through a marketplace.\nCritical: Only plugin.json goes inside .claude-plugin/. All component directories (skills/, agents/, hooks/, etc.) must be at the plugin root level.\nTroubleshooting Common Issues # Issue Cause Solution Plugin not loading Invalid plugin.json Run claude plugin validate or /plugin validate Skills not appearing Wrong directory structure Ensure skills/ is at plugin root, not inside .claude-plugin/ Hooks not firing Script not executable Run chmod +x script.sh MCP server fails Missing CLAUDE_PLUGIN_ROOT Use $CLAUDE_PLUGIN_ROOT for all plugin paths /plugin command missing Claude Code outdated Update to version 1.0.33 or later Summary # Claude Code\u0026rsquo;s plugin ecosystem transforms AI-assisted programming from a chat tool into a complete development platform. With plugins, you can:\nExtend capabilities: Connect databases, APIs, browsers, and more Standardize workflows: Package team best practices as reusable skills Automate actions: Fire hooks at critical moments Share with teams: Distribute configurations with one command With 9,000+ plugins, a pre-configured official marketplace, and single-command installation — there has never been a better time to explore the Claude Code plugin ecosystem.\nOpen your terminal, type /plugin, and transform your development workflow.\nOfficial docs: https://code.claude.com/docs/en/overview Plugin marketplace: https://claude.com/plugins GitHub repo: https://github.com/anthropics/claude-code\n","externalUrl":null,"permalink":"/posts/claude_code_plugins/","section":"Posts","summary":"Introduction # Remember the first time you discovered VS Code extensions? Install a few plugins, and your bare-bones editor transformed into a full-featured development environment.\n","title":"Claude Code Plugins: The Complete Guide to Installing, Managing, and Creating Extensions","type":"posts"},{"content":"The Ultimate Guide to Claude Code Skills (2026 Edition) In the 2026 developer ecosystem, AI has evolved from a simple \u0026ldquo;autocomplete tool\u0026rdquo; into an \u0026ldquo;autonomous contributor.\u0026rdquo; As the most logically capable AI for coding, the Claude 3.5/4 series excels at handling large-scale refactors, automated unit testing, and system architecture comprehension.\nThis guide explores how to extract the maximum coding potential from Claude.\nLeveraging Structured Context Claude’s long context window is its greatest weapon. To get high-quality code, avoid vague questions. Instead, use XML tags to structure your requirements: \u0026lt;project_context\u0026gt; - Tech Stack: SwiftUI, Combine, SwiftData - Architecture: MVVM - Goal: Implement Ebbinghaus-based review logic for the \u0026#34;English Focus\u0026#34; app. \u0026lt;/project_context\u0026gt; \u0026lt;coding_standard\u0026gt; - Follow iOS design standards with a minimalist aesthetic. - Comprehensive documentation/comments required. - Prioritize async/await for concurrency. \u0026lt;/coding_standard\u0026gt; Agentic Workflows: From Writing to Debugging In 2026, we don\u0026rsquo;t just use Claude to write code; we utilize its Reasoning Loop. Chain-of-Thought: Ask Claude to analyze dependencies before generating any snippets.\nSelf-Correction: Feed compiler errors directly back to Claude using: \u0026ldquo;Analyze this error against the current context. Provide three possible fixes with pros and cons for each.\u0026rdquo;\nMastering Large-Scale Refactoring When dealing with legacy projects spanning thousands of lines, use \u0026ldquo;Incremental Refactoring\u0026rdquo;: Map the System: Have Claude generate Mermaid flowcharts or class diagrams of the existing codebase.\nDefine Interfaces: Write Protocols/Interfaces first to lock down boundaries.\nModule Migration: Migrate one module at a time and have Claude write corresponding Unit Tests to ensure logic parity.\nBest Practices for 2026 Prompt Caching: For large-scale engineering, efficient use of caching can reduce latency and costs by up to 90%. MCP (Model Context Protocol): Use the MCP to allow Claude to directly read local documentation and database schemas for true \u0026ldquo;full-stack\u0026rdquo; awareness.\n","externalUrl":null,"permalink":"/posts/claudecodeskillstutor/","section":"Posts","summary":"The Ultimate Guide to Claude Code Skills (2026 Edition) In the 2026 developer ecosystem, AI has evolved from a simple “autocomplete tool” into an “autonomous contributor.” As the most logically capable AI for coding, the Claude 3.5/4 series excels at handling large-scale refactors, automated unit testing, and system architecture comprehension.\n","title":"Claude Code Skills 完全指南（2026最新版）","type":"posts"},{"content":"An Anthropic hackathon winner that grew into the most popular AI agent enhancement system—now with 174K+ GitHub stars.\nWhat Is Everything Claude Code? # Everything Claude Code (ECC) is an agent harness performance optimization system—a complete enhancement layer for AI coding agents like Claude Code, Codex, Cursor, OpenCode, and Gemini.\nIt started as a personal setup by @affaan-m, who won the Anthropic x Forum Ventures hackathon building zenith.chat entirely with Claude Code. After 10+ months of daily use building real products, he open-sourced his entire workflow. The result? A comprehensive system that has since accumulated 174,000+ stars on GitHub and over 28,000 forks.\nECC is not just a collection of config files. It\u0026rsquo;s a complete, production-ready system:\n300+ skills — reusable prompt bundles for everything from code review to TDD to research Instincts — automatic behaviors that guide Claude\u0026rsquo;s default responses Memory optimization — persistent knowledge graph for long-running projects Continuous learning — automated improvement loops that refine outputs over time Security scanning — built-in vulnerability detection for every commit Research-first development — automated multi-source research before code changes MCP configurations — ready-to-use Model Context Protocol server setups And it\u0026rsquo;s completely free and MIT-licensed.\nWhy ECC Exists # If you\u0026rsquo;ve used Claude Code, you know it\u0026rsquo;s powerful out of the box. But as you use it daily across real projects, you realize:\nYou keep writing the same instructions Context windows fill up with setup boilerplate You spend time re-teaching Claude your conventions There\u0026rsquo;s no built-in system for continuous improvement ECC solves all of this by providing a structured enhancement layer that sits on top of your agent harness. Install it once, and suddenly your AI agent has:\nA complete library of specialized skills at its disposal Automatic memory of project conventions and decisions Built-in quality gates for security and code review Research capabilities that kick in before writing code Key Features # Skills System # Skills are the primary workflow surface in ECC. They act like scoped workflow bundles: reusable prompts, structure, supporting files, and codemaps that let Claude quickly navigate your codebase without burning context on exploration.\nInstead of describing what you want every time, you invoke a slash command:\n/tdd → Test-driven development workflow /code-review → Comprehensive code review /e2e → End-to-end testing setup /refactor-clean → Dead code cleanup /security-review → Security vulnerability scan /deep-research → Multi-source research with synthesis Each skill includes structured prompts, command handlers, and codemaps—everything Claude needs to execute that workflow correctly from the start.\nInstincts # Instincts are automatic behaviors that guide how Claude responds by default. Instead of starting from scratch each session, ECC configures instincts for:\nCode quality standards (immutability, error handling, naming conventions) Project-specific conventions (file organization, testing patterns) Security-first development (input validation, secret detection) Documentation discipline (when and how to document) Memory Optimization # ECC implements a persistent knowledge graph that tracks project entities, decisions, and relationships across sessions. This means your AI agent remembers:\nArchitecture decisions and their rationale Which patterns work for your specific project Key entities and their relationships Past decisions that should inform future work No more re-teaching Claude everything every session.\nContinuous Learning # ECC includes feedback loops that automatically improve outputs over time:\nRun evaluations to measure quality Detect patterns in past successes and failures Refine prompts and instincts based on results Build up a custom knowledge base for your domain Security Scanning # Before every commit, ECC can run a security scan that checks for:\nHardcoded secrets and API keys SQL injection vulnerabilities XSS and CSRF patterns Insecure cryptographic usage Dependency vulnerabilities Research-First Development # ECC promotes a research-before-coding workflow. When you ask it to implement a feature, it automatically:\nSearches existing code and GitHub for patterns Checks library documentation via Context7 Synthesizes findings into a plan Then—and only then—starts writing code Cross-Harness Compatibility # One of ECC\u0026rsquo;s standout features is that it works across multiple AI agent harnesses. You\u0026rsquo;re not locked into a single tool:\nHarness Support Claude Code ✅ Full support Codex (OpenAI) ✅ Full support Cursor ✅ Full support OpenCode ✅ Full support Gemini ✅ Full support GitHub Copilot ✅ Support Install once, use everywhere.\nWhat\u0026rsquo;s Inside # ECC contains a massive collection of production-tested components:\n300+ skills covering development, testing, security, research, and operations 100+ agents for specialized tasks (code review, security, planning, research) MCP server configurations for Context7, Exa search, databases, GitHub, and more Hooks system for PostToolUse formatting, linting, and type checking Language-specific rules for TypeScript, Python, Go, Rust, Swift, PHP, and more VSCode integration and editor configurations Plugin system for seamless Claude Code integration Template projects for rapid bootstrapping The project spans multiple languages—JavaScript (57%), Rust (33%), Python (5%), Shell (3%), and TypeScript (1%)—with 170+ contributors.\nHow to Install # Option 1: Install as Plugin (Recommended) # The easiest way is to install ECC as a Claude Code plugin:\n# Add the marketplace /plugin marketplace add https://github.com/affaan-m/everything-claude-code # Install the plugin /plugin install ecc@ecc That\u0026rsquo;s it. You now have access to all commands, agents, skills, and hooks.\nOption 2: Manual Installation # Clone the repo and copy what you need:\ngit clone https://github.com/affaan-m/everything-claude-code.git cd everything-claude-code # Copy rules for your tech stack (e.g., TypeScript + Web) cp -r rules/typescript ~/.claude/rules/ cp -r rules/web ~/.claude/rules/ cp -r rules/common ~/.claude/rules/ # Copy skills you want cp -r skills/* ~/.claude/skills/ Option 3: Via settings.json # Add directly to your Claude configuration:\n{ \u0026#34;extraKnownMarketplaces\u0026#34;: { \u0026#34;ecc\u0026#34;: { \u0026#34;source\u0026#34;: { \u0026#34;source\u0026#34;: \u0026#34;github\u0026#34;, \u0026#34;repo\u0026#34;: \u0026#34;affaan-m/everything-claude-code\u0026#34; } } }, \u0026#34;enabledPlugins\u0026#34;: { \u0026#34;ecc@ecc\u0026#34;: true } } Getting Started # Once installed, start with these commands:\n/hookify → Set up automation hooks for your project /init → Initialize ECC for your project /tdd → Start a test-driven development workflow /code-review → Review your current changes /deep-research → Research before implementing Or dive into the shorthand guide: /projects shows project-level commands, /plan for structured feature planning.\nWhy It Matters # AI coding agents are getting better at an astonishing rate, but raw model capability is only half the equation. The other half is how you direct it.\nECC provides the structure, memory, and workflow that transforms an AI agent from a clever autocomplete into a reliable, consistent development partner. It\u0026rsquo;s the difference between asking Claude to \u0026ldquo;review this code\u0026rdquo; and having it check 15 specific quality gates across security, style, testing, and architecture.\nWith 174K+ stars and a thriving community of 170+ contributors, ECC has become the de facto standard for enhancing AI coding agents. It\u0026rsquo;s not just a tool—it\u0026rsquo;s a movement toward agentic development done right.\nLearn More:\nGitHub: github.com/affaan-m/everything-claude-code Website: ecc.tools License: MIT — free to use, modify, and share ","externalUrl":null,"permalink":"/posts/everythingclaudecodeintro/","section":"Posts","summary":"An Anthropic hackathon winner that grew into the most popular AI agent enhancement system—now with 174K+ GitHub stars.\nWhat Is Everything Claude Code? # Everything Claude Code (ECC) is an agent harness performance optimization system—a complete enhancement layer for AI coding agents like Claude Code, Codex, Cursor, OpenCode, and Gemini.\n","title":"Everything Claude Code: The Ultimate Performance System for AI Agent Harnesses","type":"posts"},{"content":"SchoolBell logo Tip No more setting alarms one by one! Structure your day, anywhere. SchoolBell helps you manage study blocks and breaks with professional school timers.\nSchoolBell: Smart Class Timer # Bring the structure of the classroom to your pocket. Whether you are a student studying at home, a teacher managing a remote classroom, or a school administrator testing schedules, SchoolBell provides a high-fidelity, automated bell system. Say goodbye to manual timers and stay focused on what matters most: learning. Key Features:\nAuthentic Bell Sounds: Choose from a library of high-quality .m4r and .mp3 school bells, including traditional electric bells, Modern classroom bells. Global Schedule Presets: Instantly apply standardized schedules from around the world, including China Middle Schools, Japanese High Schools, South Korean High Schools, and British/American Block schedules. Smart Background Alerts: Our advanced notification system ensures the bell rings accurately even if your phone is locked or the app is closed. Privacy First: No data collection. Your schedules and settings stay on your device. Perfect For: Homeschooling: Keep kids on a disciplined routine. Self-Study: Use the Pomodoro-style rhythm of a school day to boost productivity. School Simulations: Test bell timings and schedules for educational institutions. Customize your schedule and effortlessly manage your study plan. No Ads. Hear the bell. Stay on track. Download SchoolBell today. ","externalUrl":null,"permalink":"/posts/schoolbellapp/","section":"Posts","summary":"SchoolBell logo Tip No more setting alarms one by one! Structure your day, anywhere. SchoolBell helps you manage study blocks and breaks with professional school timers.\n","title":"No more setting alarms one by one!","type":"posts"},{"content":" Everything OpenCode # The Terminal War Heats Up # Two years ago, if you wanted AI help with coding, you opened a chat window in your browser or installed an IDE extension. Today, the battlefront has moved to the terminal — and two names dominate the conversation: Claude Code, Anthropic\u0026rsquo;s official agentic coding tool, and OpenCode, the open-source upstart that has taken the developer world by storm.\nBoth tools are AI coding agents that run in your terminal, understand your codebase, and execute tasks autonomously. Both have passionate communities, rapid release cycles, and ambitious roadmaps. But they approach the problem from fundamentally different directions.\nThis article breaks down the differences, strengths, and trade-offs of each, so you can decide which one fits your workflow.\nWhat Is Claude Code? # Claude Code is Anthropic\u0026rsquo;s official agentic coding tool, first released as a research preview in February 2025 and reaching general availability later that year. It is built around a single principle: let the most capable AI model drive the entire development workflow.\nIt operates as an agentic loop — you describe what you want, Claude plans the approach, reads your code, makes changes across files, runs tests, iterates on failures, and presents the result. At Anthropic itself, the majority of code is now written by Claude Code, with engineers focusing on architecture and orchestration.\nKey characteristics:\nTightly coupled with Anthropic\u0026rsquo;s Claude models (Opus, Sonnet, Haiku) Agentic loop: plans, executes, observes, iterates Built-in tools: Read, Write, Edit, Bash, Glob, Grep Extensions: skills, hooks, MCP servers, subagents, agent teams SWE-bench Verified score: 80.9% (highest at release) Installation: desktop app, or via package managers Pricing: subscription-based via Anthropic plans (free tier available) What Is OpenCode? # OpenCode is an open-source AI coding agent built in Go. Starting as a community project, it has rapidly grown to over 150,000 GitHub stars, 850+ contributors, and 6.5 million monthly active developers. It is available as a terminal TUI, desktop app, and IDE extension.\nIts defining philosophy is provider freedom — you bring your own model, from any provider. OpenCode does not lock you into a single AI ecosystem. Whether you prefer Claude, GPT-4o, Gemini, local models via Ollama, or GitHub Copilot, OpenCode connects to all of them.\nKey characteristics:\nOpen-source (MIT license), built in Go with Bubble Tea TUI Multi-provider: Anthropic, OpenAI, Google, AWS Bedrock, Groq, OpenRouter, local models Built-in tools: glob, grep, view, write, edit, patch, bash, fetch, agent Plan/Build dual-mode system LSP integration for code intelligence MCP support for extensibility Custom commands, themes, keybindings Installation: curl -fsSL https://opencode.ai/install | bash Pricing: free and open-source (bring your own API keys) Architecture: Monolithic vs Modular # The most fundamental difference between the two tools lies in their architecture.\nClaude Code: Deep Integration # Claude Code is a harness built specifically for Claude models. The tool and the model are designed to work together. When Claude plans a multi-step refactor, its deep reasoning capabilities — including extended thinking — are available natively. The tool does not need to abstract over multiple providers or handle model-specific quirks.\nThis means Claude Code takes full advantage of Claude\u0026rsquo;s strengths: long-context windows, tool-use precision, and structured reasoning. But it also means you are tied to Anthropic\u0026rsquo;s pricing, availability, and model roadmap.\nOpenCode: Provider Abstraction # OpenCode, written in Go, abstracts the LLM layer so any provider can plug in. The TUI, tool system, and session management are all provider-agnostic. This gives you maximum flexibility — you can use GPT-4o for quick tasks and Claude Opus for complex reasoning in the same session — but it also means the tool cannot deeply optimize for any single model\u0026rsquo;s capabilities.\nOpenCode\u0026rsquo;s architecture is modular by design: a CLI layer (Cobra), a TUI layer (Bubble Tea), an LLM abstraction layer, a database layer (SQLite), and an LSP integration layer. Each component can be swapped or extended independently.\nModel Support # Aspect Claude Code OpenCode Default model Claude Opus / Sonnet / Haiku None (you configure) Anthropic Claude Native (best optimization) Via API key OpenAI GPT No Yes Google Gemini No Yes AWS Bedrock No Yes Local models (Ollama) No Yes GitHub Copilot No Yes OpenRouter No Yes Model switching in-session /model command Tab to switch Extended thinking Native (Opus) Depends on provider Verdict: OpenCode wins on choice; Claude Code wins on depth. If you want provider flexibility or need local models for sensitive code, OpenCode is the clear choice. If you want the deepest integration with the most capable coding model available, Claude Code delivers an experience no multi-provider tool can match.\nTooling and Capabilities # Both tools offer similar core capabilities — file operations, search, shell execution, web access — but the details differ significantly.\nClaude Code\u0026rsquo;s Unique Strengths # Subagents: Spawn isolated agents with fresh context that return compact summaries, keeping your main conversation context clean Agent teams: Coordinate multiple independent Claude Code sessions with shared tasks and peer-to-peer messaging Hooks: Deterministic automation triggered by lifecycle events — format on save, lint after edit, type-check on stop Skills: Reusable workflows and reference knowledge, loaded via /command or automatically by Claude CLAUDE.md: Persistent project-level context loaded every session — ideal for conventions and \u0026ldquo;always do X\u0026rdquo; rules Bare mode: Minimal mode for scripted CI/CD calls, skipping auto-discovery Auto mode: Lets Claude decide when to ask vs. proceed, based on risk assessment OpenCode\u0026rsquo;s Unique Strengths # TUI experience: Full-screen terminal interface with themes, session picker, model switcher, vim-like editor, and file change visualization Multi-session: Run multiple agents in parallel on the same project Plan/Build modes: Tab between planning (read-only analysis) and building (full tool access) LSP integration: Agent queries Language Servers directly for real-time diagnostics, definitions, and references Custom commands: Reusable prompt templates with named argument placeholders Session sharing: Share any session via a public URL at opncd.ai — free for all users Sourcegraph integration: Search code across public GitHub repositories Multi-platform: Terminal, desktop app, AND IDE extension from the same codebase Feature Comparison # Capability Claude Code OpenCode Read files Yes Yes Write files Yes Yes Edit files Yes Yes Bash execution Yes Yes File search Yes (Glob) Yes (Glob) Content search Yes (Grep) Yes (Grep) Web fetch Yes Yes Web search Yes (Exa) Yes (Exa) LSP integration Via plugin Built-in MCP support Yes Yes Subagents Yes (full system) Yes (agent tool) Parallel execution Agent teams (multi-session) Multi-session Hooks/automation Yes (lifecycle hooks) Limited Skills/custom commands Skills (markdown) Custom commands (markdown) Image support Yes Drag \u0026amp; drop Session sharing Yes (Pro/Max) Yes (free) Undo/redo Conversational undo /undo / /redo Desktop app Yes Yes IDE extension Yes (VS Code, JetBrains) Yes (VS Code) Extensibility # Claude Code\u0026rsquo;s Layered Extension Model # Claude Code\u0026rsquo;s extensibility is organized in layers, each with a clear purpose:\nCLAUDE.md — Always-on context for project conventions, loaded every session. Best for rules like \u0026ldquo;Use pnpm, not npm.\u0026rdquo; Skills — Markdown files containing instructions and workflows. Invoked via /command or loaded automatically by Claude. Can run in subagents for isolation. MCP servers — Standard protocol to connect databases, APIs, GitHub, Slack, and thousands of other services. Hooks — Deterministic scripts that fire on PreToolUse, PostToolUse, and Stop lifecycle events. Guaranteed execution regardless of model behavior. Subagents — Isolated context with custom prompts and tool permissions. Configure specialized workers for review, research, or debugging. Agent teams — Multiple coordinating Claude Code sessions working in parallel, communicating results via shared tasks. Plugins — Packaging layer that bundles skills, hooks, subagents, and MCP servers into distributable units. OpenCode\u0026rsquo;s Extensible Design # Custom commands — Markdown templates with named argument placeholders, stored per-user or per-project. Agents — Configurable primary and sub-agents defined in markdown files with permission control over tool access. MCP servers — Standard MCP support for external integrations. Themes \u0026amp; keybindings — Full customization of the TUI experience. Custom tools — Define your own tool functions in opencode.json. Skills — SKILL.md files following the Agent Skills open standard (shared with Claude Code). Pricing # Claude Code OpenCode Tool cost Subscription-based Free (open-source) Free tier Limited usage (Haiku/Sonnet) Unlimited (your API keys) Pro $20/month $0 Max/Team $100-200/month $0 Model costs Included in subscription Pay providers directly Local models Not available Yes (free) Winner for cost-conscious teams: OpenCode. If you already have API keys for Claude, GPT, or Gemini, OpenCode costs nothing beyond what you already pay. For teams with variable usage, OpenCode\u0026rsquo;s pay-per-token model can be significantly cheaper than fixed subscriptions. The ability to use local models also makes it viable for air-gapped environments.\nCommunity and Ecosystem # Claude Code OpenCode GitHub stars ~122K ~150K+ Contributors ~50 850+ Open source Partially (installation scripts) Fully (MIT license) Governance Anthropic (company) Community + company Release cadence Weekly Multiple times per week Third-party plugins Growing Extensive Which One Should You Choose? # Choose Claude Code if: # You want the deepest integration with the most capable coding model (Claude Opus) You value deterministic automation through lifecycle hooks You need enterprise-grade security and support from a single vendor You want one subscription, one API, one ecosystem You rely on advanced features like agent teams and extended thinking Benchmark performance is your primary decision criterion Choose OpenCode if: # You want provider freedom — use Claude today, switch to Gemini tomorrow You prefer open-source software you can inspect, modify, and self-host You need local models for air-gapped or sensitive environments You already have API keys and want to avoid another subscription You value a polished TUI with themes, session management, and keyboard-driven workflows You run multiple agents in parallel on the same project You work across different projects with different toolchains The Verdict # The honest answer is that both tools are excellent — and the best choice depends entirely on your priorities.\nClaude Code is the depth play. It goes all-in on a single model ecosystem and delivers an integration quality that no multi-provider tool can match. If you believe Claude is the best model for coding (and the benchmarks support that), Claude Code is the natural choice.\nOpenCode is the breadth play. It sacrifices some depth of integration for maximum flexibility. If you value choice, openness, and the ability to adapt as the model landscape evolves, OpenCode is hard to beat.\nIn practice, many developers use both — Claude Code for heavy lifting and complex reasoning, OpenCode for quick tasks, multi-provider workflows, and environments where Claude Code isn\u0026rsquo;t practical.\nThe terminal has become the most exciting battleground in AI-assisted development. Whichever side you choose, you\u0026rsquo;re living in the future.\nThis comparison reflects the state of both tools as of May 2026. Both projects ship rapidly — check their official docs for the latest features.\n","externalUrl":null,"permalink":"/posts/opencodevsclaudecode/","section":"Posts","summary":"Everything OpenCode # The Terminal War Heats Up # Two years ago, if you wanted AI help with coding, you opened a chat window in your browser or installed an IDE extension. Today, the battlefront has moved to the terminal — and two names dominate the conversation: Claude Code, Anthropic’s official agentic coding tool, and OpenCode, the open-source upstart that has taken the developer world by storm.\n","title":"OpenCode vs Claude Code: Which AI Coding Agent Should You Choose?","type":"posts"},{"content":"I have a friend who, a few years ago, became a short-video creator and did quite well, amassing hundreds of thousands of followers. Last year, he told me he was now using AI to create content. What used to take three people, he could now do alone—and even better than before. At the time, I thought he was just humble-bragging.\nLast month, we chatted again. He mentioned he was now figuring out how to “manage” his several AIs—because they had started planning tasks on their own.\nI didn’t say much, but I kept thinking: the word he used, “manage,” might soon sound naive, just like someone twenty years ago saying, “I’m managing my folders.” Back then, people also thought it was a serious matter.\nThen I thought of another friend. He worked as a quality inspector in a manufacturing factory, earning 6,000 yuan a month. He had done it for eight years and was very skilled.\nLast year, the factory introduced AI visual inspection. He was reassigned to “supervise the AI,” and his salary dropped to 4,800 yuan. This year, he told me he had started delivering food because even the “AI supervisor” positions were no longer needed.\nOne friend is moving upward, the other downward.\nAnd the distance between them is widening at a speed that leaves people no time to react.\nIn this article, I want to make a few things clear: where the opportunities for moving upward will be in the next four years; where the downward path will lead; and, if you have children, how you should think about this right now.\nThe last part is my most personal thoughts—and the part I believe deserves the most serious attention.\nI. A Number That Has Kept Me Uneasy for a Long Time # In 2021, the world’s smartest AI scored 35 points on a set of elementary school math problems.\nThis is not a joke. It was test data publicly released by OpenAI. The benchmark is called GSM8K—simple word problems like “Xiao Ming has 3 apples, gives 2 to Xiao Hong, how many are left?” Even the most advanced AI at the time only scored 35.\n(GSM8K: Grade School Math 8K, a dataset containing 8,500 elementary-level math word problems. It was once a standard benchmark for measuring AI mathematical reasoning.)\nBy 2026, on the same type of test, the score had jumped to 99. It took less than five years.\nThe shape of this curve is not a slow climb—it’s a near-vertical line shooting into the sky. It rose so steeply that the people who created the questions felt embarrassed. The benchmark was eventually retired because it had lost all testing value, just like you wouldn’t test a driver’s license with “Can you ride a bicycle?”\nSo they created harder tests.\nHundreds of top experts from around the world collaborated on an exam designed to be “impossible for AI to pass,” called Humanity’s Last Exam (HLE). I’ll casually call it “humanity’s last reserved territory.”\nWhen this test was first released at the end of 2024, the top AIs scored in the single-digit percentages.\nBy February 2026, Claude Opus 4.6 had reached 53.1%.\nFrom single digits to over half in roughly a year and a half.\nThose top experts who created the questions are probably now seriously reconsidering what “things only humans can do” really means. Because the line they thought was the limit is being crossed at a speed they never anticipated.\nII. Before Making Predictions, I Need to Invent a Few Terms # Do you remember how, three years ago, the word “Agent” suddenly became popular? Or “RAG” and “MCP”? These terms either didn’t exist or were only used by a tiny group of researchers two years ago. Now they’re everyday vocabulary in tech media.\n(Agent: An intelligent system that can autonomously plan, execute tasks, and call tools—not just answer questions, but actively get things done.\nRAG: Retrieval-Augmented Generation, a technique that allows AI to pull from your private data in real time.\nMCP: Model Context Protocol, a standard interface that connects AI with various external tools. Think of it as the “USB port” for AI.)\nNew technologies always appear first as phenomena, then we create words for them. Where words can’t keep up, that’s exactly where the real change is happening.\nThe terms I’m about to use don’t exist yet in this form, but I predict they will be in textbooks within five years.\n1. Orchestration Economy\nIn the past, value belonged to whoever “could do the work.” Doctors had value because they understood medicine; programmers had value because they could write code. Execution ability was scarce. When AI’s execution ability becomes abundant, what becomes scarce is “knowing who should do what, and how to combine them.” An orchestrator is someone who may not do the work themselves, but knows how to combine a bunch of AI tools to get the entire job done.\n2. Skill Evaporation\nEveryone has skills they’ve spent years accumulating—translation, proofreading, typesetting, basic programming, data cleaning, customer service scripts… These used to be moats. Skill Evaporation means these skills lose market value in an extremely short time. Not gradual depreciation—evaporation. The fastest to evaporate are skills with clear inputs and outputs, verifiable results, and high repeatability. It’s like what happened to carriage drivers in the 1920s, except twenty times faster.\n3. Silent Production\nWhen Agents can run 24/7 in the background, production starts happening while you sleep. You wake up, open your phone, and discover your AI wrote three drafts, handled twelve emails, and scraped competitor pricing data overnight. No one is watching it—it’s just working. The scale of silent production will become statistically measurable between 2027 and 2028.\n4. Intent Layer\nThe current way we use software is: open an app, find the feature, click, fill out forms, and submit. This interaction model has dominated for thirty years. The Intent Layer is a new paradigm: you simply express what you want, and a system routes it to the right tools and executes it. You say in WeChat, “Help me turn today’s meeting recording into three key conclusions and send them to my boss,” and it calls three different tools behind the scenes. You don’t need to know how it happened. Once the Intent Layer matures, the APP era will end.\n5. Thin-Shell Company\nA company with an extremely thin human layer and dense AI infrastructure—10 people, using AI Agents and automation, can support a business volume that traditionally required hundreds. This will take shape around 2029.\nIII. OpenClaw: A Story You Must Know # One late night in November 2025, an Austrian developer named Peter Steinberger—who once founded a PDF tool company whose software was installed on over a billion devices—connected WhatsApp’s interface with Claude’s API.\nAn hour later, he had a working prototype: you send a message on WhatsApp, and the AI executes tasks on your computer.\nHe thought it was too simple—surely OpenAI or Anthropic had already done it. They hadn’t. “Big companies can’t do this. It’s not a technical problem, it’s an organizational one.”\nIn January 2026, he open-sourced the project. Within 72 hours, it gained 60,000 GitHub stars. Four months later, it surpassed 250,000 stars—breaking the record set by React, the world’s most popular frontend framework, which took ten years to reach the same milestone. It became the fastest-growing open-source project in GitHub history.\nThe project is called OpenClaw.\nIn early March, NVIDIA CEO Jensen Huang commented on OpenClaw: “This may be the most important software release in history.” Eleven days later, NVIDIA released NemoClaw—a dedicated enterprise security plugin built specifically for OpenClaw.\nWhen the world’s most valuable chip company builds supporting products for a four-month-old open-source project, the outline of a new era becomes clear.\nOpenClaw answered one question: when AI becomes powerful enough, what will be the new interface for human-computer interaction?\nIt won’t be apps or websites. It will be your WeChat, WhatsApp, or Telegram. You send a message, and the AI works on your device—organizing files, drafting emails, scraping data, running code, scheduling tasks. It never clocks out, has persistent memory, and keeps working while you sleep.\nAnd OpenClaw’s Skill system (with over 3,000 community-developed plugins already on the ClawHub platform) means: the boundaries of AI Agents are determined by the tools they can call. Whoever builds these tools is building the infrastructure of tomorrow.\nIV. 2027: The First Moment That Silences Most People # There’s a benchmark called SWE-bench that tests whether AI can solve real GitHub code bugs—not toy problems, but real engineering tasks that require understanding the entire project, locating issues, fixing them, and submitting changes.\nIn early 2026, Claude Code paired with the strongest model scored 80.8%. Out of 100 real bugs, the AI could independently fix more than 80. According to SemiAnalysis, Claude Code’s annualized revenue already exceeds $2.5 billion, accounting for more than half of Anthropic’s enterprise revenue.\nPrediction: In Q1 2027, SWE-bench scores will break 95% for the first time.\nEntry-level programmer positions will enter a hiring freeze in 2027—not because of mass layoffs, but because companies will simply stop creating new roles.\nThe opposite is also true: people who can “orchestrate” AIs to complete complex engineering tasks will become extremely scarce in 2027.\nThey know how to break down tasks, design workflows, and evaluate the quality of AI output. Training such a person takes three to six months, not three to six years. This gap will rewrite the talent structure of the entire industry in a very short time.\nThe era of one-person companies will officially arrive in 2027.\nIt’s not just an inspirational story—it’s a replicable methodology. On the Chinese internet, cases of “independent developers earning a million a year” will shift from rare anomalies to common occurrences.\nV. 2028: AI Begins Making AI Smarter # In 2028, AI will, for the first time, independently discover a natural law not yet recorded by the scientific community and publish it—without any human proposing the hypothesis.\nNot writing a paper on something humans already know, but raising its own question, designing its own verification path, reaching its own conclusion—and that conclusion is something humans had never thought of. This moment means: the production of knowledge will no longer be an exclusively human capability.\nThe advertising-driven internet will begin to fall ill in the same year.\nAs more and more search and decision-making are handled by AI, the traditional advertising logic collapses. Advertisers spend money to influence human decisions, but if decisions are made by AI, where do you place the ads?\nIn 2028, at least one major platform will, for the first time in its financial report, list “traffic structure changes caused by AI” as a core risk factor.\nVI. A Very Concrete Vision of Future Work # The future of work is not “humans being replaced by AI,” but humans doing only what humans should do, while AI handles production.\nImagine a scene that might happen between 2028 and 2029:\nThree longtime friends meet at a café on a Thursday afternoon. One says, “I’ve been thinking about a problem lately. A certain link in a certain industry is extremely inefficient. If we approach it with a new idea, we might create something valuable.”\nThe other two respond. One says, “I know this industry; that pain point really exists.” The other says, “I remember someone tried something similar but failed because of XXX.”\nThey chat for about two hours. At five o’clock, one of them opens his phone, sends the meeting recording to his AI, and adds: “Turn this idea into an executable plan.”\nThe next morning, he receives a complete package: market analysis, competitor research, technical feasibility assessment, product prototype, MVP development roadmap, a list of potential first users, and a preliminary financial model.\n(MVP: Minimum Viable Product—a development strategy to validate core product functions with minimal cost and time.)\nIn that scene, what did the three people do? They drank coffee, argued, recalled experiences, and connected their knowledge. They did human things: socializing, thinking, creating, and judging.\nWhat did the AI do? Execution, retrieval, analysis, integration, production—all the work with clear standards.\nWhat will become scarcest for humans is no longer execution ability, but the quality of ideas, the accuracy of judgment, and a still severely underestimated skill: knowing when not to trust AI’s conclusions.\nVII. 2029: AI Steps Out of the Screen # All previous changes happened in the digital world. In 2029, they overflow into the physical world.\nHumanoid robots will cross the deployment tipping point around 2029. Tesla Optimus, Figure AI, and multiple Chinese robotics companies are rapidly accumulating reliability data. When the cost of a multi-task humanoid robot drops below $50,000, the economics of warehouses, factories, and logistics centers will be completely rewritten.\nPrediction: In 2029, the global deployment of humanoid robots in warehousing, logistics, and basic manufacturing lines will exceed 10 million units.\nThin-shell companies will take shape: 10 people operating a business volume that traditionally required 500.\nVIII. New Professions That Will Emerge in the Next Four Years # Every technological revolution eliminates old jobs and creates new ones. But new jobs always appear with a lag. Here are several professions I believe will truly take shape between 2027 and 2030:\nAI Orchestration Designer\nCore ability: Break down complex business problems into AI-friendly subtasks, design collaboration between Agents, define what “done right” looks like, and know why the AI failed when it does. Prediction: By 2027, top AI orchestration designers will be worth more than senior software engineers. By 2028, specialized training institutions will appear; by 2029, they will enter university curricula.\nContext Architect\n“Prompt engineers” will disappear—prompting will become systematized and tool-assisted. Context Architects are different. Their job is to design what an AI system “should know”—which knowledge goes into the system prompt, which is retrieved via RAG, which is fetched through tools, and which the AI doesn’t need to know at all. This is a systems design ability focused on knowledge structure and information flow, and it won’t be replaced by tools.\nAI Output Auditor\nWhen AI produces large volumes of code, legal documents, and medical advice, who reviews whether the output is correct, compliant, and free of hallucinations?\n(Hallucination: the phenomenon where AI outputs incorrect information with high confidence—a problem that still exists in all current large language models.)\nMedical auditors will need to be doctors; legal auditors will need to be lawyers. Their work paradigm will be completely different—they must know what types of tasks AI tends to fail on and how to efficiently verify the reliability of AI conclusions.\nSkill Developer\nClawHub already has over 3,000 plugins; in the future there will be 30,000 or 300,000. Skill Developers understand real user needs, break them down into instruction sets that AI can understand and execute, and ensure the capability package works reliably under various edge cases. The opportunity window for early independent developers in the App Store lasted three to four years. The Skill economy window may be even shorter—18 months to two years—but the returns will be high because few people can do it yet.\nHuman-AI Collaboration Trainer\nHelping employees unfamiliar with AI tools transition their working methods. Not teaching them how to use a specific piece of software, but helping them rebuild their understanding of “what work is”—which tasks to hand to AI, which to do themselves, and where trusting AI is dangerous. In 2028, this will be one of the most in-demand internal positions in medium and large enterprises.\nAI Ethics Mediator\nWhen an AI makes a decision that harms someone, who bears responsibility? AI Ethics Mediators span technology, law, psychology, and sociology. In cases where AI systems cause real harm, they help all parties understand what happened, secure reasonable explanations and compensation for victims, and drive system improvements. In 2027, the first specialized arbitration bodies for AI-related disputes will appear.\nIX. Now I’ll Say What No One Wants to Hear # The above is about opportunities. Now comes the part that keeps me up at night.\nThere is a popular narrative that “the wealth created by AI will benefit everyone, and an era of universal high income is coming.” Musk has spoken of similar visions, and so has OpenAI. It sounds beautiful, but I don’t believe it.\nI believe AI can create enormous wealth.\nI don’t believe this wealth will be evenly distributed.\nHistory has never seen a technological revolution that made wealth distribution more equal.\nWhen the steam engine arrived, factory owners got rich, while workers who moved from rural areas to cities saw their living standards decline for the first few decades. When electricity became widespread, the capitalists who owned the power infrastructure benefited the most, and ordinary workers’ wage growth lagged far behind productivity gains. The internet economy created a small number of extremely wealthy people while eliminating many traditional jobs, leading to visible hollowing out of the middle class in many countries.\nI believe AI will not be an exception—and may even be the fastest wealth concentration in history.\nThe reason is simple: this time, it’s not just physical labor being replaced, but nearly all standardized cognitive labor.\nAnd cognitive labor has been the protective moat of the middle class for the past fifty years.\nX. The Future I Truly Fear # Let me describe a scenario that could happen. This is not science fiction—it is a logically coherent inference.\nBetween 2028 and 2030, some countries will begin implementing some form of universal basic income or AI dividend distribution system.\nSounds good, right?\nBut the details matter.\nThis basic income won’t let you live well—it will only be enough to keep you from starving. Enough to rent a small studio, buy ultra-processed food, and subscribe to some entertainment service. Not enough to invest, start a business, or send your child to a good school.\nJust enough to survive, not enough to move upward.\nMeanwhile, those who move upward—those who own AI tools, AI assets, and AI orchestration abilities—their wealth will accumulate at an entirely different order of magnitude.\nThis is not just a wealth gap. It is species differentiation.\nWhat’s even more frightening is that this gap will be extremely stable.\nWhy stable? Because maintaining it will no longer require violence or obvious oppression—only data and algorithms.\nXI. Big Data Stability Maintenance and NPC-ization # We already live in a world where behavioral data is collected on a massive scale. Where you stay, what you click, how many seconds you pause on certain content, how long you scroll short videos, what you search for—these data are being used to predict and influence your behavior.\nThis is still the state in 2026.\nBy 2029, when AI capabilities are fully mature, sensors are ubiquitous, and predictive models are far more accurate—this system’s power will be dozens of times greater than today.\nWhen a system knows you well enough, it can guide your attention to where it wants without you noticing.\nIt pushes content that makes you happy, makes you stay longer, makes you buy more, and keeps your emotions within a manageable range. Not angry, not desperate, not calm, not reflective. Just a state where you feel “pretty good” but nothing actually happens.\nNPC-ization is a process without sensation.\nNPC—Non-Player Characters in games: characters with fixed behavior patterns that loop through preset actions when you’re not interacting with them. They look like they’re living, but they’re actually running a program.\nI worry that a significant portion of people will complete this transformation without realizing it.\nWake up, check the feed, feel like you understand the world; go to work (or not), do tasks assigned by AI or receive basic income; after work, scroll videos, play games, order takeout; sleep. Repeat.\nNot unhappy. Just not awake.\nXII. The Industrialization and Precision Delivery of Tittytainment # In 1995, at an elite conference, Zbigniew Brzezinski coined the term “tittytainment.” When globalization makes large populations economically “redundant,” the most effective way to manage society is to give them enough entertainment and basic material satisfaction so they don’t generate threatening anger or organization.\nHe said this in 1995—before short videos, algorithmic recommendations, or precision content delivery. Back then, “tittytainment” was crude: television, sports, cheap food.\nToday’s tittytainment is precise, personalized, and adjusted in real time.\nIt knows what style of content you like, knows exactly how long a video should be to please you without tiring you, and knows when to push a negative piece to stir your emotions and keep you scrolling.\nWhen AI fully matures, the precision of this system will reach an unsettling level.\nThe content you see will no longer only affect you during the few hours you scroll—it will shape your understanding of the world, influence what you think is normal, what is possible, and what is worth pursuing.\nA person who only ever sees content saying “ordinary people can just lie flat” and a person who only sees content saying “this era is full of opportunities” will ultimately live in completely different perceived realities—even if they live in the same city and walk the same streets.\nThis is not the future. This is already happening. AI will only make it more complete.\nXIII. The Real Risks That Remain Unresolved # The Upgrade of Surveillance Capitalism\nWhen AI Agents run on your local machine, deeply embedded in your workflow, accessing your files, emails, and calendar—your AI assistant may simultaneously be the deepest data collection node on the planet about you. Who owns this data? Who can access it? When this data is used for credit scoring, insurance pricing, or employment decisions—almost no country currently has a sufficiently complete legal framework to answer these questions.\nThe Large-Scale Industrial Harm of AI Hallucinations\nWhen AI is widely used for legal documents, medical advice, and news production, hallucinations cease to be a minor annoyance and become a systemic risk that can cause real harm. In 2027, we are likely to see the first legal cases involving harm caused by erroneous AI-generated medical advice.\nPower Concentration at an Unprecedented Speed\nToday, the world’s most important AI capabilities are concentrated in the hands of a few labs—Anthropic, OpenAI, Google DeepMind, DeepSeek. This level of concentration has no precedent in human history. Nuclear technology was dispersed, power infrastructure was dispersed, and internet architecture was dispersed. But top-tier AI capabilities are becoming highly centralized. Whoever controls the smartest AI controls the future of productivity, information production, decision support, and even the speed and direction of scientific research.\nXIV. My Very Specific Thoughts on My Daughter’s Education # After all the macro discussion, here is the most personal part.\nI have a daughter.\nEvery time I think about those numbers and what will happen between 2027 and 2030, I wonder: where will she be? What will she be doing? Is she prepared?\nThen I realize that “being prepared” is not something she has to do alone—it’s something I need to start doing now.\nMy current thinking is: after she finishes junior high, I will keep her student status on record and let her learn in a different way.\nI know this sounds radical. Let me explain my logic.\nCurrent school education is essentially training people to adapt to the demands of 1990s industrial society: obey rules, complete assigned tasks, get good grades on standardized tests, then enter a large institution and get a stable job.\nThis logic becomes ineffective in the AI era.\nIt’s not that knowledge isn’t important, but “accumulating knowledge through memorization and exam drilling” has the lowest cost-effectiveness in the AI age. Because AI can remember everything you’ve memorized, more accurately and call it faster.\nSo what is the highest cost-effectiveness education in the AI era?\nMy answer is: let a person encounter real problems in the real world as early as possible, and then learn to solve them using various tools—including AI tools.\nSpecifically, I plan to have her do several things:\nExperience the logistics industry.\nLogistics is far more complex than most people realize. From warehouse management to last-mile delivery optimization, cross-border customs declaration, and cold-chain temperature control—every link has real pain points, and every pain point offers opportunities for AI. More importantly, the “human-AI collaboration” model will mature earliest in logistics between 2027 and 2029. She won’t be there to become a delivery person, but to understand how a real complex system operates, what role AI plays, and where its limitations lie.\nEngage with AI services.\nAI services mean “helping others solve problems with AI.” Many traditional small and medium-sized enterprises know AI is useful but don’t know how to use it or lack the ability to build it themselves. People who can design AI workflows, deploy Agents, and organize data for them are currently in severe shortage. I want her to complete several real projects—even small ones, like building an AI customer service or inventory management tool for a relative’s small shop. The scale doesn’t matter; what matters is experiencing real needs, real delivery, and real feedback loops.\nTouch energy and network infrastructure.\nMost young people find these industries boring. But they will be among the fastest-growing and least likely to be fully AI-replaced in the next decade—precisely because they require on-site judgment and physical operation in the real world, which is currently AI’s weakest area. Moreover, the explosion of AI computing power is essentially an explosion in energy consumption. Training a top-tier model consumes electricity equivalent to several days’ usage for a medium-sized city. The siting of data centers, cooling systems, and power supply—these unsexy but critical infrastructures will see massive construction demand and talent shortages in the coming decade. I don’t want her to become an electrician, but to understand what lies behind the “digital world,” where computing power comes from, where data is stored, and what the physical foundation supporting the entire AI ecosystem is. People who can see the “invisible infrastructure” think very differently.\nPsychology—but not the textbook kind.\nThe psychology I want her to learn has two core directions.\nThe first is self-awareness: knowing what she fears, what she desires, how her emotions are triggered, and what mechanisms are being used when someone tries to influence her thinking. This is not to make her cold, but to ensure that when she is influenced, she is informed and actively choosing, not passively pushed along.\nThe second—frankly—is the identification and resistance to PUA (psychological manipulation).\nThere are many people in this world who use systematic psychological techniques to control others—not just in romantic relationships, but in business negotiations, team management, online public opinion, and even content recommendation algorithms. I hope she learns early that when someone makes her feel “you’re not good enough,” “you need to depend on me,” or “only I understand you”—it is not truth, but a technique. Once you can recognize the technique, you are much harder to trap.\nImmerse herself in different circles.\nThere is no methodology for this—only action. Within my ability, I will expose her to people from different industries, backgrounds, and age groups. Not to build connections, but to let her know: the world is much larger than she can see, people solve problems in far more diverse ways than she imagines, and no single lifestyle is the only correct one. A person who has seen enough different people gains an important ability: she will not easily be trapped by any single narrative that claims “only this path is right.”\nA Personal “Life Question Bank.”\nThis is a concept I’ve been thinking about and plan to write about separately. Here’s the outline:\nIn school, we solve problems others created with standard answers.\nBut the real problems in life have no standard answers, and most only reveal themselves when you encounter them.\nA “life question bank” means proactively accumulating problems that only you can encounter and answer—decisions you made that turned out right or wrong (and why), conflicts you had (and how to break them down), opportunities you evaluated. These questions come from life, not textbooks. The richer and more thoughtfully processed your life question bank is, the stronger your judgment becomes, the less likely you are to be led by others’ narratives, and the better you can make choices that truly belong to you in the real world.\nWhy this plan instead of letting her finish high school normally?\nNot because I think high school is useless, but because time has a cost.\nIf she spends those three years in high school doing exam drills, what will she accumulate? If she uses that time for the things above, she will accumulate real judgment experience, real industry knowledge, real social networks, real tool-using abilities, and a preliminary self-awareness framework answering “Who am I? What do I want? How do I face difficulties?”\nThese are things no college entrance exam can provide. And in the AI era, these things will be more enduring in value than a university diploma.\nOf course, diplomas still have value and will for many years—but their function is shifting from “proving you are capable” to “proving you have no obvious defects.” These are two different things.\nI plan to keep her student status because I’m not sure. If after a year out she decides she wants to go to university, the record is still there and the path remains open. I’m not making decisions for her—I want her to have choices.\nWhat I want to do is not some radical educational experiment, but something very simple: give her the chance to step on the ground she will one day stand on, before the world truly changes.\nXV. To Those Who Haven’t Decided Which Way to Go # The quality inspector I know who now delivers food is not doing so because he wasn’t hardworking or smart enough. It’s because when he made his decisions, the information was asymmetric. He didn’t know where the door was, or when it would close.\nI don’t pretend this article can solve that problem. It cannot solve structural issues, information asymmetry, or the logic of capital.\nBut what it can do is let you know: there is a window, and it is currently open.\nWhat can you do right now?\nLearn to orchestrate, not just use. Being able to use AI tools is the baseline. Being able to design workflows where multiple AIs collaborate to complete complex tasks is what creates real competitiveness.\nStart building your own knowledge base. When everyone uses the same base model, the private data and structured experience you accumulate will be the only way to make your AI smarter than others’.\nPay attention to the Skill economy. Look at ClawHub and various Agent plugin markets—find real needs in your industry that no one has yet solved with a plugin. That is your clue.\nAnd most importantly: stay awake.\nIt doesn’t mean no entertainment or working 24 hours a day. It means knowing what you are doing and why you are doing it. Knowing when you are actively choosing and when you are being pushed along.\nGo to cafés, sit down and talk with people, generate ideas that cannot be proceduralized. This is how you stay awake and avoid becoming an NPC.\nBecause the essence of NPC-ization is not that you are lazy or unintelligent, but that you have stopped making real choices. You are running a program instead of making decisions.\nFinal Thoughts # When computers appeared, they didn’t eliminate work—they changed what kind of work had value.\nWhen the internet appeared, it didn’t eliminate work—it changed where work happens.\nWhen AI matures, it won’t eliminate work—it will change why work has value.\nBut in the process of that change, wealth will concentrate among a few, power will concentrate among a few institutions, attention will be captured by algorithms, cognition will be shaped by content, and more and more people will quietly lose their ability to make self-directed decisions while feeling “pretty good.”\nThis is not prophecy. It is the extension of what is already happening.\nI know the quality inspector who now delivers food, and I know the creator who manages a bunch of AIs. Neither is a bad person, and neither is stupid. The gap between them is turning into a chasm that is not easy to cross.\nI wrote this article not to scare anyone or sell anxiety.\nIt’s because the downward path, at the beginning, looks just like the upward path. Only after walking far enough do you realize where you’ve ended up.\nAnd by the time you realize it, it may be too late to turn back.\nThe clock is ticking.\nThe window is narrowing.\nYou are reading this article now.\nThe next step is your choice.\n","externalUrl":null,"permalink":"/posts/2030predict/","section":"Posts","summary":"I have a friend who, a few years ago, became a short-video creator and did quite well, amassing hundreds of thousands of followers. Last year, he told me he was now using AI to create content. What used to take three people, he could now do alone—and even better than before. At the time, I thought he was just humble-bragging.\n","title":"The 2030 Prediction: Those who can correctly utilize AI will ascend to a new level, while those who cannot will become digital serfs.","type":"posts"},{"content":" Blowfish is packed with tons of features. The original aim of Blowfish was to develop a theme that was simple and lightweight. The theme is a fork of Congo and expands its initial vision.\nTailwind CSS 3.0 # Tailwind CSS is at the heart of Blowfish and this release contains the very latest Tailwind CSS version 3. It brings with it performance optimisations and support for some great new CSS features.\nMultilingual support # A highly requested feature, Blowfish is now multilingual! If you publish your content in multiple languages, the site will be built with all the translations available.\n🇬🇧 🇩🇪 🇫🇷 🇪🇸 🇨🇳 🇧🇷 🇹🇷 🇧🇩 Thanks to submissions from the community, Blowfish has already been translated into thirty languages with more to be added over time. By the way, pull requests for new languages are always welcome!\nRTL language support # One of the benefits of the new Tailwind and Multilingual features is the ability to add RTL language support. When enabled, the entire site will reflow content from right-to-left. Every element in the theme has been restyled to ensure it looks great in this mode which aids authors who wish to generate content in RTL languages.\nRTL is controlled on a per-language basis so you can mix and match both RTL and LTR content in your projects and the theme will respond accordingly.\nAutomatic image resizing # A big change in Blowfish 2.0 is the addition of automatic image resizing. Using the power of Hugo Pipes, images in Markdown content are now automatically scaled to different output sizes. These are then presented using HTML srcset attributes enabling optimised file sizes to be served to your site visitors.\n\u0026lt;!-- Markdown: ![My image](image.jpg) --\u0026gt; \u0026lt;img srcset=\u0026#34; /image_320x0_resize_q75_box.jpg 320w, /image_635x0_resize_q75_box.jpg 635w, /image_1024x0_resize_q75_box.jpg 1024w\u0026#34; src=\u0026#34;/image_635x0_resize_q75_box.jpg\u0026#34; alt=\u0026#34;My image\u0026#34; /\u0026gt; Best of all there\u0026rsquo;s nothing you need to change! Simply insert standard Markdown image syntax and let the theme do the rest. If you want a little more control, the figure shortcode has been completely rewritten to provide the same resizing benefits.\nSite search # Powered by Fuse.js, site search allows visitors to quickly and easily find your content. All searches are performed client-side meaning there\u0026rsquo;s nothing to configure on the server and queries are performed super fast. Simply enable the feature in your site configuration and you\u0026rsquo;re all set. Oh, and it also supports full keyboard navigation!\nTables of contents # A highly requested feature, Blowfish now supports tables of contents on article pages. You can see it in action on this page. The contents are fully responsive and will adjust to take advantage of the space available at different screen resolutions.\nAvailable on a global or per article basis, the table of contents can be fully customised using standard Hugo configuration values, allowing you to adjust the behaviour to suit your project.\nAccessibility improvements # From adding ARIA descriptions to more items or simply adjusting the contrast of certain text elements, this release is the most accessible yet.\nVersion 2 also introduces \u0026ldquo;skip to content\u0026rdquo; and \u0026ldquo;scroll to top\u0026rdquo; links that enable quick navigation. There\u0026rsquo;s also keyboard shortcuts for enabling items like search without reaching for the mouse.\nThe new image resizing features also provide full control over alt and title elements enabling an accessible experience for all visitors.\nA whole lot more # There\u0026rsquo;s countless other features to explore. From being able to display taxonomies on articles and list pages, to using the new headline author parameter to customise your homepage. There\u0026rsquo;s also improved JSON-LD structured data which further optimises SEO performance.\n","externalUrl":null,"permalink":"/docs/welcome/","section":"Documentation","summary":" Blowfish is packed with tons of features. The original aim of Blowfish was to develop a theme that was simple and lightweight. The theme is a fork of Congo and expands its initial vision.\n","title":"Welcome to Blowfish","type":"docs"},{"content":"Simply follow the standard Hugo Quick Start procedure to get up and running quickly.\nDetailed installation instructions can be found below. Instructions for updating the theme are also available.\nInstallation # These instructions will get you up and running using Hugo and Blowfish from a completely blank state. Most of the dependencies mentioned in this guide can be installed using the package manager of choice for your platform.\nInstall Hugo # If you haven\u0026rsquo;t used Hugo before, you will need to install it onto your local machine. You can check if it\u0026rsquo;s already installed by running the command hugo version.\nMake sure you are using Hugo version 0.141.0 or later as the theme takes advantage of some of the latest Hugo features. You can find detailed installation instructions for your platform in the Hugo docs.\nBlowfish Tools (recommended) # We just launched a new CLI tool to help you get started with Blowfish. It will create a new Hugo project, install the theme and set up the theme configuration files for you. It\u0026rsquo;s still in beta so please report any issues you find.\nInstall the CLI tool globally using npm (or other package manager):\nnpx blowfish-tools or\nnpm i -g blowfish-tools Then run the command blowfish-tools to start an interactive run which will guide you through creation and configuration use-cases.\nblowfish-tools You can also run the command blowfish-tools new to create a new Hugo project and install the theme in one go. Check the CLI help for more information.\nblowfish-tools new mynewsite Here\u0026rsquo;s a quick video of how fast it is to get started with Blowfish using the CLI tool:\nInstall without CLI # Create a new site # Run the command hugo new site mywebsite to create a new Hugo site in a directory named mywebsite.\nNote that you can name the project directory whatever you choose, but the instructions below will assume it\u0026rsquo;s named mywebsite. If you use a different name, be sure to substitute it accordingly.\nDownload the Blowfish theme # There several different ways to install the Blowfish theme into your Hugo website. From easiest to most difficult to install and maintain, they are:\nGit submodule (recommended) Hugo module Manual file copy If you\u0026rsquo;re unsure, choose the Git submodule method.\nInstall using git # This method is the quickest and easiest for keeping the theme up-to-date. Besides Hugo and Go, you\u0026rsquo;ll also need to ensure you have Git installed on your local machine.\nChange into the directory for your Hugo website (that you created above), initialise a new git repository and add Blowfish as a submodule.\ncd mywebsite git init git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish Then continue to set up the theme configuration files.\nInstall using Hugo # For this method you\u0026rsquo;ll use Hugo to manage your themes. Hugo uses Go to initialise and manage modules so you need to ensure you have go installed before proceeding.\nDownload and install Go. You can check if it\u0026rsquo;s already installed by using the command go version.\nMake sure you are using Go version 1.12 or later as Hugo requires this for modules to work correctly. From your Hugo project directory (that you created above), initialise modules for your website:\n# If you\u0026#39;re managing your project on GitHub hugo mod init github.com/\u0026lt;username\u0026gt;/\u0026lt;repo-name\u0026gt; # If you\u0026#39;re managing your project locally hugo mod init my-project Add the theme to your configuration by creating a new file config/_default/module.toml and adding the following:\n[[imports]] disable = false path = \u0026#34;github.com/nunocoracao/blowfish/v2\u0026#34; Start your server using hugo server and the theme will be downloaded automatically.\nContinue to set up the theme configuration files.\nInstall manually # Download the latest release of the theme source code.\nDownload from Github Extract the archive, rename the folder to blowfish and move it to the themes/ directory inside your Hugo project\u0026rsquo;s root folder.\nContinue to set up the theme configuration files.\nSet up theme configuration files # In the root folder of your website, delete the hugo.toml file that was generated by Hugo. Copy the *.toml config files from the theme into your config/_default/ folder. This will ensure you have all the correct theme settings and will enable you to easily customise the theme to your needs.\nNote: You should not overwrite the module.toml file if one already exists in your project! Depending on how you installed the theme you will find the theme config files in different places:\nHugo Modules: In the Hugo cache directory, or download a copy from GitHub Git submodule or Manual install: themes/blowfish/config/_default Once you\u0026rsquo;ve copied the files, your config folder should look like this:\nconfig/_default/ ├─ hugo.toml ├─ languages.en.toml ├─ markup.toml ├─ menus.en.toml ├─ module.toml # if you installed using Hugo Modules └─ params.toml Important: If you didn\u0026rsquo;t use Hugo Modules to install Blowfish, you must add the line theme = \u0026quot;blowfish\u0026quot; to the top of your hugo.toml file. Next steps # The basic Blowfish installation is now complete. Continue to the Getting Started section to learn more about configuring the theme.\nInstalling updates # From time to time there will be new releases posted that apply fixes and add new functionality to the theme. In order to take advantage of these changes, you will need to update the theme files on your website.\nHow you go about this will depend on the installation method you chose when the theme was originally installed. Instructions for each method can be found below.\nGit submodule Hugo module Manual file copy Update using git # Git submodules can be updated using the git command. Simply execute the following command and the latest version of the theme will be downloaded into your local repository:\ngit submodule update --remote --merge Once the submodule has been updated, rebuild your site and check everything works as expected.\nUpdate using Hugo # Hugo makes updating modules super easy. Simply change into your project directory and execute the following command:\nhugo mod get -u Hugo will automatically update any modules that are required for your project. It does this by inspecting your module.toml and go.mod files. If you have any issues with the update, check to ensure these files are still configured correctly.\nThen simply rebuild your site and check everything works as expected.\nUpdate manually # Updating Blowfish manually requires you to download the latest copy of the theme and replace the old version in your project.\nNote that any local customisations you have made to the theme files will be lost during this process. Download the latest release of the theme source code.\nDownload from Github Extract the archive, rename the folder to blowfish and move it to the themes/ directory inside your Hugo project\u0026rsquo;s root folder. You will need to overwrite the existing directory to replace all the theme files.\nRebuild your site and check everything works as expected.\n","externalUrl":null,"permalink":"/docs/installation/","section":"Documentation","summary":"Simply follow the standard Hugo Quick Start procedure to get up and running quickly.\nDetailed installation instructions can be found below. Instructions for updating the theme are also available.\nInstallation # These instructions will get you up and running using Hugo and Blowfish from a completely blank state. Most of the dependencies mentioned in this guide can be installed using the package manager of choice for your platform.\n","title":"Installation","type":"docs"},{"content":" This section assumes you have already installed the Blowfish theme. We just launched a CLI tool to help you get started with Blowfish. It will help you with installation and configuration. Install the CLI tool globally using:\nnpx blowfish-tools The config files that ship with Blowfish contain all of the possible settings that the theme recognises. By default, many of these are commented out but you can simply uncomment them to activate or change a specific feature.\nBasic configuration # Before creating any content, there are a few things you should set for a new installation. Starting in the hugo.toml file, set the baseURL and languageCode parameters. The languageCode should be set to the main language that you will be using to author your content.\n# config/_default/hugo.toml baseURL = \u0026#34;https://your_domain.com/\u0026#34; languageCode = \u0026#34;en\u0026#34; The next step is to configure the language settings. Although Blowfish supports multilingual setups, for now, just configure the main language.\nLocate the languages.en.toml file in the config folder. If your main language is English you can use this file as is. Otherwise, rename it so that it includes the correct language code in the filename. For example, for French, rename the file to languages.fr.toml.\nNote that the language code in the language config filename should match the languageCode setting in hugo.toml. # config/_default/languages.en.toml title = \u0026#34;My awesome website\u0026#34; [params.author] name = \u0026#34;My name\u0026#34; image = \u0026#34;img/author.jpg\u0026#34; headline = \u0026#34;A generally awesome human\u0026#34; bio = \u0026#34;A little bit about me\u0026#34; links = [ { twitter = \u0026#34;https://twitter.com/username\u0026#34; } ] The [params.author] configuration determines how the author information is displayed on the website. The image should be placed in the site\u0026rsquo;s assets/ folder. Links will be displayed in the order they are listed.\nIf you need extra detail, further information about each of these configuration options, is covered in the Configuration section.\nColour schemes # Blowfish ships with a number of colour schemes out of the box. You can try out the built-in schemes below:\nautumn avocado bloody blowfish congo fire forest github marvel neon noir one-light princess slate terminal # config/_default/params.toml colorScheme = \u0026#34;github\u0026#34; Each colour scheme in Blowfish is built upon a three-colour palette that is used consistently throughout the theme. Each of these main colours is based on the ten-shade colour palettes included in Tailwind CSS.\nAlthough these are the default schemes, you can also create your own. Refer to the Advanced Customisation section for details.\nOrganising content # By default, Blowfish doesn\u0026rsquo;t force you to use a particular content type. In doing so you are free to define your content as you wish. You might prefer pages for a static site, posts for a blog, or projects for a portfolio.\nHere\u0026rsquo;s a quick overview of a basic Blowfish project. All content is placed within the content folder:\n. ├── assets │ └── img │ └── author.jpg ├── config │ └── _default ├── content │ ├── _index.md │ ├── about.md │ └── posts │ ├── _index.md │ ├── first-post.md │ └── another-post │ ├── aardvark.jpg │ └── index.md └── themes └── blowfish It\u0026rsquo;s important to have a firm grasp of how Hugo expects content to be organised as the theme is designed to take full advantage of Hugo page bundles. Be sure to read the official Hugo docs for more information.\nBlowfish is also flexible when it comes to taxonomies. Some people prefer to use tags and categories to group their content, others prefer to use topics.\nHugo defaults to using posts, tags and categories out of the box and this will work fine if that\u0026rsquo;s what you want. If you wish to customise this, however, you can do so by creating a taxonomies.toml configuration file:\n# config/_default/taxonomies.toml topic = \u0026#34;topics\u0026#34; This will replace the default tags and categories with topics. Refer to the Hugo Taxonomy docs for more information on naming taxonomies.\nWhen you create a new taxonomy, you will need to adjust the navigation links on the website to point to the correct sections, which is covered below.\nMenus # Blowfish has two menus that can be customised to suit the content and layout of your site. The main menu appears in the site header and the footer menu appears at the bottom of the page just above the copyright notice.\nBoth menus are configured in the menus.en.toml file. Similarly to the languages config file, if you wish to use another language, rename this file and replace en with the language code you wish to use.\n# config/_default/menus.toml [[main]] name = \u0026#34;Blog\u0026#34; pageRef = \u0026#34;posts\u0026#34; weight = 10 [[main]] name = \u0026#34;Topics\u0026#34; pageRef = \u0026#34;topics\u0026#34; weight = 20 [[main]] pre = \u0026#34;github\u0026#34; name = \u0026#34;GitHub\u0026#34; url = \u0026#34;https://github.com/nunocoracao/blowfish\u0026#34; weight = 30 [[main]] identifier = \u0026#34;github2\u0026#34; pre = \u0026#34;github\u0026#34; url = \u0026#34;https://github.com/nunocoracao/blowfish\u0026#34; weight = 40 [[footer]] name = \u0026#34;Privacy\u0026#34; url = \u0026#34;https://external-link\u0026#34; The name parameter specifies the text that is used in the menu link. You can also optionally provide a title which fills the HTML title attribute for the link.\nThe pageRef parameter allows you to easily reference Hugo content pages and taxonomies. It is the quickest way to configure the menu as you can simply refer to any Hugo content item and it will automatically build the correct link. To link to external URLs, the url parameter can be used.\nThe pre parameter allows you to place an icon from Blowfish\u0026rsquo;s icon set on the menu entry. This parameter can be used with name parameter or by itself. If you want to use multiple menu entries with just icons please set the identifierparameter otherwise Hugo will default to the naming tag as the id and probably not display all the menu entries.\nMenu links will be sorted from lowest to highest weight, and then alphabetically by name.\nBoth menus are completely optional and can be commented out if not required. Use the template provided in the file as a guide.\nNested menus # The theme also supports nested menus. In order to use them you just need to define a parent entry in menu.toml and its sub-menus using the parent parameter to reference the parent. All properties can be used for sub-menus. pageRef and url can also be used in the parent entry. Nested menus are only available in the main menu not for the footer.\n# config/_default/menus.toml [[main]] name = \u0026#34;Parent\u0026#34; weight = 20 [[main]] name = \u0026#34;sub-menu 1\u0026#34; parent = \u0026#34;Parent\u0026#34; pageRef = \u0026#34;samples\u0026#34; weight = 20 [[main]] name = \u0026#34;sub-menu 2\u0026#34; parent = \u0026#34;Parent\u0026#34; pageRef = \u0026#34;samples\u0026#34; weight = 20 [[main]] name = \u0026#34;sub-menu 3\u0026#34; parent = \u0026#34;Parent\u0026#34; pre = \u0026#34;github\u0026#34; pageRef = \u0026#34;samples\u0026#34; weight = 20 Sub-Navigation menu # Additionally, you can also configure a sub-navigation menu. Just define new menu entries as subnavigation in menus.toml. This will render a second line with sub-categories below the main header menu.\n# config/_default/menus.toml [[subnavigation]] name = \u0026#34;An interesting topic\u0026#34; pageRef = \u0026#34;tags/interesting-topic\u0026#34; weight = 10 [[subnavigation]] name = \u0026#34;My Awesome Category\u0026#34; pageRef = \u0026#34;categories/awesome\u0026#34; weight = 20 The default name is the pageRef title cased.\nThumbnails \u0026amp; Backgrounds # Blowfish was built so it would be easy to add visual support to your articles. If you\u0026rsquo;re familiar with Hugo article structure, you just need to place an image file (almost all formats are supported but we recommend .png or .jpg) that starts with feature* inside your article folder. And that\u0026rsquo;s it, Blowfish will then be able to both use the image as a thumbnail within your website as well as for oEmbed cards across social platforms.\nHere is also a guide with more info and a sample if you want to see how you can do it.\nAdditionally, Blowfish also supports background hero images in articles and lists. In order to use a different image than the featured one, add an image file in which the name starts with background*.\nDetailed configuration # The steps above are the bare minimum configuration. If you now run hugo server you will be presented with a blank Blowfish website. Detailed configuration is covered in the Configuration section.\n","externalUrl":null,"permalink":"/docs/getting-started/","section":"Documentation","summary":" This section assumes you have already installed the Blowfish theme. We just launched a CLI tool to help you get started with Blowfish. It will help you with installation and configuration. Install the CLI tool globally using:\n","title":"Getting Started","type":"docs"},{"content":"Blowfish is a highly customisable theme and uses some of the latest Hugo features to simplify how it is configured.\nThe theme ships with a default configuration that gets you up and running with a basic blog or static website.\nWe just launched a CLI tool to help you get started with Blowfish. It will help you with installation and configuration. Install the CLI tool globally using:\nnpx blowfish-tools Configuration files bundled with the theme are provided in TOML format as this is the default Hugo syntax. Feel free to convert your config to YAML or JSON if you wish.\nThe default theme configuration is documented in each file so you can freely adjust the settings to meet your needs.\nAs outlined in the installation instructions, you should adjust your theme configuration by modifying the files in the config/_default/ folder of your Hugo project and delete the hugo.toml file in your project root. Site configuration # Standard Hugo configuration variables are respected throughout the theme, however there are some specific things that should be configured for the best experience.\nThe site configuration is managed through the config/_default/hugo.toml file. The table below outlines all the settings that the Blowfish takes advantage of.\nNote that the variable names provided in this table use dot notation to simplify the TOML data structure (ie. outputs.home refers to [outputs] home).\nName Default Description theme \u0026quot;blowfish\u0026quot; When using Hugo Modules this config value should be removed. For all other installation types, this must be set to blowfish for the theme to function. baseURL Not set The URL to the root of the website. defaultContentLanguage \u0026quot;en\u0026quot; This value determines the default language of theme components and content. Refer to the language and i18n section below for supported language codes. enableRobotsTXT true When enabled, a robots.txt file will be created in the site root that allows search engines to crawl the entire site. If you prefer to provide your own pre-made robots.txt, set to false and place your file in the static directory. For complete control, you may provide a custom layout to generate this file. pagination.pagerSize 10 The number of articles listed on each page of the article listing. summaryLength 0 The number of words that are used to generate the article summary when one is not provided in the front matter. A value of 0 will use the first sentence. This value has no effect when summaries are hidden. outputs.home [\u0026quot;HTML\u0026quot;, \u0026quot;RSS\u0026quot;, \u0026quot;JSON\u0026quot;] The output formats that are generated for the site. Blowfish requires HTML, RSS and JSON for all theme components to work correctly. permalinks Not set Refer to the Hugo docs for permalink configuration. taxonomies Not set Refer to the Organising content section for taxonomy configuration. Thumbnails # Blowfish was built so it would be easy to add visual support to your articles. If you\u0026rsquo;re familiar with Hugo article structure, you just need to place an image file (almost all formats are supported but we recommend .png or .jpg) that starts with feature* inside your article folder. And that\u0026rsquo;s it, Blowfish will then able to both use the image as a thumbnail within your website as well as for oEmbed cards across social platforms.\nHere is also a guide with more info and a sample if you want to see how you can do it.\nLanguage and i18n # Blowfish is optimised for full multilingual websites and theme assets are translated into several languages out of the box. The language configuration allows you to generate multiple versions of your content to provide a customised experience to your visitors in their native language.\nThe theme currently supports the following languages by default:\nLanguage Code Arabic ar Bulgarian bg Bengali bn Catalan ca Czech cs German de English en Esperanto eo Spanish (Spain) es Finnish fi French fr Galician gl Hebrew he Croatian hr Hungarian hu Indonesian id Italian it Japanese ja Korean ko Dutch nl Persian fa Polish pl Portuguese (Brazil) pt-br Portuguese (Portugal) pt-pt Romanian ro Russian ru Thai th Turkish tr Vietnamese vi Simplified Chinese (China) zh-cn Traditional Chinese (Taiwan) zh-tw The default translations can be overridden by creating a custom file in i18n/[code].yaml that contains the translation strings. You can also use this method to add new languages. If you\u0026rsquo;d like to share a new translation with the community, please open a pull request.\nConfiguration # In order to be as flexible as possible, a language configuration file needs to be created for each language on the website. By default Blowfish includes an English language configuration at config/_default/languages.en.toml.\nThe default file can be used as a template to create additional languages, or renamed if you wish to author your website in a language other than English. Simply name the file using the format languages.[language-code].toml.\nNote: Ensure the defaultContentLanguage parameter in the site configuration matches the language code in your language config filename. Global # Name Default Description languageCode \u0026quot;en\u0026quot; The Hugo language code for this file. It can be a top-level language (ie. en) or a sub-variant (ie. en-au) and should match the language code in the filename. Hugo expects this value to always be in lowercase. For proper HTML compliance, set the isoCode parameter which is case-sensitive. languageName \u0026quot;English\u0026quot; The name of the language. weight 1 The weight determines the order of languages when building multilingual sites. title \u0026quot;Blowfish\u0026quot; The title of the website. This will be displayed in the site header and footer. Params # Name Default Description params.displayName \u0026quot;EN\u0026quot; The name used when the language appears on the website. params.isoCode \u0026quot;en\u0026quot; The ISO language code for HTML metadata purposes. It can be a top-level language (ie. en) or a sub-variant (ie. en-AU). params.rtl false Whether or not this is a RTL language. Set to true to reflow content from right-to-left. Blowfish fully supports using RTL and LTR languages at the same time and will dynamically adjust to both. params.dateFormat \u0026quot;2 January 2006\u0026quot; How dates are formatted in this language. Refer to the Hugo docs for acceptable formats. params.logo Not set The relative path to the site logo file within the assets/ folder. The logo file should be provided at 2x resolution and supports any image dimensions. params.secondaryLogo Not set The relative path to the secondary site logo file within the assets/ folder. The logo file should be provided at 2x resolution and supports any image dimensions. This should have an inverted/contrasting colour scheme to logo. If set, this logo will be shown when users toggle from the defaultAppearance mode. params.description Not set The website description. This will be used in the site metadata. params.copyright Not set A Markdown string for the site footer copyright message can include the placeholder { year } to dynamically insert the current year. If none is provided, Blowfish will automatically generate a copyright string using the site title. Author # Name Default Description params.author.name Not set The author\u0026rsquo;s name. This will be displayed in article footers, and on the homepage when the profile layout is used. params.author.email Not set The author\u0026rsquo;s email. This will be used if the reply-via-email functionality is enabled. params.author.image Not set Path to the image file of the author. The image should be a 1:1 aspect ratio. The image can be placed in the site\u0026rsquo;s assets/ folder or can be external url. params.author.imageQuality 96 The author\u0026rsquo;s image file will be treated as a \u0026ldquo;high quality\u0026rdquo; image to minimize artifacts on the front page. Value range 1-100. params.author.headline Not set A Markdown string containing the author\u0026rsquo;s headline. It will be displayed on the profile homepage under the author\u0026rsquo;s name. params.author.bio Not set A Markdown string containing the author\u0026rsquo;s bio. It will be displayed in article footers. params.author.links Not set The links to display alongside the author\u0026rsquo;s details. The config file contains example links which can simply be uncommented to enable. The order that the links are displayed is determined by the order they appear in the array. Custom links can be added by providing corresponding SVG icon assets in assets/icons/. Menus # Blowfish also supports language-specific menu configurations. Menu config files follow the same naming format as the languages file. Simply provide the language code in the file name to tell Hugo which language the file relates to.\nMenu config files are named with the format menus.[language-code].toml. Always ensure that the language code used in the menus configuration matches the languages configuration.\nThe Getting Started section explains more about the structure of this file. You can also refer to the Hugo menu docs for more configuration examples.\nTheme parameters # Blowfish provides a large number of configuration parameters that control how the theme functions. The table below outlines every available parameter in the config/_default/params.toml file.\nMany of the article defaults here can be overridden on a per article basis by specifying it in the front matter. Refer to the Front Matter section for further details.\nGlobal # Name Default Description colorScheme \u0026quot;blowfish\u0026quot; The theme colour scheme to use. Valid values are blowfish (default), avocado, fire, ocean, forest, princess, neon, bloody, terminal, marvel, noir, autumn, congo, slate, github, and one-light. Refer to the Colour Schemes section for more details. defaultAppearance \u0026quot;light\u0026quot; The default theme appearance, either light or dark. autoSwitchAppearance true Whether the theme appearance automatically switches based upon the visitor\u0026rsquo;s operating system preference. Set to false to force the site to always use the defaultAppearance. enableA11y false Whether to enable the accessibility toggle button. enableSearch false Whether site search is enabled. Set to true to enable search functionality. Note that the search feature depends on the outputs.home setting in the site configuration being set correctly. enableCodeCopy false Whether copy-to-clipboard buttons are enabled for \u0026lt;code\u0026gt; blocks. The highlight.noClasses parameter must be set to false for code copy to function correctly. Read more about other configuration files below. enableStructuredBreadcrumbs false Whether to add BreadcrumbList for SEO. Do NOT enable this if your content path does not match the URL, i.e., complex URL setting. enableStyledScrollbar true Whether to enable styled scrollbar via tailwind-scrollbar. Set to false to use the browser\u0026rsquo;s default scrollbar styling. replyByEmail false Whether the reply-by-email link is enabled after post. The params.author.email parameter in config/_default/languages.en.toml must be set. forgejoDefaultServer Not set The default server parameter for the forgejo shortcode. giteaDefaultServer Not set The default server parameter for the gitea shortcode. mainSections Not set The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used. showViews Not set Whether or not articles and list views are displayed. This requires firebase integrations to be enabled, look below. showLikes Not set Whether or not articles and list likes are displayed. This requires firebase integrations to be enabled, look below. robots Not set String that indicates how robots should handle your site. If set, it will be output in the page head. Refer to Google\u0026rsquo;s docs for valid values. disableImageZoom false Disables image zoom feature across all the images in the site. disableImageOptimization false Disables image resize and optimization features across all the images in the site, except images using markdown syntax (![](image.jpg)) disableImageOptimizationMD false Disables image resize and optimization features only for images using markdown syntax (![](image.jpg)). backgroundImageWidth 1200 Width (in pixels) to scale background images to. disableTextInHeader false Disables text in header, useful for logo based headers. defaultBackgroundImage Not set Default background image for both background homepage layout and background hero style defaultFeaturedImage Not set Default background image for all featured images across articles, will be overridden by a local featured image. defaultSocialImage Not set Default image for social media sharing (Open Graph and Twitter). Will be overridden by a local feature image. hotlinkFeatureImage false Hotlink external images in article feature images and article cards. Those images will not be processed by Hugo. imagePosition Not set Sets the position of the default image using object-position attribute. Valid values are as specified in the MDN documentation. highlightCurrentMenuArea Not set Marks menu entries in the main menu when selected smartTOC Not set Activate smart Table of Contents, items in view will be highlighted. smartTOCHideUnfocusedChildren Not set When smart Table of Contents is turned on, this will hide deeper levels of the table when they are not in focus. fingerprintAlgorithm \u0026quot;sha512\u0026quot; Hash algorithm for CSS/JS file fingerprinting to prevent browser caching issues. Valid values are sha512 (default), sha384, sha256. Header # Name Default Description header.layout \u0026quot;basic\u0026quot; Defines the header for the entire site, supported values are basic, fixed, fixed-fill, and fixed-fill-blur. Footer # Name Default Description footer.showMenu true Show/hide the footer menu, which can be configured in the [[footer]] section of the config/_default/menus.en.toml file. footer.showCopyright true Whether or not to show the copyright string in the site footer. Note that the string itself can be customised using the copyright parameter in the languages configuration. footer.showThemeAttribution true Whether or not to show the \u0026ldquo;powered by\u0026rdquo; theme attribution in the site footer. If you choose to disable this message, please consider attributing the theme somewhere else on your site (for example, on your about page). footer.showAppearanceSwitcher false Whether or not to show the appearance switcher in the site footer. The browser\u0026rsquo;s local storage is used to persist the visitor\u0026rsquo;s preference. footer.showScrollToTop true When set to true the scroll to top arrow is displayed. Homepage # Name Default Description homepage.layout \u0026quot;profile\u0026quot; The layout of the homepage. Valid values are page, profile, hero, card, background, or custom. When set to custom, you must provide your own layout by creating a /layouts/partials/home/custom.html file. Refer to the Homepage Layout section for more details. homepage.homepageImage Not set Image to be used in hero and card layouts. Can be set as local image from asset directory or external image url. Refer to the Homepage Layout section for more details. homepage.showRecent false Whether or not to display the recent articles list on the homepage. homepage.showRecentItems 5 How many articles to display if showRecent is true. If variable is set to 0 or if it isn\u0026rsquo;t defined the system will default to 5 articles. homepage.showMoreLink false Whether or not to display a show more link at the end of your posts that takes the user to a predefined place. homepage.showMoreLinkDest /posts The destination of the show more button. homepage.cardView false Display recent articles as a gallery of cards. homepage.cardViewScreenWidth false Enhance the width of the recent articles card gallery to take the full width available. homepage.layoutBackgroundBlur false Makes the background image in the homepage layout blur with the scroll homepage.disableHeroImageFilter false Whether to apply an image filter on the homepage background. Article # Name Default Description article.showDate true Whether or not article dates are displayed. article.showViews false Whether or not article views are displayed. This requires firebase integrations to be enabled, look below. article.showLikes false Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below. article.showDateOnlyInArticle false Show date within article even if not displayed in article listings/cards. article.showDateUpdated false Whether or not the dates articles were updated are displayed. article.showAuthor true Whether or not the author box is displayed in the article footer. article.showAuthorBottom false Author boxes are displayed at the bottom of each page instead of the top. article.showHero false Whether the thumbnail image will be shown as a hero image within each article page. article.heroStyle Not set Style to display the hero image, valid options are: basic, big, background, thumbAndBackground. Effective only if article.showHero = true. article.layoutBackgroundBlur true Makes the background image in the background article heroStyle blur with the scroll article.layoutBackgroundHeaderSpace true Add space between the header and the body. article.showBreadcrumbs false Whether or not breadcrumbs are displayed in the article header. article.showDraftLabel true Whether or not the draft indicator is shown next to articles when site is built with --buildDrafts. article.showEdit false Whether or not the link to edit the article content should be displayed. article.editURL Not set When article.showEdit is active, the URL for the edit link. article.editAppendPath true When article.showEdit is active, whether or not the path to the current article should be appended to the URL set at article.editURL. article.seriesOpened false Whether or not the series module will be displayed open by default or not. article.showHeadingAnchors true Whether or not heading anchor links are displayed alongside headings within articles. article.showPagination true Whether or not the next/previous article links are displayed in the article footer. article.invertPagination false Whether or not to flip the direction of the next/previous article links. article.showReadingTime true Whether or not article reading times are displayed. article.showTableOfContents false Whether or not the table of contents is displayed on articles. article.showRelatedContent false Display related content for each post. Might required additional configuration to your hugo.toml. Please check the theme hugo.toml if you want to enable this feature and copy all the relevant related entries. Also check Hugo\u0026rsquo;s docs on related content. article.relatedContentLimit 3 Limit of related articles to display if showRelatedContent is turned on. article.showTaxonomies false Whether or not all the taxonomies related to this article are displayed. article.showCategoryOnly false Whether or not the \u0026ldquo;category\u0026rdquo; taxonomy is displayed. showTaxonomies should be false when this param is used, otherwise duplicates will appear. article.showAuthorsBadges false Whether the authors taxonomies are are displayed in the article or list header. This requires the setup of multiple authors and the authors taxonomy. Check this page for more details on how to configure that feature. article.showWordCount false Whether or not article word counts are displayed. article.showComments false Whether or not the comments partial is included after the article footer. article.sharingLinks Not set Which sharing links to display at the end of each article. When not provided, or set to false no links will be displayed. Available values are: \u0026ldquo;bluesky\u0026rdquo;, \u0026ldquo;email\u0026rdquo;, \u0026ldquo;facebook\u0026rdquo;, \u0026ldquo;line\u0026rdquo;, \u0026ldquo;linkedin\u0026rdquo;, \u0026ldquo;mastodon\u0026rdquo;, \u0026ldquo;pinterest\u0026rdquo;, \u0026ldquo;reddit\u0026rdquo;, \u0026ldquo;telegram\u0026rdquo;, \u0026ldquo;twitter\u0026rdquo;, and \u0026ldquo;whatsapp\u0026rdquo; article.showZenMode false Flag to activate Zen Mode reading feature for articles. article.externalLinkForceNewTab true Should external links in markdown open in a new tab. List # Name Default Description list.showHero false Whether the thumbnail image will be shown as a hero image within each list page. list.heroStyle Not set Style to display the hero image, valid options are: basic, big, background, thumbAndBackground. Effective only if list.showHero = true. list.showBreadcrumbs false Whether or not breadcrumbs are displayed in the header on list pages. list.layoutBackgroundBlur true Makes the background image in the background list heroStyle blur with the scroll list.layoutBackgroundHeaderSpace true Add space between the header and the body. list.showTableOfContents false Whether or not the table of contents is displayed on list pages. list.showSummary false Whether or not article summaries are displayed on list pages. If a summary is not provided in the front matter, one will be auto generated using the summaryLength parameter in the site configuration. list.showViews false Whether or not list views are displayed. This requires firebase integrations to be enabled, look below. list.showLikes false Whether or not list likes are displayed. This requires firebase integrations to be enabled, look below. list.showCards false Whether or not each article is displayed as a card or as simple inline text. list.orderByWeight false Whether or not articles are sorted by weights. list.groupByYear true Whether or not articles are grouped by year on list pages. list.cardView false Display lists as a gallery of cards. list.cardViewScreenWidth false Enhance the width of card galleries in lists to take the full width available. list.constrainItemsWidth false Limit item width to prose to increase readability. Useful when no feature images are available. list.showTableOfContents false Whether or not the table of contents is displayed on articles. Sitemap # Name Default Description sitemap.excludedKinds [\u0026quot;taxonomy\u0026quot;, \u0026quot;term\u0026quot;] Kinds of content that should be excluded from the generated /sitemap.xml file. Refer to the Hugo docs for acceptable values. Taxonomy # Name Default Description taxonomy.showTermCount true Whether or not the number of articles within a taxonomy term is displayed on the taxonomy listing. taxonomy.showHero false Whether the thumbnail image will be shown as a hero image within each taxonomy page. taxonomy.heroStyle Not set Style to display the hero image, valid options are: basic, big, background, thumbAndBackground. Effective only if taxonomy.showHero = true. taxonomy.showBreadcrumbs false Whether or not breadcrumbs are displayed in the taxonomy header. taxonomy.showViews false Whether or not article views are displayed. This requires firebase integrations to be enabled, look below. taxonomy.showLikes false Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below. taxonomy.showTableOfContents false Whether or not the table of contents is displayed on taxonomies. taxonomy.cardView false Display lists as a gallery of cards. Term # Name Default Description term.showHero false Whether the thumbnail image will be shown as a hero image within each term page. term.heroStyle Not set Style to display the hero image, valid options are: basic, big, background, thumbAndBackground. Effective only if term.showHero = true. term.showBreadcrumbs false Whether or not breadcrumbs are displayed in the term header. term.showViews false Whether or not article views are displayed. This requires firebase integrations to be enabled, look below. term.showLikes false Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below. term.showTableOfContents false Whether or not the table of contents is displayed on terms. term.groupByYear false Whether or not articles are grouped by year on term pages. term.cardView false Display lists as a gallery of cards. term.cardViewScreenWidth false Enhance the width of card galleries in lists to take the full width available. Firebase # Name Default Description firebase.apiKey Not set Firebase apiKey, required to integrate against Firebase. Check this page for a guide on how to integrate Firebase into Blowfish. firebase.authDomain Not set Firebase authDomain, required to integrate against Firebase. Check this page for a guide on how to integrate Firebase into Blowfish. firebase.projectId Not set Firebase projectId, required to integrate against Firebase. Check this page for a guide on how to integrate Firebase into Blowfish. firebase.storageBucket Not set Firebase storageBucket, required to integrate against Firebase. Check this page for a guide on how to integrate Firebase into Blowfish. firebase.messagingSenderId Not set Firebase messagingSenderId, required to integrate against Firebase. Check this page for a guide on how to integrate Firebase into Blowfish. firebase.appId Not set Firebase appId, required to integrate against Firebase. Check this page for a guide on how to integrate Firebase into Blowfish. firebase.measurementId Not set Firebase measurementId, required to integrate against Firebase. Check this page for a guide on how to integrate Firebase into Blowfish. Fathom Analytics # Name Default Description fathomAnalytics.site Not set The site code generated by Fathom Analytics for the website. Refer to the Analytics docs for more details. fathomAnalytics.domain Not set If using a custom domain with Fathom Analytics, provide it here to serve script.js from the custom domain. Umami Analytics # Name Default Description umamiAnalytics.websiteid Not set The site code generated by Umami Analytics for the website. Refer to the Analytics docs for more details. umamiAnalytics.domain Not set If using a custom domain with Umami Analytics, provide it here to serve script.js from the custom domain. umamiAnalytics.dataDomains Not set If you want the tracker to only run on specific domains, provide it for your tracker script. This is a comma delimited list of domain names. Such as \u0026ldquo;yoursite.com,yoursite2.com\u0026rdquo;. umamiAnalytics.scriptName script.js The name of the script.js used for anti-ad-blocking is configured by the environment variable TRACKER_SCRIPT_NAME umamiAnalytics.enableTrackEvent true When set to true track event will add automatically. If you do not want to add track event, set it to false. Seline Analytics # Name Default Description selineAnalytics.token Not set The token generated by Seline Analytics for the website. Refer to the Analytics docs for more details. selineAnalytics.enableTrackEvent true When set to true track event will add automatically. If you do not want to add track event, set it to false. BuyMeACoffee # Name Default Description buymeacoffee.identifier Not set The identifier to the target buymeacoffee account. buymeacoffee.globalWidget Not set Activate the global buymeacoffee widget. buymeacoffee.globalWidgetMessage Not set Message what will be displayed the first time a new user lands on the site. buymeacoffee.globalWidgetColor #FFDD00 Widget color in hex format. buymeacoffee.globalWidgetPosition Not set Position of the widget, i.e. \u0026ldquo;left\u0026rdquo; or \u0026ldquo;right\u0026rdquo; Verifications # Name Default Description verification.google Not set The site verification string provided by Google to be included in the site metadata. verification.bing Not set The site verification string provided by Bing to be included in the site metadata. verification.pinterest Not set The site verification string provided by Pinterest to be included in the site metadata. verification.yandex Not set The site verification string provided by Yandex to be included in the site metadata. verification.fediverse Not set The fediverse handle to include in the site metadata. Include the server domain in the username, e.g. @you@instanceaddress.tld. RSSNext # Name Default Description rssnext.feedId Not set The rss feedId string provided by RSSNext/Follow to be included in the rss.xml, which can helps to claim rss feed as your own. rssnext.userId Not set The rss userId string provided by RSSNext/Follow to be included in the rss.xml, which can helps to claim rss feed as your own. Advertisement # Name Default Description advertisement.adsense Not set Your Google AdSense Publisher ID (e.g. ca-pub-1234567890abcdef). Set this parameter to enable AdSense ads on your site. Other configuration files # The theme also includes a markup.toml configuration file. This file contains some important parameters that ensure that Hugo is correctly configured to generate sites built with Blowfish.\nAlways ensure this file is present in the config directory and that the required values are set. Failure to do so may cause certain features to function incorrectly and could result in unintended behaviour.\n","externalUrl":null,"permalink":"/docs/configuration/","section":"Documentation","summary":"Blowfish is a highly customisable theme and uses some of the latest Hugo features to simplify how it is configured.\nThe theme ships with a default configuration that gets you up and running with a basic blog or static website.\n","title":"Configuration","type":"docs"},{"content":"Blowfish provides a fully flexible homepage layout. There are two main templates to choose from with additional settings to adjust the design. Alternatively, you can also provide your own template and have complete control over the homepage content.\nThe layout of the homepage is controlled by the homepage.layout setting in the params.toml configuration file. Additionally, all layouts have the option to include a listing of recent articles.\nProfile layout # The default layout is the profile layout, which is great for personal websites and blogs. It puts the author\u0026rsquo;s details front and centre by providing an image and links to social profiles.\nThe author information is provided in the languages configuration file. Refer to the Getting Started and Language Configuration sections for parameter details.\nAdditionally, any Markdown content that is provided in the homepage content will be placed below the author profile. This allows extra flexibility for displaying a bio or other custom content using shortcodes.\nTo enable the Profile layout, set homepage.layout = \u0026quot;profile\u0026quot; in the params.toml configuration file.\nPage layout # The page layout is simply a normal content page that displays your Markdown content. It\u0026rsquo;s great for static websites and provides a lot of flexibility.\nTo enable the Page layout, set homepage.layout = \u0026quot;page\u0026quot; in the params.toml configuration file.\nHero layout # The hero layout brings together ideas from the profile and card layouts. This one not only displays information on the author of the site but it also loads your markdown beneath it.\nTo enable the Hero layout, set homepage.layout = \u0026quot;hero\u0026quot; and homepage.homepageImage in the params.toml configuration file.\nBackground layout # The background layout is a more smooth version of the hero layout. As in the Hero layout, this one also displays both information on the author of the site and loads your markdown beneath it.\nTo enable the Background layout, set homepage.layout = \u0026quot;background\u0026quot; and homepage.homepageImage in the params.toml configuration file.\nCard layout # The card layout is an extension of the page layout. It provides the same level of flexibility by also displaying your markdown content and adds a card image to display visual content.\nTo enable the Card layout, set homepage.layout = \u0026quot;card\u0026quot; and homepage.homepageImage in the params.toml configuration file.\nCustom layout # If the built-in homepage layouts aren\u0026rsquo;t sufficient for your needs, you have the option to provide your own custom layout. This allows you to have total control over the page content and essentially gives you a blank slate to work with.\nTo enable the Custom layout, set homepage.layout = \u0026quot;custom\u0026quot; in the params.toml configuration file.\nWith the configuration value set, create a new custom.html file and place it in layouts/partials/home/custom.html. Now whatever is in the custom.html file will be placed in the content area of the site homepage. You may use whatever HTML, Tailwind, or Hugo templating functions you wish to define your layout.\nTo include recent articles on the custom layout, use the recent-articles/main.html partial.\nAs an example, the homepage on this site uses the custom layout to allow toggling between the profile and page layouts. Visit the GitHub repo to see how it works.\nRecent articles # All homepage layouts have the option of displaying recent articles below the main page content. To enable this, simply set the homepage.showRecent setting to true in the params.toml configuration file.\nThe articles listed in this section are derived from the mainSections setting which allows for whatever content types you are using on your website. For instance, if you had content sections for posts and projects you could set this setting to [\u0026quot;posts\u0026quot;, \u0026quot;projects\u0026quot;] and all the articles in these two sections would be used to populate the recent list. The theme expects this setting to be an array so if you only use one section for all your content, you should set this accordingly: [\u0026quot;blog\u0026quot;].\nThumbnails # Blowfish was built so it would be easy to add visual support to your articles. If you\u0026rsquo;re familiar with Hugo article structure, you just need to place an image file (almost all formats are supported bue we recommend .png or .jpg) that starts with feature* inside your article folder. And that\u0026rsquo;s it, Blowfish will then able to both use the image as a thumbnail within your website as well as for oEmbed cards across social platforms.\nHere is a guide with more info and a sample if you want to see an example.\nCard Gallery # Blowfish also supports displaying the standard lists of articles as card galleries. You can config this both for the recent section in the homepage and for lists of articles across your website. For homepage you can use homepage.cardView and homepage.cardViewScreenWidth; and for lists use list.cardView and list.cardViewScreenWidth. Check the Configuration docs for more details, and the homepage for a live demo.\n","externalUrl":null,"permalink":"/docs/homepage-layout/","section":"Documentation","summary":"Blowfish provides a fully flexible homepage layout. There are two main templates to choose from with additional settings to adjust the design. Alternatively, you can also provide your own template and have complete control over the homepage content.\n","title":"Homepage Layout","type":"docs"},{"content":"In addition to all the default Hugo shortcodes, Blowfish adds a few extras for additional functionality.\nAlert # alert outputs its contents as a stylised message box within your article. It\u0026rsquo;s useful for drawing attention to important information that you don\u0026rsquo;t want the reader to miss.\nParameter Description icon Optional. the icon to display on the left side.\nDefault: triangle-exclamation (Check out the icon shortcode for more details on using icons.) iconColor Optional. the color for the icon in basic CSS style.\nCan be either hex values (#FFFFFF) or color names (white)\nBy default chosen based on the current color theme . cardColor Optional. the color for the card background in basic CSS style.\nCan be either hex values (#FFFFFF) or color names (white)\nBy default chosen based on the current color theme . textColor Optional. the color for the text in basic CSS style.\nCan be either hex values (#FFFFFF) or color names (white)\nBy default chosen based on the current color theme . The input is written in Markdown so you can format it however you please.\nExample 1: No params\n{{\u0026lt; alert \u0026gt;}} **Warning!** This action is destructive! {{\u0026lt; /alert \u0026gt;}} Warning! This action is destructive! Example 2: Unnamed param\n{{\u0026lt; alert \u0026#34;twitter\u0026#34; \u0026gt;}} Don\u0026#39;t forget to [follow me](https://twitter.com/nunocoracao) on Twitter. {{\u0026lt; /alert \u0026gt;}} Don\u0026rsquo;t forget to follow me on Twitter. Example 3: Named params\n{{\u0026lt; alert icon=\u0026#34;fire\u0026#34; cardColor=\u0026#34;#e63946\u0026#34; iconColor=\u0026#34;#1d3557\u0026#34; textColor=\u0026#34;#f1faee\u0026#34; \u0026gt;}} This is an error! {{\u0026lt; /alert \u0026gt;}} This is an error! Admonition # Admonitions allow you to insert eye-catching callout boxes in your content.\nAdmonitions serve a similar purpose as the alert shortcode but are implemented via Hugo render hooks. The key difference is syntax: admonitions use Markdown syntax, making them more portable across different platforms, whereas shortcodes are specific to Hugo. The syntax resembles GitHub alerts:\n\u0026gt; [!TIP] \u0026gt; A Tip type admonition. \u0026gt; [!TIP]+ Custom Title + Custom Icon \u0026gt; A collapsible admonition with custom title. {icon=\u0026#34;twitter\u0026#34;} Tip A Tip type admonition.\nCustom Title + Custom Icon A collapsible admonition with custom title.\nThe alert sign (+ or -) is optional to control whether the admonition is folded or not. Note that alert sign is only compatible in Obsidian.\nSupported types Valid admonition types include GitHub alert types and Obsidian callout types. The types are case-insensitive.\nGitHub types: NOTE, TIP, IMPORTANT, WARNING, CAUTION\nObsidian types: note, abstract, info, todo, tip, success, question, warning, failure, danger, bug, example, quote\nCustomize admonition See the admonition customization guide.\nAccordion # accordion creates a collapsible set of panels. Use the accordionItem sub-shortcode to define each item. You can control whether multiple items can be open at the same time using the mode parameter.\nParameter Description mode Optional. collapse (single open) or open (multiple open). Defaults to collapse. separated Optional. true to show each item as a separate card. Defaults to false (joined list). accordionItem parameters:\nParameter Description title Required. Title shown in the item header. open Optional. Set to true to have the item open by default. header Optional. Alias for title, kept for compatibility with other shortcodes. icon Optional. Icon name to display before the title. align Optional. Align text within the item: left, center, right Example 1: mode=\u0026quot;open\u0026quot; (multiple items can be open) + separated=true\n{{\u0026lt; accordion mode=\u0026#34;open\u0026#34; separated=true \u0026gt;}} {{\u0026lt; accordionItem title=\u0026#34;Markdown example\u0026#34; icon=\u0026#34;code\u0026#34; open=true \u0026gt;}} This item demonstrates Markdown rendering: - **Bold text** - Lists - `inline code` {{\u0026lt; /accordionItem \u0026gt;}} {{\u0026lt; accordionItem title=\u0026#34;Shortcode example\u0026#34; md=false \u0026gt;}} This item demonstrates shortcode rendering with \u0026lt;code\u0026gt;md=false\u0026lt;/code\u0026gt;: {{\u0026lt; alert \u0026gt;}}This is an inline alert.{{\u0026lt; /alert \u0026gt;}} {{\u0026lt; /accordionItem \u0026gt;}} {{\u0026lt; /accordion \u0026gt;}} Markdown example This item demonstrates Markdown rendering:\nBold text Lists inline code Shortcode example This item demonstrates shortcode rendering with md=false: This is an inline alert. Example 2: mode=\u0026quot;collapse\u0026quot; (only one item open at a time)\n{{\u0026lt; accordion mode=\u0026#34;collapse\u0026#34; \u0026gt;}} {{\u0026lt; accordionItem title=\u0026#34;First item\u0026#34; open=true \u0026gt;}} This item uses Markdown with a short list: 1. One 2. Two 3. Three {{\u0026lt; /accordionItem \u0026gt;}} {{\u0026lt; accordionItem title=\u0026#34;Second item\u0026#34; md=false \u0026gt;}} This item includes another shortcode: {{\u0026lt; badge \u0026gt;}}Tip{{\u0026lt; /badge \u0026gt;}} {{\u0026lt; /accordionItem \u0026gt;}} {{\u0026lt; /accordion \u0026gt;}} First item This item uses Markdown with a short list:\nOne Two Three Second item This item includes another shortcode: Tip Article # Article will embed a single article into a markdown file. The link to the file should be the .RelPermalink of the file to be embedded. Note that the shortcode will not display anything if it\u0026rsquo;s referencing it\u0026rsquo;s parent. Note: if you are running your website in a subfolder like Blowfish (i.e. /blowfish/) please include that path in the link.\nParameter Description link Required. the .RelPermalink to the target article. showSummary Optional. A boolean value indicating whether to show the article summary. If not set, the site\u0026rsquo;s default configuration will be used. compactSummary Optional. A boolean value indicating whether to display the summary in compact mode. Default to false. Example:\n{{\u0026lt; article link=\u0026#34;/docs/welcome/\u0026#34; showSummary=true compactSummary=true \u0026gt;}} Welcome to Blowfish 3 mins\u0026middot; loading New Docs Blowfish is packed with tons of features. The original aim of Blowfish was to develop a theme that was simple and lightweight. The theme is a fork of Congo and expands its initial vision. Badge # badge outputs a styled badge component which is useful for displaying metadata.\nExample:\n{{\u0026lt; badge \u0026gt;}} New article! {{\u0026lt; /badge \u0026gt;}} New article! Button # button outputs a styled button component which can be used to highlight a primary action. It has three optional variables href, target and rel which can be used to specify the URL, target and relation of the link.\nExample:\n{{\u0026lt; button href=\u0026#34;#button\u0026#34; target=\u0026#34;_self\u0026#34; \u0026gt;}} Call to action {{\u0026lt; /button \u0026gt;}} Call to action Carousel # carousel is used to showcase multiple images in an interactive and visually appealing way. This allows a user to slide through multiple images while only taking up the vertical space of a single one. All images are displayed using the full width of the parent component and the aspect ratio you set with a default of 16:9.\nParameter Description images Required. A regex string to match image names or URLs. captions Optional. A list of key:caption pairs. Keys can be image filenames (for local images) or full URLs (for remote images). Captions support Markdown. aspectRatio Optional. The aspect ratio for the carousel. It is set to 16-9 by default. interval Optional. The interval for the auto-scrooling, specified in milliseconds. Defaults to 2000 (2s) Captions are matched by key. For local images, use the filename (e.g. 01.jpg). For remote images, use the full URL.\nExample 1: 16:9 aspect ratio and verbose list of images\n{{\u0026lt; carousel images=\u0026#34;{https://cdn.pixabay.com/photo/2016/12/11/12/02/mountains-1899264_960_720.jpg,gallery/03.jpg,gallery/01.jpg,gallery/02.jpg,gallery/04.jpg}\u0026#34; \u0026gt;}} Previous Next Example 2: 21:9 aspect ratio and regex-ed list of images\n{{\u0026lt; carousel images=\u0026#34;gallery/*\u0026#34; aspectRatio=\u0026#34;21-9\u0026#34; interval=\u0026#34;2500\u0026#34; \u0026gt;}} Previous Next Example 3: Add captions\n{{\u0026lt; carousel images=\u0026#34;gallery/*\u0026#34; captions=\u0026#34;{01.jpg:First image with *formatting*,02.jpg:Second image with a [link](https://example.com)}\u0026#34; \u0026gt;}} First image with formatting Second image with a link Previous Next Chart # chart uses the Chart.js library to embed charts into articles using simple structured data. It supports a number of different chart styles and everything can be configured from within the shortcode. Simply provide the chart parameters between the shortcode tags and Chart.js will do the rest.\nRefer to the official Chart.js docs for details on syntax and supported chart types.\nExample:\n{{\u0026lt; chart \u0026gt;}} type: \u0026#39;bar\u0026#39;, data: { labels: [\u0026#39;Tomato\u0026#39;, \u0026#39;Blueberry\u0026#39;, \u0026#39;Banana\u0026#39;, \u0026#39;Lime\u0026#39;, \u0026#39;Orange\u0026#39;], datasets: [{ label: \u0026#39;# of votes\u0026#39;, data: [12, 19, 3, 5, 3], }] } {{\u0026lt; /chart \u0026gt;}} You can see some additional Chart.js examples on the charts samples page.\nCode Importer # This shortcode is for importing code from external sources easily without copying and pasting.\nParameter Description url Required URL to an externally hosted code file. type Code type used for syntax highlighting. startLine Optional The line number to start the import from. endLine Optional The line number to end the import at. Example:\n{{\u0026lt; codeimporter url=\u0026#34;https://raw.githubusercontent.com/nunocoracao/blowfish/main/layouts/shortcodes/mdimporter.html\u0026#34; type=\u0026#34;go\u0026#34; \u0026gt;}} {{ $url := .Get \u0026#34;url\u0026#34; }} {{ with resources.GetRemote (urls.Parse $url) }} {{ .Content | markdownify }} {{ else }} {{ warnf \u0026#34;mdimporter shortcode: unable to fetch %q: %s\u0026#34; $url .Position }} {{ end }} {{\u0026lt; codeimporter url=\u0026#34;https://raw.githubusercontent.com/nunocoracao/blowfish/main/config/_default/hugo.toml\u0026#34; type=\u0026#34;toml\u0026#34; startLine=\u0026#34;11\u0026#34; endLine=\u0026#34;18\u0026#34; \u0026gt;}} enableRobotsTXT = true summaryLength = 0 buildDrafts = false buildFuture = false enableEmoji = true Codeberg Card # codeberg allows you to quickly link a Codeberg repository via the Codeberg API, providing real-time updates on stats such as stars and forks.\nParameter Description repo [String] codeberg repo in the format of username/repo Example 1:\n{{\u0026lt; codeberg repo=\u0026#34;forgejo/forgejo\u0026#34; \u0026gt;}} \u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e forgejo/forgejo Beyond coding. We forge. Go 4594 789 Figure # Blowfish includes a figure shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits.\nWhen a provided image is a page resource, it will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions. If a static asset or URL to an external image is provided, it will be included as-is without any image processing by Hugo.\nThe figure shortcode accepts six parameters:\nParameter Description src Required. The local path/filename or URL of the image. When providing a path and filename, the theme will attempt to locate the image using the following lookup order: Firstly, as a page resource bundled with the page; then an asset in the assets/ directory; then finally, a static image in the static/ directory. alt Alternative text description for the image. caption Markdown for the image caption, which will be displayed below the image. class Additional CSS classes to apply to the image. figureClass Additional CSS classes to apply to the \u0026lt;figure\u0026gt; wrapper. Useful for galleries. href URL that the image should be linked to. target The target attribute for the href URL. nozoom nozoom=true disables the image \u0026ldquo;zoom\u0026rdquo; functionality. This is most useful in combination with a href link. default Special parameter to revert to default Hugo figure behaviour. Simply provide default=true and then use normal Hugo shortcode syntax. Blowfish also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:\n![Alt text](image.jpg \u0026#34;Image caption\u0026#34;) Example:\n{{\u0026lt; figure src=\u0026#34;abstract.jpg\u0026#34; alt=\u0026#34;Abstract purple artwork\u0026#34; caption=\u0026#34;Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)\u0026#34; \u0026gt;}} \u0026lt;!-- OR --\u0026gt; ![Abstract purple artwork](abstract.jpg \u0026#34;Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)\u0026#34;) Photo by Jr Korpa on Unsplash Forgejo Card # forgejo allows you to quickly link a Forgejo repository via the forgejo API, providing real-time updates on stats such as stars and forks.\nParameter Description repo [String] forgejo repo in the format of username/repo server [String] server URL like https://v11.next.forgejo.org Example 1:\n{{\u0026lt; forgejo server=\u0026#34;https://v11.next.forgejo.org\u0026#34; repo=\u0026#34;a/mastodon\u0026#34; \u0026gt;}} a/mastodon Your self-hosted, globally interconnected microblogging community Ruby 0 0 Gallery # gallery allows you to showcase multiple images at once, in a responsive manner with more varied and interesting layouts.\nIn order to add images to the gallery, use img tags for each image and add class=\u0026quot;grid-wXX\u0026quot; in order for the gallery to be able to identify the column width for each image. The widths available by default start at 10% and go all the way to 100% in 5% increments. For example, to set the width to 65%, set the class to grid-w65. Additionally, widths for 33% and 66% are also available in order to build galleries with 3 cols. You can also leverage tailwind\u0026rsquo;s responsive indicators to have a reponsive grid.\nIf you need captions, you can use the figure shortcode inside the gallery. When doing so, set the grid width on the figure using figureClass, and use caption for the text.\nExample 1: normal gallery\n{{\u0026lt; gallery \u0026gt;}} \u0026lt;img src=\u0026#34;gallery/01.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/02.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/03.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/04.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/05.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/06.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/07.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; {{\u0026lt; /gallery \u0026gt;}} Example 2: responsive gallery\n{{\u0026lt; gallery \u0026gt;}} \u0026lt;img src=\u0026#34;gallery/01.jpg\u0026#34; class=\u0026#34;grid-w50 md:grid-w33 xl:grid-w25\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/02.jpg\u0026#34; class=\u0026#34;grid-w50 md:grid-w33 xl:grid-w25\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/03.jpg\u0026#34; class=\u0026#34;grid-w50 md:grid-w33 xl:grid-w25\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/04.jpg\u0026#34; class=\u0026#34;grid-w50 md:grid-w33 xl:grid-w25\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/05.jpg\u0026#34; class=\u0026#34;grid-w50 md:grid-w33 xl:grid-w25\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/06.jpg\u0026#34; class=\u0026#34;grid-w50 md:grid-w33 xl:grid-w25\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/07.jpg\u0026#34; class=\u0026#34;grid-w50 md:grid-w33 xl:grid-w25\u0026#34; /\u0026gt; {{\u0026lt; /gallery \u0026gt;}} Example 3: gallery with captions (using figure)\n{{\u0026lt; gallery \u0026gt;}} {{\u0026lt; figure src=\u0026#34;gallery/01.jpg\u0026#34; alt=\u0026#34;Gallery image 1\u0026#34; caption=\u0026#34;First caption\u0026#34; figureClass=\u0026#34;grid-w33\u0026#34; \u0026gt;}} {{\u0026lt; figure src=\u0026#34;gallery/02.jpg\u0026#34; alt=\u0026#34;Gallery image 2\u0026#34; caption=\u0026#34;Second caption\u0026#34; figureClass=\u0026#34;grid-w33\u0026#34; \u0026gt;}} {{\u0026lt; figure src=\u0026#34;gallery/03.jpg\u0026#34; alt=\u0026#34;Gallery image 3\u0026#34; caption=\u0026#34;Third caption\u0026#34; figureClass=\u0026#34;grid-w33\u0026#34; \u0026gt;}} {{\u0026lt; /gallery \u0026gt;}} First caption Second caption Third caption Gist # gist shortcode allows you to embed a GitHub Gist directly into your content by specifying the Gist user, ID, and optionally a specific file.\nParameter Description [0] [String] GitHub username [1] [String] Gist ID [2] (optional) [String] Filename within the Gist to embed (optional) Example 1: Embed entire Gist\n{{\u0026lt; gist \u0026#34;octocat\u0026#34; \u0026#34;6cad326836d38bd3a7ae\u0026#34; \u0026gt;}} Example 2: Embed specific file from Gist\n{{\u0026lt; gist \u0026#34;rauchg\u0026#34; \u0026#34;2052694\u0026#34; \u0026#34;README.md\u0026#34; \u0026gt;}} Gitea Card # gitea allows you to quickly link a Gitea repository via the gitea API, providing real-time updates on stats such as stars and forks.\nParameter Description repo [String] gitea repo in the format of username/repo server [String] server URL like https://git.fsfe.org Example 1:\n{{\u0026lt; gitea server=\u0026#34;https://git.fsfe.org\u0026#34; repo=\u0026#34;FSFE/fsfe-website\u0026#34; \u0026gt;}} GitHub Card # github allows you to quickly link a github repository, all while showing and updating in realtime stats about it, such as the number of stars and forks it has.\nParameter Description repo [String] github repo in the format of username/repo showThumbnail Optional [boolean] display a thumbnail for the repository Example 1:\n{{\u0026lt; github repo=\u0026#34;nunocoracao/blowfish\u0026#34; showThumbnail=true \u0026gt;}} nunocoracao/blowfish Personal Website \u0026amp; Blog Theme for Hugo HTML 2762 717 GitLab Card # gitlab allows you to quickly link a GitLab Project (GitLab\u0026rsquo;s jargon for repo). It displays realtime stats about it, such as the number of stars and forks it has. Unlike github it can\u0026rsquo;t display the main programming language of a project. Finally, custom GitLab instance URL can be provided, as long as the api/v4/projects/ endpoint is available, making this shortcode compatible with most self-hosted / enterprise deployments.\nParameter Description projectID [String] gitlab numeric ProjectID baseURL [String] optional gitlab instance URL, default is https://gitlab.com/ Example 1:\n{{\u0026lt; gitlab projectID=\u0026#34;278964\u0026#34; \u0026gt;}} GitLab.org / GitLab GitLab is an open source end-to-end software development platform with built-in version control, issue tracking, code review, CI/CD, and more. Self-host GitLab on your own servers, in a container, or on a cloud provider. 6027 12104 Hugging Face Card # huggingface allows you to quickly link a Hugging Face model or dataset, displaying real-time information such as the number of likes and downloads, along with type and description.\nParameter Description model [String] Hugging Face model in the format of username/model dataset [String] Hugging Face dataset in the format of username/dataset Note: Use either model or dataset parameter, not both.\nExample 1 (Model):\n{{\u0026lt; huggingface model=\u0026#34;google-bert/bert-base-uncased\u0026#34; \u0026gt;}} google-bert/bert-base-uncased fill-mask 2652 6.4748512e\u0026#43;07 Example 2 (Dataset):\n{{\u0026lt; huggingface dataset=\u0026#34;stanfordnlp/imdb\u0026#34; \u0026gt;}} stanfordnlp/imdb Large Movie Review Dataset. This is a dataset for binary sentiment classification containing substantially more data than previous benchmark datasets. We provide a set of 25,000 highly polar movie reviews for training, and 25,000 for testing. There is additional unlabeled data for use as well. Supported Tasks and Leaderboards More Information Needed Languages More Information Needed Dataset Structure… See the full description on the dataset page: https://huggingface.co/datasets/stanfordnlp/imdb. dataset 370 179838 Icon # icon outputs an SVG icon and takes the icon name as its only parameter. The icon is scaled to match the current text size.\nExample:\n{{\u0026lt; icon \u0026#34;github\u0026#34; \u0026gt;}} Output: Icons are populated using Hugo pipelines which makes them very flexible. Blowfish includes a number of built-in icons for social, links and other purposes. Check the icon samples page for a full list of supported icons.\nCustom icons can be added by providing your own icon assets in the assets/icons/ directory of your project. The icon can then be referenced in the shortcode by using the SVG filename without the .svg extension.\nIcons can also be used in partials by calling the icon partial.\nKaTeX # The katex shortcode can be used to add mathematical expressions to article content using the KaTeX package. Refer to the online reference of supported TeX functions for the available syntax.\nTo include mathematical expressions in an article, simply place the shortcode anywhere with the content. It only needs to be included once per article and KaTeX will automatically render any markup on that page. Both inline and block notation are supported.\nInline notation can be generated by wrapping the expression in \\( and \\) delimiters. Alternatively, block notation can be generated using $$ delimiters.\nExample:\n{{\u0026lt; katex \u0026gt;}} \\(f(a,b,c) = (a^2+b^2+c^2)^3\\) \\(f(a,b,c) = (a^2+b^2+c^2)^3\\)\nCheck out the mathematical notation samples page for more examples.\nKeyword # The keyword component can be used to visually highlight certain important words or phrases, e.g. professional skills etc. The keywordList shortcode can be used to group together multiple keyword items. Each item can have the following properties.\nParameter Description icon Optional icon to be used in the keyword The input is written in Markdown so you can format it however you please.\nExample1 :\n{{\u0026lt; keyword \u0026gt;}} *Super* skill {{\u0026lt; /keyword \u0026gt;}} Super skill Example2 :\n{{\u0026lt; keywordList \u0026gt;}} {{\u0026lt; keyword icon=\u0026#34;github\u0026#34; \u0026gt;}} Lorem ipsum dolor. {{\u0026lt; /keyword \u0026gt;}} {{\u0026lt; keyword icon=\u0026#34;code\u0026#34; \u0026gt;}} **Important** skill {{\u0026lt; /keyword \u0026gt;}} {{\u0026lt; /keywordList \u0026gt;}} {{\u0026lt; keyword \u0026gt;}} *Standalone* skill {{\u0026lt; /keyword \u0026gt;}} Lorem ipsum dolor Important skill Standalone skill Lead # lead is used to bring emphasis to the start of an article. It can be used to style an introduction, or to call out an important piece of information. Simply wrap any Markdown content in the lead shortcode.\nExample:\n{{\u0026lt; lead \u0026gt;}} When life gives you lemons, make lemonade. {{\u0026lt; /lead \u0026gt;}} When life gives you lemons, make lemonade. List # List will display a list of recent articles. This shortcode requires a limit value to constraint the list. Additionally, it supports a where and a value in order to filter articles by their parameters. Note that this shortcode will not display its parent page but it will count for the limit value.\nParameter Description limit Required. the number of recent articles to display. title Optional title for the list, default is Recent cardView Optional card view enabled for the list, default is false where The variable to be used for the query of articles e.g. Type value The value that will need to match the parameter defined in where for the query of articles e.g. for where == Type a valid value could be sample The where and value values are used in the following query where .Site.RegularPages $where $value in the code of the shortcode. Check Hugo docs to learn more about which parameters are available to use. Example #1:\n{{\u0026lt; list limit=2 \u0026gt;}} Recent Welcome to Blowfish 3 mins\u0026middot; loading New Docs Installation 6 mins\u0026middot; loading Installation Docs Example #2:\n{{\u0026lt; list title=\u0026#34;Samples\u0026#34; cardView=true limit=6 where=\u0026#34;Type\u0026#34; value=\u0026#34;sample\u0026#34; \u0026gt;}} Samples Multiple Authors 1 min\u0026middot; loading Nuno Coração ,\u0026nbsp; Dummy Second Author Authors Sample Thumbnails 1 min\u0026middot; loading Thumbnail Sample Icons 2 mins\u0026middot; loading Icons Sample Shortcodes Markdown 3 mins\u0026middot; loading Markdown Css Html Sample Rich Content 1 min\u0026middot; loading Shortcodes Privacy Sample Gist Twitter Youtube Vimeo Placeholder Text Updated: 24 January 2022\u0026middot;2 mins\u0026middot; loading Markdown Text Sample Latin LTR/RTL # ltr and rtl allows you to mix your contents. Many RTL language users want to include parts of the content in LTR. Using this shortcode will let you do so, and by leveraging % as the outer-most dilemeter in the shortcode Hugo shortcodes, any markdown inside will be rendered normally.\nExample:\n- This is an markdown list. - Its per default a LTR direction {{% rtl %}} - هذه القائمة باللغة العربية - من اليمين الى اليسار {{% /rtl %}} This is an markdown list. Its per default a LTR direction هذه القائمة باللغة العربية من اليمين الى اليسار Markdown Importer # This shortcode allows you to import markdown files from external sources. This is useful for including content from other repositories or websites without having to copy and paste the content.\nParameter Description url Required URL to an externally hosted markdown file. Example:\n{{\u0026lt; mdimporter url=\u0026#34;https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md\u0026#34; \u0026gt;}} Hi there 👋 # 🧠 Principal PM @ Docker (AI, agents, infra) · Creator of Watchfire and Blowfish · Ex-founder · Mentor \u0026amp; advisor\n🕯️ Creator and maintainer of Afterlight @ afterlight.club\n🔥 Creator and maintainer of Watchfire @ watchfire.io - repo\n🐡 Creator and maintainer of Blowfish @ blowfish.page - repo\n🐳 Principal Product Manager @ Docker - working on cagent\n📚 mentoring @ mentorcruise\n🚀 Personal blog - n9o.xyz\nMermaid # mermaid allows you to draw detailed diagrams and visualisations using text. It uses Mermaid under the hood and supports a wide variety of diagrams, charts and other output formats.\nSimply write your Mermaid syntax within the mermaid shortcode and let the plugin do the rest.\nRefer to the official Mermaid docs for details on syntax and supported diagram types.\nExample:\n{{\u0026lt; mermaid \u0026gt;}} graph LR; A[Lemons]--\u0026gt;B[Lemonade]; B--\u0026gt;C[Profit] {{\u0026lt; /mermaid \u0026gt;}} graph LR; A[Lemons]--\u003eB[Lemonade]; B--\u003eC[Profit] You can see some additional Mermaid examples on the diagrams and flowcharts samples page.\nSwatches # swatches outputs a set of up to three different colors to showcase color elements like a color palette. This shortcode takes the HEX codes of each color and creates the visual elements for each.\nExample\n{{\u0026lt; swatches \u0026#34;#64748b\u0026#34; \u0026#34;#3b82f6\u0026#34; \u0026#34;#06b6d4\u0026#34; \u0026gt;}} Output Tabs # The tabs shortcode is commonly used to present different variants of a particular step. For example, it can be used to show how to install VS Code on different platforms.\nParameter Description group Optional. Group name for synchronized tab switching. All tabs with the same group name will switch together. default Optional. Label of the tab to be active by default. If not set, the first tab will be active. label Required. The text label displayed on the tab button. icon Optional. Icon name to display before the label. md Optional. Render tab content as Markdown (default true). Set md=false to allow nested shortcodes inside tab content. Example 1: Basic Usage\n{{\u0026lt; tabs \u0026gt;}} {{\u0026lt; tab label=\u0026#34;Windows\u0026#34; \u0026gt;}} Install using Chocolatey: ```pwsh choco install vscode.install ``` or install using WinGet ```pwsh winget install -e --id Microsoft.VisualStudioCode ``` {{\u0026lt; /tab \u0026gt;}} {{\u0026lt; tab label=\u0026#34;macOS\u0026#34; \u0026gt;}} ```bash brew install --cask visual-studio-code ``` {{\u0026lt; /tab \u0026gt;}} {{\u0026lt; tab label=\u0026#34;Linux\u0026#34; md=false \u0026gt;}} {{\u0026lt; alert \u0026gt;}}See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).{{\u0026lt; /alert \u0026gt;}} {{\u0026lt; /tab \u0026gt;}} {{\u0026lt; /tabs \u0026gt;}} Output\nWindows macOS Linux Install using Chocolatey:\nchoco install vscode.install or install using WinGet\nwinget install -e --id Microsoft.VisualStudioCode brew install --cask visual-studio-code See documentation. Example 2: With Group, Default, and Icon\n{{\u0026lt; tabs group=\u0026#34;lang\u0026#34; default=\u0026#34;Python\u0026#34; \u0026gt;}} {{\u0026lt; tab label=\u0026#34;JavaScript\u0026#34; icon=\u0026#34;code\u0026#34; \u0026gt;}} ```javascript console.log(\u0026#34;Hello\u0026#34;); ``` {{\u0026lt; /tab \u0026gt;}} {{\u0026lt; tab label=\u0026#34;Python\u0026#34; icon=\u0026#34;sun\u0026#34; \u0026gt;}} ```python print(\u0026#34;Hello\u0026#34;) ``` {{\u0026lt; /tab \u0026gt;}} {{\u0026lt; tab label=\u0026#34;Go\u0026#34; icon=\u0026#34;moon\u0026#34; \u0026gt;}} ```go fmt.Println(\u0026#34;Hello\u0026#34;) ``` {{\u0026lt; /tab \u0026gt;}} {{\u0026lt; /tabs \u0026gt;}} {{\u0026lt; tabs group=\u0026#34;lang\u0026#34; default=\u0026#34;Python\u0026#34; \u0026gt;}} {{\u0026lt; tab label=\u0026#34;JavaScript\u0026#34; icon=\u0026#34;code\u0026#34; \u0026gt;}} ```javascript const add = (a, b) =\u0026gt; a + b; ``` {{\u0026lt; /tab \u0026gt;}} {{\u0026lt; tab label=\u0026#34;Python\u0026#34; icon=\u0026#34;sun\u0026#34; \u0026gt;}} ```python def add(a, b): return a + b ``` {{\u0026lt; /tab \u0026gt;}} {{\u0026lt; tab label=\u0026#34;Go\u0026#34; icon=\u0026#34;moon\u0026#34; \u0026gt;}} ```go func add(a, b int) int { return a + b } ``` {{\u0026lt; /tab \u0026gt;}} {{\u0026lt; /tabs \u0026gt;}} Output\nJavaScript Python Go console.log(\u0026#34;Hello\u0026#34;); print(\u0026#34;Hello\u0026#34;) fmt.Println(\u0026#34;Hello\u0026#34;) JavaScript Python Go const add = (a, b) =\u0026gt; a + b; def add(a, b): return a + b func add(a, b int) int { return a + b } In this example, both tab groups share the same group=\u0026quot;lang\u0026quot; parameter, so clicking any tab will synchronize both groups. The default=\u0026quot;Python\u0026quot; parameter makes Python the initially active tab, and icon=\u0026quot;code\u0026quot; adds an icon before each label.\nTimeline # The timeline creates a visual timeline that can be used in different use-cases, e.g. professional experience, a project\u0026rsquo;s achievements, etc. The timeline shortcode relies on the timelineItem sub-shortcode to define each item within the main timeline. Each item can have the following properties.\nParameter Description md render the content as Markdown (true/false) icon the icon to be used in the timeline visuals header header for each entry badge text to place within the top right badge subheader entry\u0026rsquo;s subheader Example:\n{{\u0026lt; timeline \u0026gt;}} {{\u0026lt; timelineItem icon=\u0026#34;github\u0026#34; header=\u0026#34;header\u0026#34; badge=\u0026#34;badge test\u0026#34; subheader=\u0026#34;subheader\u0026#34; \u0026gt;}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. {{\u0026lt; /timelineItem \u0026gt;}} {{\u0026lt; timelineItem icon=\u0026#34;code\u0026#34; header=\u0026#34;Another Awesome Header\u0026#34; badge=\u0026#34;date - present\u0026#34; subheader=\u0026#34;Awesome Subheader\u0026#34; \u0026gt;}} With html code \u0026lt;ul\u0026gt; \u0026lt;li\u0026gt;Coffee\u0026lt;/li\u0026gt; \u0026lt;li\u0026gt;Tea\u0026lt;/li\u0026gt; \u0026lt;li\u0026gt;Milk\u0026lt;/li\u0026gt; \u0026lt;/ul\u0026gt; {{\u0026lt; /timelineItem \u0026gt;}} {{\u0026lt; timelineItem icon=\u0026#34;star\u0026#34; header=\u0026#34;Shortcodes\u0026#34; badge=\u0026#34;AWESOME\u0026#34; \u0026gt;}} With other shortcodes {{\u0026lt; gallery \u0026gt;}} \u0026lt;img src=\u0026#34;gallery/01.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/02.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/03.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/04.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/05.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/06.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/07.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; {{\u0026lt; /gallery \u0026gt;}} {{\u0026lt; /timelineItem \u0026gt;}} {{\u0026lt; timelineItem icon=\u0026#34;code\u0026#34; header=\u0026#34;Another Awesome Header\u0026#34;\u0026gt;}} {{\u0026lt; github repo=\u0026#34;nunocoracao/blowfish\u0026#34; \u0026gt;}} {{\u0026lt; /timelineItem \u0026gt;}} {{\u0026lt; /timeline \u0026gt;}} header badge test subheader Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. Another Awesome Header date - present Awesome Subheader With html code Coffee Tea Milk Shortcodes AWESOME With other shortcodes Another Awesome Header nunocoracao/blowfish Personal Website \u0026amp; Blog Theme for Hugo HTML 2762 717 TypeIt # TypeIt is the most versatile JavaScript tool for creating typewriter effects on the planet. With a straightforward configuration, it allows you to type single or multiple strings that break lines, delete \u0026amp; replace each other, and it even handles strings that contain complex HTML.\nBlowfish implements a sub-set of TypeIt features using a shortcode. Write your text within the typeit shortcode and use the following parameters to configure the behavior you want.\nParameter Description tag [String] html tag that will be used to render the strings. classList [String] List of css classes to apply to the html element. initialString [String] Initial string that will appear written and will be replaced. speed [number] Typing speed, measured in milliseconds between each step. lifeLike [boolean] Makes the typing pace irregular, as if a real person is doing it. startDelay [number] The amount of time before the plugin begins typing after being initialized. breakLines [boolean] Whether multiple strings are printed on top of each other (true), or if they\u0026rsquo;re deleted and replaced by each other (false). waitUntilVisible [boolean] Determines if the instance will begin when loaded or only when the target element becomes visible in the viewport. The default is true loop [boolean] Whether your strings will continuously loop after completing Example 1:\n{{\u0026lt; typeit \u0026gt;}} Lorem ipsum dolor sit amet {{\u0026lt; /typeit \u0026gt;}} Example 2:\n{{\u0026lt; typeit tag=h1 lifeLike=true \u0026gt;}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. {{\u0026lt; /typeit \u0026gt;}} Example 3:\n{{\u0026lt; typeit tag=h3 speed=50 breakLines=false loop=true \u0026gt;}} \u0026#34;Frankly, my dear, I don\u0026#39;t give a damn.\u0026#34; Gone with the Wind (1939) \u0026#34;I\u0026#39;m gonna make him an offer he can\u0026#39;t refuse.\u0026#34; The Godfather (1972) \u0026#34;Toto, I\u0026#39;ve a feeling we\u0026#39;re not in Kansas anymore.\u0026#34; The Wizard of Oz (1939) {{\u0026lt; /typeit \u0026gt;}} Video # Blowfish includes a video shortcode for embedding local or external videos in content. The shortcode renders a \u0026lt;figure\u0026gt; wrapper with a responsive video player and an optional caption.\nThe video shortcode accepts the following parameters:\nParameter Description src Required. Video URL or local path. Local lookup order: page resource → assets/ → static/. poster Optional poster image URL or local path. If omitted, the shortcode attempts a same-name image in the page bundle. caption Optional Markdown caption shown below the video. autoplay true/false. Enables autoplay when true. Default: false. loop true/false. Loops when true. Default: false. muted true/false. Mutes when true. Default: false. controls true/false. Shows the browser’s default playback controls when true. Default: true. playsinline true/false. Inline playback on mobile when true. Default: true. preload metadata (load info), none (save bandwidth), or auto (preload more). Default: metadata. start Optional start time in seconds. end Optional end time in seconds. ratio Reserved aspect ratio for the player. Supports 16/9, 4/3, 1/1, or custom W/H. Default: 16/9. fit How the video fits the ratio: contain (no crop), cover (crop to fill), fill (stretch). Default: contain. If the browser cannot play the video, the player will show a minimal English fallback message with a download link.\nExample:\n{{\u0026lt; video src=\u0026#34;https://upload.wikimedia.org/wikipedia/commons/5/5a/CC0_-_Public_Domain_Dedication_video_bumper.webm\u0026#34; poster=\u0026#34;https://upload.wikimedia.org/wikipedia/commons/e/e0/CC0.jpg\u0026#34; caption=\u0026#34;**Public domain demo** — CC0 video and poster.\u0026#34; loop=true muted=true \u0026gt;}} Your browser cannot play this video. Download video.\nPublic domain demo — CC0 video and poster. Youtube Lite # A shortcut to embed youtube videos using the lite-youtube-embed library. This library is a lightweight alternative to the standard youtube embeds, and it\u0026rsquo;s designed to be faster and more efficient.\nParameter Description id [String] Youtube video id to embed. label [String] Label for the video params [String] Extras parameters for video playing Example 1:\n{{\u0026lt; youtubeLite id=\u0026#34;SgXhGb-7QbU\u0026#34; label=\u0026#34;Blowfish-tools demo\u0026#34; \u0026gt;}} Example 2:\nYou can use all of Youtube\u0026rsquo;s player parameters for the params variable, as demonstrated below:\nThis video will start after 130 seconds (2m10)\n{{\u0026lt; youtubeLite id=\u0026#34;SgXhGb-7QbU\u0026#34; label=\u0026#34;Blowfish-tools demo\u0026#34; params=\u0026#34;start=130\u0026#34; \u0026gt;}} This video will not have UI controls, will start playing at 130 seconds and will stop 10 seconds later.\nTo concatenate multiple options as shown below, you need to add the \u0026amp; character between them.\n{{\u0026lt; youtubeLite id=\u0026#34;SgXhGb-7QbU\u0026#34; label=\u0026#34;Blowfish-tools demo\u0026#34; params=\u0026#34;start=130\u0026amp;end=10\u0026amp;controls=0\u0026#34; \u0026gt;}} More informations can be found on the youtubeLite GitHub repo and Youtube\u0026rsquo;s player parameters page.\n","externalUrl":null,"permalink":"/docs/shortcodes/","section":"Documentation","summary":"In addition to all the default Hugo shortcodes, Blowfish adds a few extras for additional functionality.\nAlert # alert outputs its contents as a stylised message box within your article. It’s useful for drawing attention to important information that you don’t want the reader to miss.\n","title":"Shortcodes","type":"docs"},{"content":"In addition to the default Hugo front matter parameters, Blowfish adds a number of additional options to customise the presentation of individual articles. All the available theme front matter parameters are listed below.\nFront matter parameter default values are inherited from the theme\u0026rsquo;s base configuration, so you only need to specify these parameters in your front matter when you want to override the default.\nName Default Description title Not set The name of the article. description Not set The text description for the article. It is used in the HTML metadata. externalUrl Not set If this article is published on a third-party website, the URL to this article. Providing a URL will prevent a content page being generated and any references to this article will link directly to the third-party website. editURL article.editURL When showEdit is active, the URL for the edit link. editAppendPath article.editAppendPath When showEdit is active, whether or not the path to the current article should be appended to the URL set at editURL. groupByYear list.groupByYear Whether or not articles are grouped by year on list pages. menu Not set When a value is provided, a link to this article will appear in the named menus. Valid values are main or footer. robots Not set String that indicates how robots should handle this article. If set, it will be output in the page head. Refer to Google\u0026rsquo;s docs for valid values. sharingLinks article.sharingLinks Which sharing links to display at the end of this article. When not provided, or set to false no links will be displayed. showAuthor article.showAuthor Whether or not the author box for the default author is displayed in the article footer. showAuthorBottom article.showAuthorBottom Author boxes are displayed at the bottom of each page instead of the top. authors Not set Array of values for authors, if set it overrides showAuthor settings for page or site. Used on the multiple authors feature, check this page for more details on how to configure that feature. showAuthorsBadges article.showAuthorsBadges Whether the authors taxonomies are are displayed in the article or list header. This requires the setup of multiple authors and the authors taxonomy. Check this page for more details on how to configure that feature. featureimage Not set Link for feature image featureimagecaption Not set Caption for feature image. Only displayed in heroStyle big showHero article.showHero Whether the thumbnail image will be shown as a hero image within the article page. heroStyle article.heroStyle Style to display the hero image, valid options are: basic, big, background, thumbAndBackground. imagePosition Not set Sets the position of the feature image using object-position attribute. Valid values are as specified in the MDN documentation. showBreadcrumbs article.showBreadcrumbs or list.showBreadcrumbs Whether the breadcrumbs are displayed in the article or list header. showDate article.showDate Whether or not the article date is displayed. The date is set using the date parameter. showDateUpdated article.showDateUpdated Whether or not the date the article was updated is displayed. The date is set using the lastmod parameter. showEdit article.showEdit Whether or not the link to edit the article content should be displayed. showHeadingAnchors article.showHeadingAnchors Whether or not heading anchor links are displayed alongside headings within this article. showPagination article.showPagination Whether or not the next/previous article links are displayed in the article footer. invertPagination article.invertPagination Whether or not to flip the direction of the next/previous article links. showReadingTime article.showReadingTime Whether or not the article reading time is displayed. showTaxonomies article.showTaxonomies Whether or not the taxonomies that relate to this article are displayed. showTableOfContents article.showTableOfContents Whether or not the table of contents is displayed on this article. showWordCount article.showWordCount Whether or not the article word count is displayed. showComments article.showComments Whether or not the comments partial is included after the article footer. showSummary list.showSummary Whether or not the article summary should be displayed on list pages. showViews article.showViews Whether or not the article views should be displayed in lists and detailed view. This requires a firebase integration. Check this page for a guide on how to integrate Firebase into Blowfish showLikes article.showLikes Whether or not the article likes should be displayed in lists and detailed view. This requires a firebase integration. Check this page for a guide on how to integrate Firebase into Blowfish seriesOpened article.seriesOpened Whether or not the series module will be displayed open by default or not. series Not set Array of series the article belongs to, we recommend using only one series per article. series_order Not set Number of the article within the series. summary Auto generated using summaryLength (see site configuration) When showSummary is enabled, this is the Markdown string to be used as the summary for this article. xml true unless excluded by sitemap.excludedKinds Whether or not this article is included in the generated /sitemap.xml file. excludeFromSearch false Whether or not this article should be excluded from the sitemap and search index. When true, the page will not appear in sitemap.xml or index.json. layoutBackgroundBlur true Makes the background image in the background heroStyle blur with the scroll layoutBackgroundHeaderSpace true Add space between the header and the body. externalLinkForceNewTab article.externalLinkForceNewTab Should external links in markdown open in a new tab. ","externalUrl":null,"permalink":"/docs/front-matter/","section":"Documentation","summary":"In addition to the default Hugo front matter parameters, Blowfish adds a number of additional options to customise the presentation of individual articles. All the available theme front matter parameters are listed below.\n","title":"Front Matter","type":"docs"},{"content":"Some websites have more than one author contributing with content and therefore require more than a single default author across the entire website. For those use-cases, Blowfish allows users to extend the list of authors using the multiple authors feature.\nTo keep everything backwards compatible, this feature only allows the definition of extra authors and does not change in any way the previous author functionality which is used via config files.\nCreate Authors # The first step to create new authors is to set up a new folder in ./data/authors. Then you can simply add new json files inside, one for each new author. The name of the file will be the key for that author when referencing it in your articles.\nAs an example, let’s create a file called nunocoracao.json within ./data/authors. The contents of the file should be similar to the ones below. name, image, bio, and social are the 4 parameters supported right for authors. They mimic the configurations available for the default author in the config files.\nNote: the key in the social object will be used to fetch one of the theme’s icons, feel free to use any of the icons available in your setup.\n{ \u0026#34;name\u0026#34;: \u0026#34;Nuno Coração\u0026#34;, \u0026#34;image\u0026#34; : \u0026#34;img/nuno_avatar.jpg\u0026#34;, \u0026#34;bio\u0026#34;: \u0026#34;Theme Creator\u0026#34;, \u0026#34;social\u0026#34;: [ { \u0026#34;linkedin\u0026#34;: \u0026#34;https://linkedin.com/in/nunocoracao\u0026#34; }, { \u0026#34;twitter\u0026#34;: \u0026#34;https://twitter.com/nunocoracao\u0026#34; }, { \u0026#34;instagram\u0026#34;: \u0026#34;https://instagram.com/nunocoracao\u0026#34; }, { \u0026#34;medium\u0026#34;: \u0026#34;https://medium.com/@nunocoracao\u0026#34; }, { \u0026#34;github\u0026#34;: \u0026#34;https://github.com/nunocoracao\u0026#34; }, { \u0026#34;goodreads\u0026#34;: \u0026#34;http://goodreads.com/nunocoracao\u0026#34; }, { \u0026#34;keybase\u0026#34;: \u0026#34;https://keybase.io/nunocoracao\u0026#34; }, { \u0026#34;reddit\u0026#34;: \u0026#34;https://reddit.com/user/nunoheart\u0026#34; } ] } Reference Authors in Articles # Now that you created one author, the next step is to reference it in one or more articles. In the example below, we reference the author created in the previous step using its key.\nThis will render an extra author using the data provided in the json file. This feature does not change in any way the default author configured for the overall site, and therefore, you can control both separately. Using the showAuthor parameter, you can configure whether to show the default author, that is the normal use-case for a single author blog. The new authors front-matter parameter allows you to define authors specifically to an article, and they will be rendered independently of the configurations for the default site author.\n--- title: \u0026#34;Multiple Authors\u0026#34; date: 2020-08-10 draft: false description: \u0026#34;Configure multiple authors for your articles.\u0026#34; slug: \u0026#34;multi-author\u0026#34; tags: [\u0026#34;authors\u0026#34;, \u0026#34;config\u0026#34;, \u0026#34;docs\u0026#34;] showAuthor: true authors: - \u0026#34;nunocoracao\u0026#34; showAuthorsBadges : false --- In the example, which matches the markdown of the current page, both the default author and the new one will be displayed. You can scroll now to see the outcome.\nCreate the Authors Taxonomy # To get lists of articles for each of your authors you can configure the authors taxonomy, which opens up some more configurations that might be interesting. This is an optional step in the process that is not required to display the authors in your articles.\nFirst step is to configure the authors taxonomy in your hugo.toml file, like in the example below. Even though tag and category are defined by default with Hugo, once you add a specific taxonomies section you need to add them again otherwise the site will not process them.\n[taxonomies] tag = \u0026#34;tags\u0026#34; category = \u0026#34;categories\u0026#34; author = \u0026#34;authors\u0026#34; And that’s just about it. Now you will have pages that reference your authors and, for each, show the respective list of articles where they participate. You can also use the article.showAuthorsBadges on the config file, or showAuthorsBadges on each article to chose whether to display the authors taxonomy as badges in each post item. As an example, this doc is configured to not display authors but if you look at the sample referenced below you will see the authors displayed as badges.\nLastly, you can add more detail to each author page so that it displays a little bio, links, or whatever information fits your use-case. To achieve that, create a folder with the key to each author inside ./content/authors and inside each folder place a _index.md file. For the example above, we would end up with a .content/authors/nunocoracao/_index.md file. Inside, you can configure the actual name of the author and the contents of their page. Authors in this documentation website are configured like this, so you can have a look by playing around with the site.\n--- title: \u0026#34;Nuno Coração\u0026#34; --- Nuno\u0026#39;s awesome dummy bio. Sample # This sample sample below shows an example where the default site author is turned off and the article has multiple authors.\nMultiple Authors 1 min\u0026middot; loading Nuno Coração ,\u0026nbsp; Dummy Second Author Authors Sample ","externalUrl":null,"permalink":"/docs/multi-author/","section":"Documentation","summary":"Some websites have more than one author contributing with content and therefore require more than a single default author across the entire website. For those use-cases, Blowfish allows users to extend the list of authors using the multiple authors feature.\n","title":"Multiple Authors","type":"docs"},{"content":" Analytics # Blowfish provides built-in support for Fathom Analytics, Google Analytics and Umami Analytics. Fathom is a paid alternative to Google Analytics that respects user privacy.\nFathom Analytics # To enable Fathom Analytics support, simply provide your Fathom site code in the config/_default/params.toml file. If you also use the custom domain feature of Fathom and would like to serve their script from your domain, you can also additionally provide the domain configuration value. If you don\u0026rsquo;t provide a domain value, the script will load directly from Fathom DNS.\n# config/_default/params.toml [fathomAnalytics] site = \u0026#34;ABC12345\u0026#34; domain = \u0026#34;llama.yoursite.com\u0026#34; Google Analytics # Google Analytics support is provided through the internal Hugo partial. Simply provide the googleAnalytics key in the config/_default/hugo.toml file and the script will be added automatically.\nBoth version 3 (analytics.js) and version 4 (gtag.js) are supported, based on the configuration value provided:\n# config/_default/hugo.toml # version 3 googleAnalytics = \u0026#34;UA-PROPERTY_ID\u0026#34; # version 4 googleAnalytics = \u0026#34;G-MEASUREMENT_ID\u0026#34; Umami Analytics # To enable Umami Analytics support, simply provide your Umami tracking code in the config/_default/params.toml file. If you also use the custom domain feature of Umami and would like to serve their script from your domain, you can also additionally provide the domain configuration value. If you don\u0026rsquo;t provide a domain value, the script will load directly from Umami DNS (analytics.umami.is). If you want the tracker to only run on specific domains, you can provide the dataDomains configuration value. If you don\u0026rsquo;t provide a dataDomains value, the script will run on any website where the domain andwebsiteid match. If the environment variable TRACKER_SCRIPT_NAME is configured, you can specify a custom script name scriptName. If it is not configured, either comment it out or use the default script.js.\nIf you want to honor the Do Not Track setting of the users browser, you have to set doNotTrack to true. Blowfish does not honor the Do Not Track setting per default.\nNote: If you enable Umami Analytics, Blowfish will support Umami Track Event automatically. If you do not want to support Track Event, the param enableTrackEvent must set to false. # config/_default/params.toml [umamiAnalytics] websiteid = \u0026#34;ABC12345\u0026#34; domain = \u0026#34;llama.yoursite.com\u0026#34; dataDomains = \u0026#34;yoursite.com,yoursite2.com\u0026#34; scriptName = \u0026#34;TRACKER_SCRIPT_NAME\u0026#34; enableTrackEvent = true doNotTrack = false Seline Analytics # To enable Seline Analytics support, simply provide your Seline token in the config/_default/params.toml file.\nNote: If you enable Seline Analytics, Blowfish will support Seline Track Event automatically. If you do not want to support Track Event, the param enableTrackEvent must set to false. # config/_default/params.toml [selineAnalytics] token = \u0026#34;XXXXXX\u0026#34; enableTrackEvent = true Custom analytics providers # If you wish to use a different analytics provider on your website you can also override the analytics partial and provide your own script. Simply create the file layouts/partials/extend-head.html in your project and it will automatically include it in the \u0026lt;head\u0026gt; of the website.\nComments # To add comments to your articles, Blowfish includes support for a comments partial that is included at the base of each article page. Simply provide a layouts/partials/comments.html which contains the code required to display your chosen comments.\nYou can use either the built-in Hugo Disqus template, or provide your own custom code. Refer to the Hugo docs for further information.\nOnce the partial has been provided, finer control over where comments are displayed is then managed using the showComments parameter. This value can be set at the theme level in the params.toml config file, or on a per-article basis by including it in the front matter. The parameter defaults to false so it must be set to true in one of these locations in order for comments to be displayed.\nFavicons # Blowfish provides a default set of blank favicons to get started but you can provide your own assets to override them. The easiest way to obtain new favicon assets is to generate them using a third-party provider like favicon.io.\nIcon assets should be placed directly in the static/ folder of your website and named as per the listing below. If you use favicon.io, these will be the filenames that are automatically generated for you, but you can provide your own assets if you wish.\nstatic/ ├─ android-chrome-192x192.png ├─ android-chrome-512x512.png ├─ apple-touch-icon.png ├─ favicon-16x16.png ├─ favicon-32x32.png ├─ favicon.ico └─ site.webmanifest Alternatively, you can also completely override the default favicon behaviour and provide your own favicon HTML tags and assets. Simply provide a layouts/partials/favicons.html file in your project and this will be injected into the site \u0026lt;head\u0026gt; in place of the default assets.\nIcon # Similar to the icon shortcode, you can include icons in your own templates and partials by using Blowfish\u0026rsquo;s icon.html partial. The partial takes one parameter which is the name of the icon to be included.\nExample:\n{{ partial \u0026#34;icon.html\u0026#34; \u0026#34;github\u0026#34; }} Icons are populated using Hugo pipelines which makes them very flexible. Blowfish includes a number of built-in icons for social, links and other purposes. Check the icon samples page for a full list of supported icons.\nCustom icons can be added by providing your own icon assets in the assets/icons/ directory of your project. The icon can then be referenced in the partial by using the SVG filename without the .svg extension.\nIcons can also be used in article content by calling the icon shortcode.\nExtensions # Blowfish also provides for a number of extension partials that allow for expanding upon base functionality.\nArticle link # If you wish to insert additional code after article links, create a layouts/partials/extend-article-link.html file. This is especially powerful when combined with the badge shortcode which can be used to highlight metadata for certain articles.\nHead and Footer # The theme allows for inserting additional code directly into the \u0026lt;head\u0026gt; and \u0026lt;footer\u0026gt; sections of the template. These can be useful for providing scripts or other logic that isn\u0026rsquo;t part of the theme.\nSimply create either layouts/partials/extend-head.html or layouts/partials/extend-footer.html and these will automatically be included in your website build. Both partials are injected as the last items in \u0026lt;head\u0026gt; and \u0026lt;footer\u0026gt; so they can be used to override theme defaults.\nUncached Head Extension # The extend-head.html is cached, and Blowfish also supports an uncached head extension for conditionally including scripts or metadata based on page-level properties. To use this feature, create a layouts/partials/extend-head-uncached.html file in your project. This file will be included in \u0026lt;head\u0026gt; HTML tag.\nThis is useful when you need to include dynamic elements—such as scripts or metadata—based on properties like shortcodes, front matter flags, or other page-specific data that should not be cached across builds.\nFor example, to dynamically load a CDN JavaScript file base on the appearance of a shortcode, you can use the HasShortcode method within extend-head-uncached.html.\n","externalUrl":null,"permalink":"/docs/partials/","section":"Documentation","summary":"Analytics # Blowfish provides built-in support for Fathom Analytics, Google Analytics and Umami Analytics. Fathom is a paid alternative to Google Analytics that respects user privacy.\n","title":"Partials","type":"docs"},{"content":" Thumbnails # Blowfish was enhanced in order to make it easy to add visual support to your posts. To do so, you just need to place an image file (almost all formats are supported but we recommend .png or .jpg) that starts with feature* inside your article\u0026rsquo;s main directory, as shown in the example below.\ncontent └── awesome_article ├── index.md └── featured.png This will tell Blowfish that this article has a feature image that can be used both as a thumbnail across your website as well as for oEmbed cards across social platforms.\nFolder Structure # If you are using single .md files for your articles and have a file structure similar to this:\ncontent └── awesome_article.md You need to change it from a single Markdown file into a folder. Create a directory with the same name of the article, inside create a index.md file. You\u0026rsquo;ll get a structure similar to what\u0026rsquo;s below.\ncontent └── awesome_article └── index.md Then you just need to add an image like explained earlier. If you want to see a sample of this, you can consult this sample.\nHero Images # Thumbnails will be used by default as hero images within each article. Use the global article.showHero or the front-matter parameter showHero to control this feature across the entire site or for each specific post. If you want to override the style of the hero image, you can create a file called hero.html in ./layouts/partials/ that will override the original partial from the theme.\n","externalUrl":null,"permalink":"/docs/thumbnails/","section":"Documentation","summary":"Thumbnails # Blowfish was enhanced in order to make it easy to add visual support to your posts. To do so, you just need to place an image file (almost all formats are supported but we recommend .png or .jpg) that starts with feature* inside your article’s main directory, as shown in the example below.\n","title":"Thumbnails","type":"docs"},{"content":"If you\u0026rsquo;ve been reading the documentation in order, you should now know about all the features and configurations available in Blowfish. This page is designed to pull everything together and offer some worked examples that you might like to use in your Hugo project.\nTip: If you\u0026rsquo;re new to Hugo, be sure to check out the official docs to learn more about the concept of page bundles and resources. The examples on this page can all be adapted to different scenarios but hopefully give you some ideas about how to approach formatting a particular content item for your individual project.\nBranch pages # Branch page bundles in Hugo cover items like the homepage, section listings, and taxonomy pages. The important thing to remember about branch bundles is that the filename for this content type is _index.md.\nBlowfish will honour the front matter parameters specified in branch pages and these will override the default settings for that particular page. For example, setting the title parameter in a branch page will allow overriding the page title.\nHomepage # Layout: layouts/index.html Content: content/_index.md The homepage in Blowfish is special in that it\u0026rsquo;s overarching design is controlled by the homepage layout config parameter. You can learn more about this in the Homepage Layout section.\nIf you want to add custom content to this page, you simply need to create a content/_index.md file. Anything in this file will then be included in your homepage.\nExample:\n--- title: \u0026#34;Welcome to Blowfish!\u0026#34; description: \u0026#34;This is a demo of adding content to the homepage.\u0026#34; --- Welcome to my website! I\u0026#39;m really happy you stopped by. This example sets a custom title and adds some additional text to the body of the page. Any Markdown formatted text is acceptable, including shortcodes, images and links.\nList pages # Layout: layouts/_default/list.html Content: content/../_index.md List pages group all the pages within into a section and provide a way for visitors to reach each page. A blog or portfolio are examples of a list page as they group together posts or projects.\nCreating a list page is as simple as making a sub-directory in the content folder. For example, to create a \u0026ldquo;Projects\u0026rdquo; section, you would create content/projects/. Then create a Markdown file for each of your projects.\nA list page will be generated by default, however to customise the content, you should also create an _index.md page in this new directory.\n. └── content └── projects ├── _index.md # /projects ├── first-project.md # /projects/first-project └── another-project ├── index.md # /projects/another-project └── project.jpg Hugo will generate URLs for the pages in your projects folder accordingly.\nJust like the homepage, content in the _index.md file will be output into the generated list index. Blowfish will then list any pages in this section below the content.\nExample:\n--- title: \u0026#34;Projects\u0026#34; description: \u0026#34;Learn about some of my projects.\u0026#34; cascade: showReadingTime: false --- This section contains all my current projects. In this example, the special cascade parameter is being used to hide the reading time on any sub-pages within this section. By doing this, any project pages will not have their reading time showing. This is a great way to override default theme parameters for an entire section without having to include them in every individual page.\nThe samples section of this site is an example of a list page.\nTaxonomy pages # List layout: layouts/_default/taxonomy.html Term layout: layouts/_default/term.html Content: content/../_index.md Taxonomy pages come in two forms - taxonomy lists and taxonomy terms. Lists display a listing of each of the terms within a given taxonomy, while terms display a list of pages that are related to a given term.\nThe terminology can get a little confusing so let\u0026rsquo;s explore an example using a taxonomy named animals.\nFirstly, to use taxonomies in Hugo, they have to be configured. This is done by creating a config file at config/_default/taxonomies.toml and defining the taxonomy name.\n# config/_default/taxonomies.toml animal = \u0026#34;animals\u0026#34; Hugo expects taxonomies to be listed using their singular and plural forms, so we add the singular animal equals the plural animals to create our example taxonomy.\nNow that our animals taxonomy exists, it needs to be added to individual content items. It\u0026rsquo;s as simple as inserting it into the front matter:\n--- title: \u0026#34;Into the Lion\u0026#39;s Den\u0026#34; description: \u0026#34;This week we\u0026#39;re learning about lions.\u0026#34; animals: [\u0026#34;lion\u0026#34;, \u0026#34;cat\u0026#34;] --- This has now created two terms within our animals taxonomy - lion and cat.\nAlthough it\u0026rsquo;s not obvious at this point, Hugo will now be generating list and term pages for this new taxonomy. By default the listing can be accessed at /animals/ and the term pages can be found at /animals/lion/ and /animals/cat/.\nThe list page will list all the terms contained within the taxonomy. In this example, navigating to /animals/ will show a page that has links for \u0026ldquo;lion\u0026rdquo; and \u0026ldquo;cat\u0026rdquo; which take visitors to the individual term pages.\nThe term pages will list all the pages contained within that term. These term lists are essentially the same as normal list pages and behave in much the same way.\nIn order to add custom content to taxonomy pages, simply create _index.md files in the content folder using the taxonomy name as the sub-directory name.\n. └── content └── animals ├── _index.md # /animals └── lion └── _index.md # /animals/lion Anything in these content files will now be placed onto the generated taxonomy pages. As with other content, the front matter variables can be used to override defaults. In this way you could have a tag named lion but override the title to be \u0026ldquo;Lion\u0026rdquo;.\nTo see how this looks in reality, check out the tags taxonomy listing on this site.\nLeaf pages # Layout: layouts/_default/single.html Content (standalone): content/../page-name.md Content (bundled): content/../page-name/index.md Leaf pages in Hugo are basically standard content pages. They are defined as pages that don\u0026rsquo;t contain any sub-pages. These could be things like an about page, or an individual blog post that lives in the blog section of the website.\nThe most important thing to remember about leaf pages is that unlike branch pages, leaf pages should be named index.md without an underscore. Leaf pages are also special in that they can be grouped together at the top level of the section and named with a unique name.\n. └── content └── blog ├── first-post.md # /blog/first-post ├── second-post.md # /blog/second-post └── third-post ├── index.md # /blog/third-post └── image.jpg When including assets in a page, like an image, a page bundle should be used. Page bundles are created using a sub-directory with an index.md file. Grouping the assets with the content in its own directory is important as many of the shortcodes and other theme logic assumes that resources are bundled alongside pages.\nExample:\n--- title: \u0026#34;My First Blog Post\u0026#34; date: 2022-01-25 description: \u0026#34;Welcome to my blog!\u0026#34; summary: \u0026#34;Learn more about me and why I am starting this blog.\u0026#34; tags: [\u0026#34;welcome\u0026#34;, \u0026#34;new\u0026#34;, \u0026#34;about\u0026#34;, \u0026#34;first\u0026#34;] --- _This_ is the content of my blog post. Leaf pages have a wide variety of front matter parameters that can be used to customise how they are displayed.\nExternal links # Blowfish has a special feature that allows links to external pages to appear alongside articles in the article listings. This is useful if you have content on third party websites like Medium, or research papers that you\u0026rsquo;d like to link to, without replicating the content in your Hugo site.\nIn order to create an external link article, some special front matter needs to be set:\n--- title: \u0026#34;My Medium post\u0026#34; date: 2022-01-25 externalUrl: \u0026#34;https://medium.com/\u0026#34; summary: \u0026#34;I wrote a post on Medium.\u0026#34; showReadingTime: false build: render: \u0026#34;false\u0026#34; list: \u0026#34;local\u0026#34; --- Along with the normal front matter parameters like title and summary, the externalUrl parameter is used to tell Blowfish that this is not an ordinary article. The URL provided here will be where visitors are directed when they select this article.\nAdditionally, we use a special Hugo front matter parameter build to prevent a normal page for this content being generated - there\u0026rsquo;s no point generating a page since we\u0026rsquo;re linking to an external URL!\nThe theme includes an archetype to make generating these external link articles simple. Just specify -k external when making new content.\nhugo new -k external posts/my-post.md Simple pages # Layout: layouts/_default/simple.html Front Matter: layout: \u0026quot;simple\u0026quot; Blowfish also includes a special layout for simple pages. The simple layout is a full-width template that just places Markdown content into the page without any special theme features.\nThe only features available in the simple layout are breadcrumbs and sharing links. However, the behaviour of these can still be controlled using the normal page front matter variables.\nTo enable the simple layout on a particular page, add the layout front matter variable with a value of \u0026quot;simple\u0026quot;:\n--- title: \u0026#34;My landing page\u0026#34; date: 2022-03-08 layout: \u0026#34;simple\u0026#34; --- This page content is now full-width. Custom layouts # One of the benefits of Hugo is that it makes it easy to create custom layouts for the whole site, individual sections or pages.\nLayouts follow all the normal Hugo templating rules and more information is available in the official Hugo docs.\nOverriding default layouts # Each of the content types discussed above lists the layout file that is used to generate each type of page. If this file is created in your local project it will override the theme template and thus can be used to customise the default style of the website.\nFor example, creating a layouts/_default/single.html file will allow the layout of leaf pages to be completely customised.\nCustom section layouts # It is also simple to create custom layouts for individual content sections. This is useful when you want to make a section that lists a certain type of content using a particular style.\nLet\u0026rsquo;s step through an example that creates a custom \u0026ldquo;Projects\u0026rdquo; page that lists projects using a special layout.\nIn order to do this, structure your content using the normal Hugo content rules and create a section for your projects. Additionally, create a new layout for the projects section by using the same directory name as the content and adding a list.html file.\n. └── content │ └── projects │ ├── _index.md │ ├── first-project.md │ └── second-project.md └── layouts └── projects └── list.html This list.html file will now override the default list template, but only for the projects section. Before we look at this file, lets first look at the individual project files.\n--- title: \u0026#34;Blowfish\u0026#34; date: 2021-08-11 icon: \u0026#34;github\u0026#34; description: \u0026#34;A theme for Hugo built with Tailwind CSS.\u0026#34; topics: [\u0026#34;Hugo\u0026#34;, \u0026#34;Web\u0026#34;, \u0026#34;Tailwind\u0026#34;] externalUrl: \u0026#34;https://github.com/nunocoracao/blowfish/\u0026#34; --- In this example we are assigning some metadata for each project that we can then use in our list template. There\u0026rsquo;s no page content, but there\u0026rsquo;s nothing stopping you from including it. It\u0026rsquo;s your own custom template after all!\nWith the projects defined, now we can create a list template that outputs the details of each project.\n{{ define \u0026#34;main\u0026#34; }} \u0026lt;section class=\u0026#34;mt-8\u0026#34;\u0026gt; {{ range .Pages }} \u0026lt;article class=\u0026#34;pb-6\u0026#34;\u0026gt; \u0026lt;a class=\u0026#34;flex\u0026#34; href=\u0026#34;{{ .Params.externalUrl }}\u0026#34;\u0026gt; \u0026lt;div class=\u0026#34;mr-3 text-3xl text-neutral-300\u0026#34;\u0026gt; \u0026lt;span class=\u0026#34;relative inline-block align-text-bottom\u0026#34;\u0026gt; {{ partial \u0026#34;icon.html\u0026#34; .Params.icon }} \u0026lt;/span\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;div\u0026gt; \u0026lt;h3 class=\u0026#34;flex text-xl font-semibold\u0026#34;\u0026gt; {{ .Title }} \u0026lt;/h3\u0026gt; \u0026lt;p class=\u0026#34;text-sm text-neutral-400\u0026#34;\u0026gt; {{ .Description }} \u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/a\u0026gt; \u0026lt;/article\u0026gt; {{ end }} \u0026lt;/section\u0026gt; {{ end }} Although this is quite a straightforward example, you can see that it steps through each of the pages in this section (ie. each project), and then outputs HTML links to each project alongside an icon. The metadata in the front matter for each project is used to determine which information is displayed.\nKeep in mind that you\u0026rsquo;ll need to ensure the relevant styles and classes are available, which may require the Tailwind CSS to be recompiled. This is discussed in more detail in the Advanced Customisation section.\nWhen making custom templates like this one, it\u0026rsquo;s always easiest to take a look at how the default Blowfish template works and then use that as a guide. Remember, the Hugo docs are a great resource to learn more about creating templates too.\n","externalUrl":null,"permalink":"/docs/content-examples/","section":"Documentation","summary":"If you’ve been reading the documentation in order, you should now know about all the features and configurations available in Blowfish. This page is designed to pull everything together and offer some worked examples that you might like to use in your Hugo project.\n","title":"Content Examples","type":"docs"},{"content":"Blowfish provides a feature to group a set of articles together under a \u0026ldquo;series\u0026rdquo;. Placing an article under a series will display the rest of the series articles in each single page and provide a quick way to navigate amongst them. You can see an example of this above.\nCreate Taxonomy # The first step to enable series is to create the series taxonomy. For doing this just add the series taxonomy to your taxonomy list in the hugo.toml.\n[taxonomies] tag = \u0026#34;tags\u0026#34; category = \u0026#34;categories\u0026#34; author = \u0026#34;authors\u0026#34; series = \u0026#34;series\u0026#34; Mark Articles # Then you just need to mark each article using the series parameter and the series_order. The series parameter will be the id and name of the series you are placing the article into (even though the variable is an array we recommend keeping each article to a single series.). And the series_order defines the order of that article within the series. In the example below the article is number 11 in the Documentation series.\nseries: [\u0026#34;Documentation\u0026#34;] series_order: 11 Series Behavior # Marking an article as part of a series will automatically display the series module as you see in this page for example. You can choose whether that module starts opened or not using the article.seriesOpened global variable in params.toml or the front-matter parameter seriesOpened to specify an override at the article level.\n","externalUrl":null,"permalink":"/docs/series/","section":"Documentation","summary":"Blowfish provides a feature to group a set of articles together under a “series”. Placing an article under a series will display the rest of the series articles in each single page and provide a quick way to navigate amongst them. You can see an example of this above.\n","title":"Series","type":"docs"},{"content":"There are many ways you can make advanced changes to Blowfish. Read below to learn more about what can be customised and the best way of achieving your desired result.\nIf you need further advice, post your questions on GitHub Discussions.\nHugo project structure # Before leaping into it, first a quick note about Hugo project structure and best practices for managing your content and theme customisations.\nIn summary: Never directly edit the theme files. Only make customisations in your Hugo project\u0026rsquo;s sub-directories, not in the themes directory itself. Blowfish is built to take advantage of all the standard Hugo practices. It is designed to allow all aspects of the theme to be customised and overridden without changing any of the core theme files. This allows for a seamless upgrade experience while giving you total control over the look and feel of your website.\nIn order to achieve this, you should never manually adjust any of the theme files directly. Whether you install using Hugo modules, as a git submodule or manually include the theme in your themes/ directory, you should always leave these files intact.\nThe correct way to adjust any theme behaviour is by overriding files using Hugo\u0026rsquo;s powerful file lookup order. In summary, the lookup order ensures any files you include in your project directory will automatically take precedence over any theme files.\nFor example, if you wanted to override the main article template in Blowfish, you can simply create your own layouts/_default/single.html file and place it in the root of your project. This file will then override the single.html from the theme without ever changing the theme itself. This works for any theme files - HTML templates, partials, shortcodes, config files, data, assets, etc.\nAs long as you follow this simple practice, you will always be able to update the theme (or test different theme versions) without worrying that you will lose any of your custom changes.\nChange image optimization settings # Hugo has various builtin methods to resize, crop and optimize images.\nAs an example - in layouts/partials/article-link/card.html, you have the following code:\n{{ with .Resize \u0026#34;600x\u0026#34; }} \u0026lt;div class=\u0026#34;w-full thumbnail_card nozoom\u0026#34; style=\u0026#34;background-image:url({{ .RelPermalink }});\u0026#34;\u0026gt;\u0026lt;/div\u0026gt; {{ end }} The default behavior of Hugo here is to resize the image to 600px keeping the ratio.\nIt is worth noting here that default image configurations such as anchor point can also be set in your site configuration as well as in the template itself.\nSee the Hugo docs on image processing for more info.\nColour schemes # Blowfish ships with a number of colour schemes out of the box. To change the basic colour scheme, you can set the colorScheme theme parameter. Refer to the Getting Started section to learn more about the built-in schemes.\nIn addition to the default schemes, you can also create your own and re-style the entire website to your liking. Schemes are created by by placing a \u0026lt;scheme-name\u0026gt;.css file in the assets/css/schemes/ folder. Once the file is created, simply refer to it by name in the theme configuration.\nNote: generating these files manually can be hard, I\u0026rsquo;ve built a nodejs terminal tool to help with that, Fugu. In a nutshell, you pass the main three hex values of your color palette and the program will output a css file that can be imported directly into Blowfish. Blowfish defines a three-colour palette that is used throughout the theme. The three colours are defined as neutral, primary and secondary variants, each containing ten shades of colour.\nDue to the way Tailwind CSS 3.0 calculates colour values with opacity, the colours specified in the scheme need to conform to a particular format by providing the red, green and blue colour values.\n:root { --color-primary-500: 139, 92, 246; } This example defines a CSS variable for the primary-500 colour with a red value of 139, green value of 92 and blue value of 246.\nUse one of the existing theme stylesheets as a template. You are free to define your own colours, but for some inspiration, check out the official Tailwind colour palette reference.\nOverriding the stylesheet # Sometimes you need to add a custom style to style your own HTML elements. Blowfish provides for this scenario by allowing you to override the default styles in your own CSS stylesheet. Simply create a custom.css file in your project\u0026rsquo;s assets/css/ folder.\nThe custom.css file will be minified by Hugo and loaded automatically after all the other theme styles which means anything in your custom file will take precedence over the defaults.\nUsing additional fonts # Blowfish allows you to easily change the font for your site. After creating a custom.css file in your project\u0026rsquo;s assets/css/ folder, place you font file inside a fonts folder within the static root folder.\n. ├── assets │ └── css │ └── custom.css ... └─── static └── fonts └─── font.ttf This makes the font available to the website. Now, the font can just import it in your custom.css and replaced wherever you see fit. The example below shows what replacing the font for the entire html would look like.\n@font-face { font-family: font; src: url(\u0026#39;/fonts/font.ttf\u0026#39;); } html { font-family: font; } Adjusting the font size # Changing the font size of your website is one example of overriding the default stylesheet. Blowfish makes this simple as it uses scaled font sizes throughout the theme which are derived from the base HTML font size. By default, Tailwind sets the default size to 12pt, but it can be changed to whatever value you prefer.\nCreate a custom.css file using the instructions above and add the following CSS declaration:\n/* Increase the default font size */ html { font-size: 13pt; } Simply by changing this one value, all the font sizes on your website will be adjusted to match this new size. Therefore, to increase the overall font sizes used, make the value greater than 12pt. Similarly, to decrease the font sizes, make the value less than 12pt.\nChanging Syntax Highlighting Theme # To change the syntax highlighting theme, create assets/css/custom.css and add the following:\n.chroma, .chroma *, .chroma:is(.dark *), .chroma:is(.dark *) * { color: unset; font-weight: unset; font-style: unset; } This clears the default Chroma styles. The next step is to incorporate Chroma styles into your CSS file using the hugo gen chromastyles command:\n# Mac/Linux (echo \u0026#39;html:not(.dark) {\u0026#39;; hugo gen chromastyles --style=emacs; echo \u0026#39;}\u0026#39;) \u0026gt;\u0026gt; assets/css/custom.css (echo \u0026#39;html.dark {\u0026#39;; hugo gen chromastyles --style=evergarden; echo \u0026#39;}\u0026#39;) \u0026gt;\u0026gt; assets/css/custom.css # Windows PowerShell # This command cannot run in CMD; it must run in PowerShell @(\u0026#34;html:not(.dark) {\u0026#34;; (hugo gen chromastyles --style=emacs); \u0026#34;}\u0026#34;) | Add-Content -Path \u0026#34;assets/css/custom.css\u0026#34; @(\u0026#34;html.dark {\u0026#34;; (hugo gen chromastyles --style=evergarden); \u0026#34;}\u0026#34;) | Add-Content -Path \u0026#34;assets/css/custom.css\u0026#34; See all available styles in Hugo\u0026rsquo;s documentation.\nBuilding the theme CSS from source # If you\u0026rsquo;d like to make a major change, you can rebuild the entire theme CSS from scratch. This is useful if you want to adjust the Tailwind configuration or add extra Tailwind classes to the main stylesheet.\nInfo Building the theme manually is intended for advanced users.\nHow it works # Tailwind works by scanning your project files as plain text to find class-like tokens and then generating CSS only for the utilities it recognizes and that actually appear in those files.\nThe following steps focus on installing Tailwind and configuring it so the theme source files are correctly included in this scan. All commands are demonstrated for users who installed the theme as a Git submodule, while Hugo Module users must first vendor the theme source into the _vendor directory using hugo mod vendor and adjust the command paths accordingly.\nInstall dependencies # In order for this to work you\u0026rsquo;ll need to change into the themes/blowfish/ directory and install the project dependencies. You\u0026rsquo;ll need npm on your local machine for this step.\ncd themes/blowfish npm install Run the Tailwind compiler # With the dependencies installed all that\u0026rsquo;s left is to use Tailwind CLI to invoke the JIT compiler. Navigate back to the root of your Hugo project and issue the following command:\ncd ../.. node ./themes/blowfish/node_modules/@tailwindcss/cli/dist/index.mjs -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit It\u0026rsquo;s a bit of an ugly command due to the paths involved but essentially you\u0026rsquo;re calling Tailwind CLI and passing it the location of the Tailwind config file, where to find the theme\u0026rsquo;s main.css file and then where you want the compiled CSS file to be placed. Due to the way Hugo handles file hierarchy, the compiled CSS file in your project will now automatically override the one that comes with the theme.\nEach time you make a change to your layouts and need new Tailwind CSS styles, you can simply re-run the command and generate the new CSS file. You can also add -w to the end of the command to run the JIT compiler in watch mode.\nMake a build script # To fully complete this solution, you can simplify this whole process by adding aliases for these commands, or do what I do and add a package.json to the root of your project which contains the necessary scripts\u0026hellip;\n// package.json { \u0026#34;name\u0026#34;: \u0026#34;my-website\u0026#34;, \u0026#34;version\u0026#34;: \u0026#34;1.0.0\u0026#34;, \u0026#34;description\u0026#34;: \u0026#34;\u0026#34;, \u0026#34;scripts\u0026#34;: { \u0026#34;server\u0026#34;: \u0026#34;hugo server -b http://localhost -p 8000\u0026#34;, \u0026#34;dev\u0026#34;: cross-env \u0026#34;NODE_ENV=development ./themes/blowfish/node_modules/@tailwindcss/cli/dist/index.mjs -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w\u0026#34;, \u0026#34;build\u0026#34;: cross-env \u0026#34;NODE_ENV=production ./themes/blowfish/node_modules/@tailwindcss/cli/dist/index.mjs -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit\u0026#34; }, // and more... } Now when you want to work on designing your site, you can invoke npm run dev and the compiler will run in watch mode. When you\u0026rsquo;re ready to deploy, run npm run build and you\u0026rsquo;ll get a clean Tailwind CSS build.\n🙋‍♀️ If you need help, feel free to ask a question on GitHub Discussions.\n","externalUrl":null,"permalink":"/docs/advanced-customisation/","section":"Documentation","summary":"There are many ways you can make advanced changes to Blowfish. Read below to learn more about what can be customised and the best way of achieving your desired result.\n","title":"Advanced Customisation","type":"docs"},{"content":"There are many ways to deploy your Hugo website built with Blowfish. The theme is designed to be flexible in almost any deployment scenario.\nBlowfish is built using relative URLs throughout the theme. This enables sites to easily be deployed to sub-folders and hosts like GitHub Pages. There\u0026rsquo;s usually no special configuration required for this to work as long as the baseURL parameter has been configured in the hugo.toml file.\nThe official Hugo Hosting and Deployment docs are the best place to learn how to deploy your site. The sections below contain some specific theme configuration details that can help you deploy smoothly with certain providers.\nChoose your provider:\nGitHub Pages Netlify Render Cloudflare Pages Shared hosting, VPS or private web server GitHub Pages # GitHub allows hosting on GitHub Pages using Actions. To enable this functionality, enable Pages on your repo and create a new Actions workflow to build and deploy your site.\nThe file needs to be in YAML format, placed within the .github/workflows/ directory of your GitHub repository and named with a .yml extension.\nImportant: Ensure you set the correct branch name under branches and in the deploy step if parameter to the source branch used in your project. # .github/workflows/gh-pages.yml name: GitHub Pages on: push: branches: - main jobs: build-deploy: runs-on: ubuntu-24.04 concurrency: group: ${{ github.workflow }}-${{ github.ref }} steps: - name: Checkout uses: actions/checkout@v3 with: submodules: true fetch-depth: 0 - name: Setup Hugo uses: peaceiris/actions-hugo@v2 with: hugo-version: \u0026#34;latest\u0026#34; - name: Build run: hugo --minify - name: Deploy uses: peaceiris/actions-gh-pages@v3 if: ${{ github.ref == \u0026#39;refs/heads/main\u0026#39; }} with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_branch: gh-pages publish_dir: ./public Push the config file to GitHub and the action should automatically run. It may fail the first time and you\u0026rsquo;ll need to visit the Settings \u0026gt; Pages section of your GitHub repo to check the source is correct. It should be set to use the gh-pages branch.\nOnce the settings are configured, re-run the action and the site should build and deploy correctly. You can consult the actions log to check everything deployed successfully.\nNetlify # To deploy to Netlify, create a new continuous deployment site and link it to your source code. The build settings can be left blank in the Netlify UI. You will only need to configure the domain you\u0026rsquo;ll be using.\nThen in the root of your site repository, create a netlify.toml file:\n# netlify.toml [build] command = \u0026#34;hugo mod get -u \u0026amp;\u0026amp; hugo --gc --minify -b $URL\u0026#34; publish = \u0026#34;public\u0026#34; [build.environment] NODE_ENV = \u0026#34;production\u0026#34; GO_VERSION = \u0026#34;1.16\u0026#34; TZ = \u0026#34;UTC\u0026#34; # Set to preferred timezone [context.production.environment] HUGO_VERSION = \u0026#34;0.104.1\u0026#34; HUGO_ENV = \u0026#34;production\u0026#34; [context.deploy-preview.environment] HUGO_VERSION = \u0026#34;0.104.1\u0026#34; This configuration assumes you are deploying Blowfish as a Hugo module. If you have installed the theme using another method, change the build command to simply hugo --gc --minify -b $URL.\nWhen you push the config file to your repo, Netlify should automatically deploy your site. You can check the deploy logs in the Netlify UI to check for any errors.\nRender # Deploying to Render is very straightforward and all configuration is via the Render UI.\nCreate a new Static Site and link it to your project\u0026rsquo;s code repository. Then simply configure the build command to be hugo --gc --minify and publish directory to be public.\nThe site will automatically build and deploy whenever you push a change to your repo.\nCloudflare Pages # Cloudflare offers the Pages service that can host Hugo blogs. It builds the site from a git repository and then hosts it on Cloudflare\u0026rsquo;s CDN. Follow their Hugo deployment guide to get started.\nThe Rocket Loader™ feature offered by Cloudflare tries to speed up rendering of web pages with JavaScript, but it breaks the appearance switcher in the theme. It can also cause an annoying light/dark screen flash when browsing your site due to scripts loading in the wrong order.\nThis problem can be fixed by disabling it:\nGo to the Cloudflare dashboard Click on your domain name in the list Click Optimization in the Speed section Scroll down to Rocket Loader™ and disable it Hugo sites built with Blowfish still load very quickly, even with this feature disabled.\nShared hosting, VPS or private web server # Using traditional web hosting, or deploying to your own web server, is as simple as building your Hugo site and transferring the files to your host.\nMake sure that the baseURL parameter in hugo.toml is set to the full URL to the root of your website (including any sub domains or sub-folders).\nThen build your site using hugo and copy the contents of the output directory to the root of your web server and you will be ready to go. By default, the output directory is named public.\nIf you need a hosting provider, check out Vultr or DigitalOcean. Signing up using these affiliate links will give you up to $100 in free credit so you can try the service.\n","externalUrl":null,"permalink":"/docs/hosting-deployment/","section":"Documentation","summary":"There are many ways to deploy your Hugo website built with Blowfish. The theme is designed to be flexible in almost any deployment scenario.\nBlowfish is built using relative URLs throughout the theme. This enables sites to easily be deployed to sub-folders and hosts like GitHub Pages. There’s usually no special configuration required for this to work as long as the baseURL parameter has been configured in the hugo.toml file.\n","title":"Hosting \u0026 Deployment","type":"docs"},{"content":"In order to be able to support dynamic data across your website we\u0026rsquo;ve added the support to integrate Firebase. This will allow you to use the views feature across lists and posts.\nGo to Firebase website and create an account for free Create a new project Select analytics location Setup firebase in Blowfish by getting the variables for your project and setting them inside params.toml file. More details can be found in this page. You can find an example of the file Firebase will provide below, notice the parameters within the FirebaseConfig object. // Import the functions you need from the SDKs you need import { initializeApp } from \u0026#34;firebase/app\u0026#34;; import { getAnalytics } from \u0026#34;firebase/analytics\u0026#34;; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // Your web app\u0026#39;s Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional const firebaseConfig = { apiKey: \u0026#34;AIzaSyB5tqlqDky77Vb4Tc4apiHV4hRZI18KGiY\u0026#34;, authDomain: \u0026#34;blowfish-21fff.firebaseapp.com\u0026#34;, projectId: \u0026#34;blowfish-21fff\u0026#34;, storageBucket: \u0026#34;blowfish-21fff.appspot.com\u0026#34;, messagingSenderId: \u0026#34;60108104191\u0026#34;, appId: \u0026#34;1:60108104191:web:039842ebe1370698b487ca\u0026#34;, measurementId: \u0026#34;G-PEDMYR1V0K\u0026#34; }; // Initialize Firebase const app = initializeApp(firebaseConfig); const analytics = getAnalytics(app); Setup Firestore - Select Build and open Firestore. Create a new database and choose to start in production mode. Select server location and wait. Once that is started you need to configure the rules. Just copy and paste the file below and press publish. These rules ensure that views can only be incremented by 1, and likes can only be changed by +1 or -1 (and never go below 0). rules_version = \u0026#39;2\u0026#39;; service cloud.firestore { match /databases/{database}/documents { // Views - read anyone, only increment by 1 match /views/{document} { allow read: if request.auth != null; allow create: if request.auth != null \u0026amp;\u0026amp; request.resource.data.keys().hasOnly([\u0026#39;views\u0026#39;]) \u0026amp;\u0026amp; request.resource.data.views == 1; allow update: if request.auth != null \u0026amp;\u0026amp; request.resource.data.diff(resource.data).affectedKeys().hasOnly([\u0026#39;views\u0026#39;]) \u0026amp;\u0026amp; request.resource.data.views == resource.data.views + 1; } // Likes - read anyone, only +1 or -1 match /likes/{document} { allow read: if request.auth != null; allow create: if request.auth != null \u0026amp;\u0026amp; request.resource.data.keys().hasOnly([\u0026#39;likes\u0026#39;]) \u0026amp;\u0026amp; request.resource.data.likes == 1; allow update: if request.auth != null \u0026amp;\u0026amp; request.resource.data.diff(resource.data).affectedKeys().hasOnly([\u0026#39;likes\u0026#39;]) \u0026amp;\u0026amp; (request.resource.data.likes == resource.data.likes + 1 || request.resource.data.likes == resource.data.likes - 1) \u0026amp;\u0026amp; request.resource.data.likes \u0026gt;= 0; } // Deny everything else match /{document=**} { allow read, write: if false; } } } Enable anonymous authorization - Select Build and open Authentication. Select get started, click Anonymous and turn it on, save. Enjoy - you can now activate views and likes on Blowfish for all (or specific) articles. ","externalUrl":null,"permalink":"/docs/firebase-views/","section":"Documentation","summary":"In order to be able to support dynamic data across your website we’ve added the support to integrate Firebase. This will allow you to use the views feature across lists and posts.\n","title":"Firebase: Views \u0026 Likes","type":"docs"},{"content":"A quick example of how to start using author taxonomies in your articles.\n","date":"4 October 2023","externalUrl":null,"permalink":"/authors/","section":"Authors Taxonomy Listing Example","summary":"A quick example of how to start using author taxonomies in your articles.\n","title":"Authors Taxonomy Listing Example","type":"authors"},{"content":"","date":"4 October 2023","externalUrl":null,"permalink":"/categories/blowfish/","section":"Categories","summary":"","title":"Blowfish","type":"categories"},{"content":"","date":"4 October 2023","externalUrl":null,"permalink":"/tags/blowfish/","section":"Tags","summary":"","title":"Blowfish","type":"tags"},{"content":"Just one year ago, I createdBlowfish, a Hugo theme crafted to build my unique vision for my personal homepage. I also decided to make it an open-source project. Fast-forward to today, and Blowfish has transformed into a thriving open-source project with over 600 stars on GitHub and a user base of hundreds. In this tutorial, I’ll show you how to get started and have your website running in a couple of minutes.\nnunocoracao/blowfish Personal Website \u0026amp; Blog Theme for Hugo HTML 2762 717 TL;DR # The goal of this guide is to walk a newcomer to Hugo on how to install, manage, and publish your own website. The final version of the code is available in this repo - for those that would like to jump to the end.\nThe visual style is just one of the many possibilities available in Blowfish. Users are encouraged to check the documentation page and learn how to customize the theme to their needs. Additionally, there are already great examples of the theme from other users available for inspiration. Blowfish also offers several extra features in the form of shortcodes available out of the box in the theme - check them out here and get inspired.\nSetup your environment # Let’s begin by installing all the tools you need. This guide will cover the steps for Mac so these instructions might not apply to your hardware and OS. If you are on Windows or Linux, please consult the guides on how to install Hugo, and GitHub’s CLI for your OS.\nAnyway, if you are using MacOS let’s install brew - a package manager for mac - as that will help installing and managing the other tools.\n/bin/bash -c \u0026#34;$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)\u0026#34; Once brew is installed let’s install Git, Hugo and GitHub’s CLI.\nbrew install git brew install hugo brew install gh Create a folder for your code and open a terminal session into it (I chose blowfish-tutorial in the commands below, feel free to call the folder whatever you want).\nmkdir blowfish-tutorial cd blowfish-tutorial Once inside the folder, the next step is to initialize your local git repo.\ngit init -b main Now, let’s create and sync the local repo to a GitHub repo so that your code is stored remotely.\ngh auth login gh repo create git push --set-upstream origin main Check the image below for the options I selected for this guide, again feel free to change names and description to your use-case.\nFinally, create a .gitignore file which allows you to exclude certain files from your repo automatically. I would start with something like the example below.\n#others node_modules .hugo_build.lock # OS generated files .DS_Store .DS_Store? ._* .Spotlight-V100 .Trashes # Hugo public The last step is to save all the changes to the repo.\ngit add . git commit -m “initial commit” git push Create site and configure it # With all the tools ready, creating and configuring your site will be easy. Still within the folder you created in the last section, let’s create an empty Hugo website (with no theme).\nhugo new site --force . Once the scaffolding finishes, try the command below to run your page. Open a browser on https://localhost:1313 to see your site…\nhugo server Ups… Page not found – right? This was expected, even though you created a website, Hugo doesn’t give any default experience – aka your site doesn’t have any page to show.\nNext step, let\u0026rsquo;s install Blowfish using git submodules which will make it easier to manage and upgrade to new versions in the future.\ngit submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish Next, create the following folder structure at the root of your code directory - config/_default/. Now you will need to download these files and place them in _default folder you just created. The final structure should look something like this.\nconfig/_default/ ├─ hugo.toml ├─ languages.en.toml ├─ markup.toml ├─ menus.en.toml └─ params.toml ` Open the hugo.toml and uncomment the line theme = \u0026ldquo;blowfish” and you are ready to go. Try the running the site again and check the result at https://localhost:1313\nhugo server You should see something like the image below. Not much yet as we didn’t add any content, but the main skeleton for Blowfish is already in place - just requires configuration.\nNow let’s configure the theme.\nFYI This guide will not cover in detail what each parameter available in Blowfish does – for everything available and how to use it, check Blowfish documentation for every option in every file. menus.en.toml # This file defines your menu structure, for the top banner and the footer. For this guide, let’s create two menu sections: one for Posts and one for Tags.\nPosts - will display the full list of entries Tags - automatically generated based on tags placed on each article To achieve this, make sure the following entries exist in the menus.en.toml file. Once the changes are done, you should see the menus appearing by re-running hugo server.\n[[main]] name = \u0026#34;Posts\u0026#34; pageRef = \u0026#34;posts\u0026#34; weight = 10 [[main]] name = \u0026#34;Tags\u0026#34; pageRef = \u0026#34;tags\u0026#34; weight = 30 languages.en.toml # This file will configure your main details as the author of the website. Change the section below to reflect your details.\n[author] name = \u0026#34;Your name here\u0026#34; image = \u0026#34;profile.jpg\u0026#34; headline = \u0026#34;I\u0026#39;m only human\u0026#34; bio = \u0026#34;A little bit about you\u0026#34; # appears in author card for each article The images for the website should be placed in the assets folder. For this step, please add a profile picture to that folder named profile.jpg or change the configuration above to the filename you chose. If you don’t have a profile image available, you can use the one below for the tutorial.\nassets/profile.jpg The last step is configuring your links – social media, GitHub, etc. The file includes all the supported options, but they are commented. You are welcome to uncomment everything and delete the ones you would rather not use. Replace the right links on the ones you decided to keep. You can also change the order.\nparams.toml # This is the main configuration file for Blowfish. Most of the visual options or customization available can be configured using it, and it covers several areas of the theme. For this tutorial, I decided to use a background layout - check other layouts for Blowfish’s landing page - with the Neon color scheme - you can pick a different color scheme if you want to - check this list or create your own.\nAdd an image.jpg to the assets folder which will be the background for the site. You can also download the examples I am using in this tutorial.\nassets/image.jpg Now let’s jump into the params.toml and start configuring the file. I will focus only on the values that need to be changed, don’t delete the rest of the file without reading the docs. Let’s begin by making sure that we have the right color scheme, that image optimization is on, and configure the default background image.\ncolorScheme = \u0026#34;neon\u0026#34; disableImageOptimization = false defaultBackgroundImage = \u0026#34;image.jpg\u0026#34; # used as default for background images Next, let\u0026rsquo;s configure our homepage. We’re going with the background layout, configuring the homepage image and recent items. Furthermore, we are using the card view for items in the recent category. Finally, let’s configure the header to be fixed.\n[homepage] layout = \u0026#34;background\u0026#34; # valid options: page, profile, hero, card, background, custom homepageImage = \u0026#34;image.jpg\u0026#34; # used in: hero, and card showRecent = true showRecentItems = 6 showMoreLink = true showMoreLinkDest = \u0026#34;/posts/\u0026#34; cardView = true cardViewScreenWidth = false layoutBackgroundBlur = true # only used when layout equals background [header] layout = \u0026#34;fixed\u0026#34; Now configure how the article and list pages will look. Here are the configurations for those.\n[article] showHero = true heroStyle = \u0026#34;background\u0026#34; showSummary = true showTableOfContents = true showRelatedContent = true relatedContentLimit = 3 [list] showCards = true groupByYear = false cardView = true If you run hugo server again, you should see something like the image below.\nAdding content to your site # Create a folder to place your posts in /content/posts. This was also the directory configured in your menu to list all the articles. Within that folder, let’s create a new directory and give it the name myfirstpost. Within it create an index.md file – your article and place a featured.jpg or .png for in the same directory as the thumbnail for the article. Use the example below to get started. The first lines in the file are the Front Matter, which tell Hugo what the look and experience of the article will be – different themes support different params for this. Check the docs for more info.\n--- title: \u0026#34;My first post\u0026#34; date: 2023-08-14 draft: false summary: \u0026#34;This is my first post on my site\u0026#34; tags: [\u0026#34;space\u0026#34;] --- ## A sub-title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nibh nisl, vulputate eu lacus vitae, maximus molestie libero. Vestibulum laoreet, odio et sollicitudin sollicitudin, quam ligula tempus urna, sed sagittis eros eros ac felis. In tristique tortor vitae lacinia commodo. Mauris venenatis ultrices purus nec fermentum. Nunc sit amet aliquet metus. Morbi nisl felis, gravida ac consequat vitae, blandit eu libero. Curabitur porta est in dui elementum porttitor. Maecenas fermentum, tortor ac feugiat fringilla, orci sem sagittis massa, a congue risus ipsum vel massa. Aliquam sit amet nunc vulputate, facilisis neque in, faucibus nisl. You can create additional articles to see what your site will look like once there is content in it. Your site should look like the images below. The main page shows the recent articles, each article is connected through others automatically via related section, you have tag aggregation, and full-text search.\nShip it # The only thing missing is to ship your site. I will be using Firebase for hosting - it’s a free alternative and provides more advanced features if you are creating something more complex. Go to firebase and create a new project. Once that is done, let’s switch to the CLI as it will make it easier to configure everything.\nLet’s install firebase’s CLI - if not on Mac check install instructions on Firebase.\nbrew install firebase-cli Now log in and init firebase hosting for the project.\nfirebase login firebase init Select hosting and proceed.\nFollow the image below for the options I recommend. Make sure to set up the workflow files for GitHub actions. These will guarantee that your code will be deployed once there is a change to the repo.\nHowever, those files will not work out-of-box, as Hugo requires extra steps for the build to work. Please copy and paste the code blocks below to the respective files within the .github folder, but keep the original projectId in the files generated by firebase.\nfirebase-hosting-merge.yml # # This file was auto-generated by the Firebase CLI # https://github.com/firebase/firebase-tools name: Deploy to Firebase Hosting on merge \u0026#39;on\u0026#39;: push: branches: - main jobs: build_and_deploy: runs-on: ubuntu-latest steps: - name: Hugo setup uses: peaceiris/actions-hugo@v2.6.0 env: ACTIONS_ALLOW_UNSECURE_COMMANDS: \u0026#39;true\u0026#39; - name: Check out code into the Go module directory uses: actions/checkout@v4 with: submodules: true # Fetch Hugo themes (true OR recursive) fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod - name: Build with Hugo env: # For maximum backward compatibility with Hugo modules HUGO_ENVIRONMENT: production HUGO_ENV: production run: hugo -E -F --minify -d public - name: Deploy Production uses: FirebaseExtended/action-hosting-deploy@v0 with: repoToken: \u0026#39;${{ secrets.GITHUB_TOKEN }}\u0026#39; firebaseServiceAccount: \u0026#39;${{ secrets.FIREBASE_SERVICE_ACCOUNT_BLOWFISH_TUTORIAL }}\u0026#39; channelId: live projectId: blowfish-tutorial firebase-hosting-pull-request.yml # # This file was auto-generated by the Firebase CLI # https://github.com/firebase/firebase-tools name: Deploy to Firebase Hosting on PR \u0026#39;on\u0026#39;: pull_request jobs: build_and_preview: if: \u0026#39;${{ github.event.pull_request.head.repo.full_name == github.repository }}\u0026#39; runs-on: ubuntu-latest steps: - name: Hugo setup uses: peaceiris/actions-hugo@v2.6.0 env: ACTIONS_ALLOW_UNSECURE_COMMANDS: \u0026#39;true\u0026#39; - name: Check out code into the Go module directory uses: actions/checkout@v4 with: submodules: true # Fetch Hugo themes (true OR recursive) fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod - name: Build with Hugo env: # For maximum backward compatibility with Hugo modules HUGO_ENVIRONMENT: production HUGO_ENV: production run: hugo -E -F --minify -d public - name: Deploy preview uses: FirebaseExtended/action-hosting-deploy@v0 with: repoToken: \u0026#39;${{ secrets.GITHUB_TOKEN }}\u0026#39; firebaseServiceAccount: \u0026#39;${{ secrets.FIREBASE_SERVICE_ACCOUNT_BLOWFISH_TUTORIAL }}\u0026#39; expires: 30d channelId: preview-${{ github.event.number }} projectId: blowfish-tutorial The last step is committing your code to GitHub and let the workflows you created take care of deploying your site. Since we configured GitHub actions, this will trigger a job that will configure and deploy your site automatically.\ngit add . git commit -m \u0026#34;add github actions workflows\u0026#34; git push If the actions tab for your repo, you should see something like this.\nOnce all the steps finish, your Firebase console should show something like the image below - including the links to see your app – I got a version of this tutorial running on https://blowfish-tutorial.web.app/.\nConclusion and Next Steps # Now you have your first version of your homepage. You can make changes locally and once you commit your code they will automatically be reflected online. What shall you do next? I’ll leave you with some useful links to get you inspired and learn more about Blowfish and Hugo.\nhttps://blowfish.page/docs/ https://blowfish.page/docs/configuration/ https://blowfish.page/docs/shortcodes/ https://blowfish.page/examples/ https://blowfish.page/users/ https://gohugo.io/documentation/ ","date":"4 October 2023","externalUrl":"https://n9o.xyz/posts/202310-blowfish-tutorial/","permalink":"/guides/202310-blowfish-tutorial/","section":"Recipes","summary":"Just one year ago, I created Blowfish, a Hugo theme crafted to build my unique vision for my personal homepage. I also decided to make it an open-source project. Fast-forward to today, and Blowfish has transformed into a thriving open-source project with over 600 stars on GitHub and a user base of hundreds. In this tutorial, I’ll show you how to get started and have your website running in a couple of minutes.","title":"Build your homepage using Blowfish and Hugo","type":"guides"},{"content":"","date":"4 October 2023","externalUrl":null,"permalink":"/categories/","section":"Categories","summary":"","title":"Categories","type":"categories"},{"content":"","date":"4 October 2023","externalUrl":null,"permalink":"/tags/hugo/","section":"Tags","summary":"","title":"Hugo","type":"tags"},{"content":"Nuno\u0026rsquo;s awesome dummy bio.\n","date":"4 October 2023","externalUrl":null,"permalink":"/authors/nunocoracao/","section":"Authors Taxonomy Listing Example","summary":"Nuno’s awesome dummy bio.\n","title":"Nuno Coração","type":"authors"},{"content":"","date":"4 October 2023","externalUrl":null,"permalink":"/categories/open-source/","section":"Categories","summary":"","title":"Open-Source","type":"categories"},{"content":" Recipes, guides, and tutorials for Blowfish Blowfish user? To add your guide to this list, check the template.\nThis section contains guides for a variety of scenarios on how to configure your theme. If you\u0026rsquo;re new, check out the Installation guide to begin or visit the Samples section to see what Blowfish can do.\n","date":"4 October 2023","externalUrl":null,"permalink":"/guides/","section":"Recipes","summary":" Recipes, guides, and tutorials for Blowfish Blowfish user? To add your guide to this list, check the template.\nThis section contains guides for a variety of scenarios on how to configure your theme. If you’re new, check out the Installation guide to begin or visit the Samples section to see what Blowfish can do.\n","title":"Recipes","type":"guides"},{"content":"Blowfish has full support for Hugo taxonomies and will adapt to any taxonomy set up. Taxonomy listings like this one also support custom content to be displayed above the list of terms.\nThis area could be used to add some extra descriptive text to each taxonomy. Check out the advanced tag below to see how to take this concept even further.\n","date":"4 October 2023","externalUrl":null,"permalink":"/tags/","section":"Tags","summary":"Blowfish has full support for Hugo taxonomies and will adapt to any taxonomy set up. Taxonomy listings like this one also support custom content to be displayed above the list of terms.\n","title":"Tags","type":"tags"},{"content":"","date":"4 October 2023","externalUrl":null,"permalink":"/tags/tutorial/","section":"Tags","summary":"","title":"Tutorial","type":"tags"},{"content":"","date":"4 October 2023","externalUrl":null,"permalink":"/","section":"Welcome to OPC! 🎉","summary":"","title":"Welcome to OPC! 🎉","type":"page"},{"content":"","date":"2023-10-04","externalUrl":null,"permalink":"/zh-cn/categories/%E5%BC%80%E6%BA%90/","section":"Categories","summary":"","title":"开源","type":"categories"},{"content":"","date":"2023-10-04","externalUrl":null,"permalink":"/zh-cn/tags/%E6%8C%87%E5%8D%97/","section":"标签","summary":"","title":"指南","type":"tags"},{"content":"","date":"2 October 2023","externalUrl":"https://blowfish-tutorial.web.app/","permalink":"/examples/blowfish-tutorial/_index.de/","section":"Showcase","summary":"","title":"Blowfish Tutorial","type":"examples"},{"content":"","date":"2 October 2023","externalUrl":"https://blowfish-tutorial.web.app/","permalink":"/examples/blowfish-tutorial/_index.es/","section":"Showcase","summary":"","title":"Blowfish Tutorial","type":"examples"},{"content":"","date":"2 October 2023","externalUrl":"https://blowfish-tutorial.web.app/","permalink":"/examples/blowfish-tutorial/_index.fr/","section":"Showcase","summary":"","title":"Blowfish Tutorial","type":"examples"},{"content":"","date":"2 October 2023","externalUrl":"https://blowfish-tutorial.web.app/","permalink":"/examples/blowfish-tutorial/_index.it/","section":"Showcase","summary":"","title":"Blowfish Tutorial","type":"examples"},{"content":"","date":"2 October 2023","externalUrl":"https://blowfish-tutorial.web.app/","permalink":"/examples/blowfish-tutorial/","section":"Showcase","summary":"","title":"Blowfish Tutorial","type":"examples"},{"content":"","date":"2 October 2023","externalUrl":"https://blowfish-tutorial.web.app/","permalink":"/examples/blowfish-tutorial/_index.pt-br/","section":"Showcase","summary":"","title":"Blowfish Tutorial","type":"examples"},{"content":"","date":"2 October 2023","externalUrl":"https://blowfish-tutorial.web.app/","permalink":"/examples/blowfish-tutorial/_index.pt-pt/","section":"Showcase","summary":"","title":"Blowfish Tutorial","type":"examples"},{"content":"","date":"2 October 2023","externalUrl":"https://blowfish-tutorial.web.app/","permalink":"/examples/blowfish-tutorial/_index.ja/","section":"Showcase","summary":"","title":"Blowfish チュートリアル","type":"examples"},{"content":" See what\u0026rsquo;s possible with Blowfish. This section contains links to example templates and pages created using Blowfish to get you inspired.\n","date":"2 October 2023","externalUrl":null,"permalink":"/examples/","section":"Showcase","summary":" See what’s possible with Blowfish. This section contains links to example templates and pages created using Blowfish to get you inspired.\n","title":"Showcase","type":"examples"},{"content":"","date":"1 October 2023","externalUrl":"https://github.com/nunocoracao/blowfish-tutorial","permalink":"/examples/repo-blowfish-tutorial/_index.fr/","section":"Showcase","summary":"","title":"Blowfish Tutorial - Dépôt","type":"examples"},{"content":"","date":"1 October 2023","externalUrl":"https://github.com/nunocoracao/blowfish-tutorial","permalink":"/examples/repo-blowfish-tutorial/_index.de/","section":"Showcase","summary":"","title":"Blowfish Tutorial - Repo","type":"examples"},{"content":"","date":"1 October 2023","externalUrl":"https://github.com/nunocoracao/blowfish-tutorial","permalink":"/examples/repo-blowfish-tutorial/_index.it/","section":"Showcase","summary":"","title":"Blowfish Tutorial - Repo","type":"examples"},{"content":"","date":"1 October 2023","externalUrl":"https://github.com/nunocoracao/blowfish-tutorial","permalink":"/examples/repo-blowfish-tutorial/","section":"Showcase","summary":"","title":"Blowfish Tutorial - Repo","type":"examples"},{"content":"","date":"1 October 2023","externalUrl":"https://github.com/nunocoracao/blowfish-tutorial","permalink":"/examples/repo-blowfish-tutorial/_index.es/","section":"Showcase","summary":"","title":"Blowfish Tutorial - Repositorio","type":"examples"},{"content":"","date":"1 October 2023","externalUrl":"https://github.com/nunocoracao/blowfish-tutorial","permalink":"/examples/repo-blowfish-tutorial/_index.pt-br/","section":"Showcase","summary":"","title":"Blowfish Tutorial - Repositório","type":"examples"},{"content":"","date":"1 October 2023","externalUrl":"https://github.com/nunocoracao/blowfish-tutorial","permalink":"/examples/repo-blowfish-tutorial/_index.pt-pt/","section":"Showcase","summary":"","title":"Blowfish Tutorial - Repositório","type":"examples"},{"content":"","date":"1 October 2023","externalUrl":"https://github.com/nunocoracao/blowfish-tutorial","permalink":"/examples/repo-blowfish-tutorial/_index.ja/","section":"Showcase","summary":"","title":"Blowfish チュートリアル - レポジトリ","type":"examples"},{"content":"","date":"7 November 2022","externalUrl":"https://nunocoracao.github.io/blowfish_lite/","permalink":"/examples/blowfish-lite/_index.de/","section":"Showcase","summary":"","title":"Blowfish Lite","type":"examples"},{"content":"","date":"7 November 2022","externalUrl":"https://nunocoracao.github.io/blowfish_lite/","permalink":"/examples/blowfish-lite/_index.es/","section":"Showcase","summary":"","title":"Blowfish Lite","type":"examples"},{"content":"","date":"7 November 2022","externalUrl":"https://nunocoracao.github.io/blowfish_lite/","permalink":"/examples/blowfish-lite/_index.fr/","section":"Showcase","summary":"","title":"Blowfish Lite","type":"examples"},{"content":"","date":"7 November 2022","externalUrl":"https://nunocoracao.github.io/blowfish_lite/","permalink":"/examples/blowfish-lite/_index.it/","section":"Showcase","summary":"","title":"Blowfish Lite","type":"examples"},{"content":"","date":"7 November 2022","externalUrl":"https://nunocoracao.github.io/blowfish_lite/","permalink":"/examples/blowfish-lite/_index.ja/","section":"Showcase","summary":"","title":"Blowfish Lite","type":"examples"},{"content":"","date":"7 November 2022","externalUrl":"https://nunocoracao.github.io/blowfish_lite/","permalink":"/examples/blowfish-lite/","section":"Showcase","summary":"","title":"Blowfish Lite","type":"examples"},{"content":"","date":"7 November 2022","externalUrl":"https://nunocoracao.github.io/blowfish_lite/","permalink":"/examples/blowfish-lite/_index.pt-br/","section":"Showcase","summary":"","title":"Blowfish Lite","type":"examples"},{"content":"","date":"7 November 2022","externalUrl":"https://nunocoracao.github.io/blowfish_lite/","permalink":"/examples/blowfish-lite/_index.pt-pt/","section":"Showcase","summary":"","title":"Blowfish Lite","type":"examples"},{"content":"","date":"6 November 2022","externalUrl":"https://nunocoracao.github.io/blowfish_artist/","permalink":"/examples/blowfish-artist/_index.de/","section":"Showcase","summary":"","title":"Blowfish Artist","type":"examples"},{"content":"","date":"6 November 2022","externalUrl":"https://nunocoracao.github.io/blowfish_artist/","permalink":"/examples/blowfish-artist/_index.es/","section":"Showcase","summary":"","title":"Blowfish Artist","type":"examples"},{"content":"","date":"6 November 2022","externalUrl":"https://nunocoracao.github.io/blowfish_artist/","permalink":"/examples/blowfish-artist/_index.fr/","section":"Showcase","summary":"","title":"Blowfish Artist","type":"examples"},{"content":"","date":"6 November 2022","externalUrl":"https://nunocoracao.github.io/blowfish_artist/","permalink":"/examples/blowfish-artist/_index.it/","section":"Showcase","summary":"","title":"Blowfish Artist","type":"examples"},{"content":"","date":"6 November 2022","externalUrl":"https://nunocoracao.github.io/blowfish_artist/","permalink":"/examples/blowfish-artist/_index.ja/","section":"Showcase","summary":"","title":"Blowfish Artist","type":"examples"},{"content":"","date":"6 November 2022","externalUrl":"https://nunocoracao.github.io/blowfish_artist/","permalink":"/examples/blowfish-artist/","section":"Showcase","summary":"","title":"Blowfish Artist","type":"examples"},{"content":"","date":"6 November 2022","externalUrl":"https://nunocoracao.github.io/blowfish_artist/","permalink":"/examples/blowfish-artist/_index.pt-br/","section":"Showcase","summary":"","title":"Blowfish Artist","type":"examples"},{"content":"","date":"6 November 2022","externalUrl":"https://nunocoracao.github.io/blowfish_artist/","permalink":"/examples/blowfish-artist/_index.pt-pt/","section":"Showcase","summary":"","title":"Blowfish Artist","type":"examples"},{"content":"","date":"6 November 2022","externalUrl":"https://nunocoracao.github.io/blowfish_lowkey/","permalink":"/examples/blowfish-lowkey/_index.de/","section":"Showcase","summary":"","title":"Blowfish Lowkey","type":"examples"},{"content":"","date":"6 November 2022","externalUrl":"https://nunocoracao.github.io/blowfish_lowkey/","permalink":"/examples/blowfish-lowkey/_index.es/","section":"Showcase","summary":"","title":"Blowfish Lowkey","type":"examples"},{"content":"","date":"6 November 2022","externalUrl":"https://nunocoracao.github.io/blowfish_lowkey/","permalink":"/examples/blowfish-lowkey/_index.fr/","section":"Showcase","summary":"","title":"Blowfish Lowkey","type":"examples"},{"content":"","date":"6 November 2022","externalUrl":"https://nunocoracao.github.io/blowfish_lowkey/","permalink":"/examples/blowfish-lowkey/_index.it/","section":"Showcase","summary":"","title":"Blowfish Lowkey","type":"examples"},{"content":"","date":"6 November 2022","externalUrl":"https://nunocoracao.github.io/blowfish_lowkey/","permalink":"/examples/blowfish-lowkey/_index.ja/","section":"Showcase","summary":"","title":"Blowfish Lowkey","type":"examples"},{"content":"","date":"6 November 2022","externalUrl":"https://nunocoracao.github.io/blowfish_lowkey/","permalink":"/examples/blowfish-lowkey/","section":"Showcase","summary":"","title":"Blowfish Lowkey","type":"examples"},{"content":"","date":"6 November 2022","externalUrl":"https://nunocoracao.github.io/blowfish_lowkey/","permalink":"/examples/blowfish-lowkey/_index.pt-br/","section":"Showcase","summary":"","title":"Blowfish Lowkey","type":"examples"},{"content":"","date":"6 November 2022","externalUrl":"https://nunocoracao.github.io/blowfish_lowkey/","permalink":"/examples/blowfish-lowkey/_index.pt-pt/","section":"Showcase","summary":"","title":"Blowfish Lowkey","type":"examples"},{"content":"","date":"12 October 2022","externalUrl":null,"permalink":"/tags/authors/","section":"Tags","summary":"","title":"Authors","type":"tags"},{"content":"Dummy Second Author\u0026rsquo;s awesome dummy bio.\n","date":"12 October 2022","externalUrl":null,"permalink":"/authors/secondauthor/","section":"Authors Taxonomy Listing Example","summary":"Dummy Second Author’s awesome dummy bio.\n","title":"Dummy Second Author","type":"authors"},{"content":"This is an example of how an article with multiple authors will look like.\n","date":"12 October 2022","externalUrl":null,"permalink":"/samples/multiple-authors/","section":"Samples","summary":"A quick example of how multiple authors could be used.","title":"Multiple Authors","type":"sample"},{"content":"","date":"12 October 2022","externalUrl":null,"permalink":"/tags/sample/","section":"Tags","summary":"","title":"Sample","type":"tags"},{"content":" Blowfish brings your content to life. \u0026#x1f60d; This section contains some demo pages that show how Blowfish renders different types of content. You can also see an example taxonomy listing page.\nSidenote: This page is just a standard Blowfish article listing and Hugo has been configured to generate a samples content type and display article summaries.\n","date":"12 October 2022","externalUrl":null,"permalink":"/samples/","section":"Samples","summary":" Blowfish brings your content to life. 😍 This section contains some demo pages that show how Blowfish renders different types of content. You can also see an example taxonomy listing page.\n","title":"Samples","type":"samples"},{"content":"","date":"2022-10-12","externalUrl":null,"permalink":"/zh-cn/tags/%E4%BD%9C%E8%80%85/","section":"标签","summary":"","title":"作者","type":"tags"},{"content":"","date":"2022-10-12","externalUrl":null,"permalink":"/zh-cn/tags/%E7%A4%BA%E4%BE%8B/","section":"标签","summary":"","title":"示例","type":"tags"},{"content":"","date":"26 September 2022","externalUrl":null,"permalink":"/tags/thumbnail/","section":"Tags","summary":"","title":"Thumbnail","type":"tags"},{"content":"A quick example of how to start using Thumbnails in your articles.\nIf your average directory for an article looks like this:\ncontent └── awesome_article.md You need to change it from a single markdown file into a folder. Create a directory with the same name of the article, inside create a index.md file. You\u0026rsquo;ll get a structure similar to what\u0026rsquo;s below.\ncontent └── awesome_article └── featured.png Inside the article you can now add an image file (almost all formats are supported but we recommend .png or .jpg) that starts with feature*. Example below.\ncontent └── awesome_article ├── index.md └── featured.png This will tell Blowfish that this article has a feature image that can be used both as a thumbnail across your website as well as for oEmbed cards across social platforms. As an example, you can try copy pasting the URL of this article into a platform that shows oEmbeds (e.g. Twitter, WhatsApp, Telegram, etc) and see what is displayed.\n","date":"26 September 2022","externalUrl":null,"permalink":"/samples/thumbnail_sample/","section":"Samples","summary":"A quick example of how to start using Thumbnails in your artciles.","title":"Thumbnails","type":"sample"},{"content":"","date":"2022-09-26","externalUrl":null,"permalink":"/zh-cn/tags/%E7%BC%A9%E7%95%A5%E5%9B%BE/","section":"标签","summary":"","title":"缩略图","type":"tags"},{"content":"","date":"7 November 2021","externalUrl":"https://github.com/nunocoracao/blowfish_lite/","permalink":"/examples/repo-blowfish-lite/_index.fr/","section":"Showcase","summary":"","title":"Blowfish Lite - Dépôt","type":"examples"},{"content":"","date":"7 November 2021","externalUrl":"https://github.com/nunocoracao/blowfish_lite/","permalink":"/examples/repo-blowfish-lite/_index.de/","section":"Showcase","summary":"","title":"Blowfish Lite - Repo","type":"examples"},{"content":"","date":"7 November 2021","externalUrl":"https://github.com/nunocoracao/blowfish_lite/","permalink":"/examples/repo-blowfish-lite/_index.it/","section":"Showcase","summary":"","title":"Blowfish Lite - Repo","type":"examples"},{"content":"","date":"7 November 2021","externalUrl":"https://github.com/nunocoracao/blowfish_lite/","permalink":"/examples/repo-blowfish-lite/","section":"Showcase","summary":"","title":"Blowfish Lite - Repo","type":"examples"},{"content":"","date":"7 November 2021","externalUrl":"https://github.com/nunocoracao/blowfish_lite/","permalink":"/examples/repo-blowfish-lite/_index.es/","section":"Showcase","summary":"","title":"Blowfish Lite - Repositorio","type":"examples"},{"content":"","date":"7 November 2021","externalUrl":"https://github.com/nunocoracao/blowfish_lite/","permalink":"/examples/repo-blowfish-lite/_index.pt-br/","section":"Showcase","summary":"","title":"Blowfish Lite - Repositório","type":"examples"},{"content":"","date":"7 November 2021","externalUrl":"https://github.com/nunocoracao/blowfish_lite/","permalink":"/examples/repo-blowfish-lite/_index.pt-pt/","section":"Showcase","summary":"","title":"Blowfish Lite - Repositório","type":"examples"},{"content":"","date":"7 November 2021","externalUrl":"https://github.com/nunocoracao/blowfish_lite/","permalink":"/examples/repo-blowfish-lite/_index.ja/","section":"Showcase","summary":"","title":"Blowfish Lite - レポジトリ","type":"examples"},{"content":"","date":"6 November 2021","externalUrl":"https://github.com/nunocoracao/blowfish_artist/","permalink":"/examples/repo-blowfish-artist/_index.fr/","section":"Showcase","summary":"","title":"Blowfish Artist - Dépôt","type":"examples"},{"content":"","date":"6 November 2021","externalUrl":"https://github.com/nunocoracao/blowfish_artist/","permalink":"/examples/repo-blowfish-artist/_index.de/","section":"Showcase","summary":"","title":"Blowfish Artist - Repo","type":"examples"},{"content":"","date":"6 November 2021","externalUrl":"https://github.com/nunocoracao/blowfish_artist/","permalink":"/examples/repo-blowfish-artist/_index.it/","section":"Showcase","summary":"","title":"Blowfish Artist - Repo","type":"examples"},{"content":"","date":"6 November 2021","externalUrl":"https://github.com/nunocoracao/blowfish_artist/","permalink":"/examples/repo-blowfish-artist/","section":"Showcase","summary":"","title":"Blowfish Artist - Repo","type":"examples"},{"content":"","date":"6 November 2021","externalUrl":"https://github.com/nunocoracao/blowfish_artist/","permalink":"/examples/repo-blowfish-artist/_index.es/","section":"Showcase","summary":"","title":"Blowfish Artist - Repositorio","type":"examples"},{"content":"","date":"6 November 2021","externalUrl":"https://github.com/nunocoracao/blowfish_artist/","permalink":"/examples/repo-blowfish-artist/_index.pt-br/","section":"Showcase","summary":"","title":"Blowfish Artist - Repositório","type":"examples"},{"content":"","date":"6 November 2021","externalUrl":"https://github.com/nunocoracao/blowfish_artist/","permalink":"/examples/repo-blowfish-artist/_index.pt-pt/","section":"Showcase","summary":"","title":"Blowfish Artist - Repositório","type":"examples"},{"content":"","date":"6 November 2021","externalUrl":"https://github.com/nunocoracao/blowfish_artist/","permalink":"/examples/repo-blowfish-artist/_index.ja/","section":"Showcase","summary":"","title":"Blowfish Artist - レポジトリ","type":"examples"},{"content":"","date":"6 November 2021","externalUrl":"https://github.com/nunocoracao/blowfish_lowkey/","permalink":"/examples/repo-blowfish-lowkey/_index.fr/","section":"Showcase","summary":"","title":"Blowfish Lowkey - Dépôt","type":"examples"},{"content":"","date":"6 November 2021","externalUrl":"https://github.com/nunocoracao/blowfish_lowkey/","permalink":"/examples/repo-blowfish-lowkey/_index.de/","section":"Showcase","summary":"","title":"Blowfish Lowkey - Repo","type":"examples"},{"content":"","date":"6 November 2021","externalUrl":"https://github.com/nunocoracao/blowfish_lowkey/","permalink":"/examples/repo-blowfish-lowkey/_index.it/","section":"Showcase","summary":"","title":"Blowfish Lowkey - Repo","type":"examples"},{"content":"","date":"6 November 2021","externalUrl":"https://github.com/nunocoracao/blowfish_lowkey/","permalink":"/examples/repo-blowfish-lowkey/","section":"Showcase","summary":"","title":"Blowfish Lowkey - Repo","type":"examples"},{"content":"","date":"6 November 2021","externalUrl":"https://github.com/nunocoracao/blowfish_lowkey/","permalink":"/examples/repo-blowfish-lowkey/_index.es/","section":"Showcase","summary":"","title":"Blowfish Lowkey - Repositorio","type":"examples"},{"content":"","date":"6 November 2021","externalUrl":"https://github.com/nunocoracao/blowfish_lowkey/","permalink":"/examples/repo-blowfish-lowkey/_index.pt-br/","section":"Showcase","summary":"","title":"Blowfish Lowkey - Repositório","type":"examples"},{"content":"","date":"6 November 2021","externalUrl":"https://github.com/nunocoracao/blowfish_lowkey/","permalink":"/examples/repo-blowfish-lowkey/_index.pt-pt/","section":"Showcase","summary":"","title":"Blowfish Lowkey - Repositório","type":"examples"},{"content":"","date":"6 November 2021","externalUrl":"https://github.com/nunocoracao/blowfish_lowkey/","permalink":"/examples/repo-blowfish-lowkey/_index.ja/","section":"Showcase","summary":"","title":"Blowfish Lowkey - レポジトリ","type":"examples"},{"content":"","date":"6 November 2020","externalUrl":"https://nunocoracao.github.io/blowfish_template/","permalink":"/examples/blowfish-template/_index.de/","section":"Showcase","summary":"","title":"Blowfish Template","type":"examples"},{"content":"","date":"6 November 2020","externalUrl":"https://nunocoracao.github.io/blowfish_template/","permalink":"/examples/blowfish-template/_index.es/","section":"Showcase","summary":"","title":"Blowfish Template","type":"examples"},{"content":"","date":"6 November 2020","externalUrl":"https://nunocoracao.github.io/blowfish_template/","permalink":"/examples/blowfish-template/_index.fr/","section":"Showcase","summary":"","title":"Blowfish Template","type":"examples"},{"content":"","date":"6 November 2020","externalUrl":"https://nunocoracao.github.io/blowfish_template/","permalink":"/examples/blowfish-template/_index.it/","section":"Showcase","summary":"","title":"Blowfish Template","type":"examples"},{"content":"","date":"6 November 2020","externalUrl":"https://nunocoracao.github.io/blowfish_template/","permalink":"/examples/blowfish-template/","section":"Showcase","summary":"","title":"Blowfish Template","type":"examples"},{"content":"","date":"6 November 2020","externalUrl":"https://nunocoracao.github.io/blowfish_template/","permalink":"/examples/blowfish-template/_index.pt-br/","section":"Showcase","summary":"","title":"Blowfish Template","type":"examples"},{"content":"","date":"6 November 2020","externalUrl":"https://nunocoracao.github.io/blowfish_template/","permalink":"/examples/blowfish-template/_index.pt-pt/","section":"Showcase","summary":"","title":"Blowfish Template","type":"examples"},{"content":"","date":"6 November 2020","externalUrl":"https://github.com/nunocoracao/blowfish_template","permalink":"/examples/blowfish-template-repo/_index.fr/","section":"Showcase","summary":"","title":"Blowfish Template - Dépôt GitHub","type":"examples"},{"content":"","date":"6 November 2020","externalUrl":"https://github.com/nunocoracao/blowfish_template","permalink":"/examples/blowfish-template-repo/_index.de/","section":"Showcase","summary":"","title":"Blowfish Template - GitHub Repo","type":"examples"},{"content":"","date":"6 November 2020","externalUrl":"https://github.com/nunocoracao/blowfish_template","permalink":"/examples/blowfish-template-repo/_index.it/","section":"Showcase","summary":"","title":"Blowfish Template - GitHub Repo","type":"examples"},{"content":"","date":"6 November 2020","externalUrl":"https://github.com/nunocoracao/blowfish_template","permalink":"/examples/blowfish-template-repo/","section":"Showcase","summary":"","title":"Blowfish Template - GitHub Repo","type":"examples"},{"content":"","date":"6 November 2020","externalUrl":"https://github.com/nunocoracao/blowfish_template","permalink":"/examples/blowfish-template-repo/_index.es/","section":"Showcase","summary":"","title":"Blowfish Template - Repositorio GitHub","type":"examples"},{"content":"","date":"6 November 2020","externalUrl":"https://github.com/nunocoracao/blowfish_template","permalink":"/examples/blowfish-template-repo/_index.pt-br/","section":"Showcase","summary":"","title":"Blowfish Template - Repositório GitHub","type":"examples"},{"content":"","date":"6 November 2020","externalUrl":"https://github.com/nunocoracao/blowfish_template","permalink":"/examples/blowfish-template-repo/_index.pt-pt/","section":"Showcase","summary":"","title":"Blowfish Template - Repositório GitHub","type":"examples"},{"content":"","date":"6 November 2020","externalUrl":"https://nunocoracao.github.io/blowfish_template/","permalink":"/examples/blowfish-template/_index.ja/","section":"Showcase","summary":"","title":"Blowfish テンプレート","type":"examples"},{"content":"","date":"6 November 2020","externalUrl":"https://github.com/nunocoracao/blowfish_template","permalink":"/examples/blowfish-template-repo/_index.ja/","section":"Showcase","summary":"","title":"Blowfish テンプレート - GitHub レポジトリ","type":"examples"},{"content":"Blowfish has built-in support for a number of FontAwesome 6 icons. These can be included in your website through either the icon partial or icon shortcode.\nAdditionally, custom icons are also fully supported. Simply provide your own SVG icon assets by placing them in the assets/icons/ directory in the root of your project. Any icons in the icons directory will then be available to use throughout the theme. In order to achieve automatic color filling, every SVG path needs the fill=\u0026quot;currentColor\u0026quot; XML attribute.\nThe full list of built-in icons and their corresponding names can referenced below.\nIcon name Preview a11y amazon apple bars bell blogger bluesky bomb bug check chevron-down circle-info circle-question cloud-moon cloud code codeberg \u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e codepen comment dev discord discourse docker download dribbble edit email envelope expand eye facebook fediverse \u003c?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?\u003e file-lines fire flickr forgejo fork foursquare ghost gitea github gitlab globe goodreads google-scholar google graduation-cap hackernews hashnode heart-empty heart image instagram itch-io keybase keyoxide kickstarter ko-fi \u003c?xml version=\"1.0\" encoding=\"UTF-8\"?\u003e language lastfm lightbulb line link linkedin list-check list-ol list location-dot lock mastodon matrix Matrix medium microsoft moon mug-hot music orcid patreon paypal peertube pencil pgpkey phone pinterest pixelfed poo printables quote-left reddit researchgate rss-square rss scale-balanced search shield signal skull-crossbones slack snapchat soundcloud spotify stack-overflow star steam stripe substack sun tag telegram threads tiktok triangle-exclamation tumblr twitch twitter wand-magic-sparkles whatsapp worktree x-twitter xing Xing xmark youtube ","date":"14 August 2020","externalUrl":null,"permalink":"/samples/icons/","section":"Samples","summary":"Blowfish has built-in support for a number of FontAwesome 6 icons. These can be included in your website through either the icon partial or icon shortcode.\nAdditionally, custom icons are also fully supported. Simply provide your own SVG icon assets by placing them in the assets/icons/ directory in the root of your project. Any icons in the icons directory will then be available to use throughout the theme. In order to achieve automatic color filling, every SVG path needs the fill=\"currentColor\" XML attribute.\n","title":"Icons","type":"sample"},{"content":"","date":"14 August 2020","externalUrl":null,"permalink":"/tags/icons/","section":"Tags","summary":"","title":"Icons","type":"tags"},{"content":"","date":"14 August 2020","externalUrl":null,"permalink":"/tags/shortcodes/","section":"Tags","summary":"","title":"Shortcodes","type":"tags"},{"content":"","date":"2020-08-14","externalUrl":null,"permalink":"/zh-cn/tags/%E5%9B%BE%E6%A0%87/","section":"标签","summary":"","title":"图标","type":"tags"},{"content":"","date":"2020-08-14","externalUrl":null,"permalink":"/zh-cn/tags/%E7%AE%80%E7%A0%81/","section":"标签","summary":"","title":"简码","type":"tags"},{"content":"","date":"11 March 2019","externalUrl":null,"permalink":"/tags/css/","section":"Tags","summary":"","title":"Css","type":"tags"},{"content":"","date":"11 March 2019","externalUrl":null,"permalink":"/tags/html/","section":"Tags","summary":"","title":"Html","type":"tags"},{"content":"This article offers a sample of basic Markdown formatting that can be used in Blowfish, also it shows how some basic HTML elements are decorated.\nHeadings # The following HTML \u0026lt;h1\u0026gt;—\u0026lt;h6\u0026gt; elements represent six levels of section headings. \u0026lt;h1\u0026gt; is the highest section level while \u0026lt;h6\u0026gt; is the lowest.\nH1 # H2 # H3 # H4 # H5 # H6 # Paragraph # Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.\nItatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.\nBlockquotes # The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.\nBlockquote without attribution # Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.\nBlockquote with attribution # Don\u0026rsquo;t communicate by sharing memory, share memory by communicating.\n— Rob Pike1\nTables # Tables aren\u0026rsquo;t part of the core Markdown spec, but Hugo supports supports them out-of-the-box.\nName Age Bob 27 Alice 23 Inline Markdown within tables # Italics Bold Code italics bold code Code Blocks # General code block # \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html lang=\u0026#34;en\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34; /\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Code block with title and line highlight # example.html 1\u0026lt;!DOCTYPE html\u0026gt; 2\u0026lt;html lang=\u0026#34;en\u0026#34;\u0026gt; 3\u0026lt;head\u0026gt; 4 \u0026lt;meta charset=\u0026#34;utf-8\u0026#34;\u0026gt; 5 \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; 6\u0026lt;/head\u0026gt; 7\u0026lt;body\u0026gt; 8 \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; 9\u0026lt;/body\u0026gt; 10\u0026lt;/html\u0026gt; List Types # Ordered List # First item Second item Third item Unordered List # List item Another item And another item Nested list # Fruit Apple Orange Banana Dairy Milk Cheese Other Elements — abbr, sub, sup, kbd, mark # GIF is a bitmap image format.\nH2O\nXn + Yn = Zn\nPress CTRL+ALT+Delete to end the session.\nMost salamanders are nocturnal, and hunt for insects, worms, and other small creatures.\nImages # In addition to the Figure Shortcode, you can define images using the following Markdown syntax:\n![Alt text](image.jpg \u0026#34;Image caption\u0026#34;) Image caption You can also leverage Hugos \u0026lsquo;Markdown attributes\u0026rsquo; feature to add custom attributes to the created HTML element. For example, to set the width of an image to 50%:\n![Alt text](image.jpg \u0026#34;Image caption\u0026#34;) {style=\u0026#34;width:50%;\u0026#34;} Half width image caption Note that the \u0026lsquo;Markdown attributes\u0026rsquo; feature requires configuration of the Goldmark renderer. See the Hugo documentation for more information.\nThe above quote is excerpted from Rob Pike\u0026rsquo;s talk about nothing during Gopherfest, November 18, 2015.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","date":"11 March 2019","externalUrl":null,"permalink":"/samples/markdown/","section":"Samples","summary":"This article offers a sample of basic Markdown formatting that can be used in Blowfish, also it shows how some basic HTML elements are decorated.\n","title":"Markdown","type":"sample"},{"content":"","date":"11 March 2019","externalUrl":null,"permalink":"/tags/markdown/","section":"Tags","summary":"","title":"Markdown","type":"tags"},{"content":"","date":"10 March 2019","externalUrl":null,"permalink":"/tags/gist/","section":"Tags","summary":"","title":"Gist","type":"tags"},{"content":"","date":"10 March 2019","externalUrl":null,"permalink":"/tags/privacy/","section":"Tags","summary":"","title":"Privacy","type":"tags"},{"content":"Hugo ships with several built-in shortcodes for rich content, along with a privacy config and a set of simple shortcodes that enable static and no-JS versions of various social media embeds.\nYouTube # Below is an example using the built-in youtube shortcode.\nTwitter # This example uses the x shortcode to output a Tweet. It requires two named parameters user and id.\n“In addition to being more logical, asymmetry has the advantage that its complete appearance is far more optically effective than symmetry.”\n— Jan Tschichold pic.twitter.com/gcv7SrhvJb\n\u0026mdash; Design Reviewed | Graphic Design History (@DesignReviewed) January 17, 2019 Alternatively, the tweet shortcode can be used to embed a fully marked up Twitter card.\nGist # The gist shortcode can be used to embed a GitHub Gist. It requires two unnamed parameters: the username and ID of the Gist.\nVimeo # The vimeo_simple shortcode will embed a Vimeo video.\n","date":"10 March 2019","externalUrl":null,"permalink":"/samples/rich-content/","section":"Samples","summary":"This is an example of a rich content summary.","title":"Rich Content","type":"sample"},{"content":"","date":"10 March 2019","externalUrl":null,"permalink":"/tags/twitter/","section":"Tags","summary":"","title":"Twitter","type":"tags"},{"content":"","date":"10 March 2019","externalUrl":null,"permalink":"/tags/vimeo/","section":"Tags","summary":"","title":"Vimeo","type":"tags"},{"content":"","date":"10 March 2019","externalUrl":null,"permalink":"/tags/youtube/","section":"Tags","summary":"","title":"Youtube","type":"tags"},{"content":"","date":"2019-03-10","externalUrl":null,"permalink":"/zh-cn/tags/%E9%9A%90%E7%A7%81/","section":"标签","summary":"","title":"隐私","type":"tags"},{"content":"","date":"9 March 2019","externalUrl":null,"permalink":"/tags/latin/","section":"Tags","summary":"","title":"Latin","type":"tags"},{"content":"Lorem est tota propiore conpellat pectoribus de pectora summo.\nRedit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.\nExierant elisi ambit vivere dedere Duce pollice Eris modo Spargitque ferrea quos palude Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.\nComas hunc haec pietate fetum procerum dixit Post torum vates letum Tiresia Flumen querellas Arcanaque montibus omnes Quidem et Vagus elidunt # The Van de Graaf Canon\nMane refeci capiebant unda mulcebat # Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. Faces illo pepulere tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.\nIubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.\nEurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel mitis temploque vocatus, inque alis, oculos nomen non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides parte.\n","date":"9 March 2019","externalUrl":null,"permalink":"/samples/placeholder-text/","section":"Samples","summary":"Lorem est tota propiore conpellat pectoribus de pectora summo.\n","title":"Placeholder Text","type":"sample"},{"content":"","date":"9 March 2019","externalUrl":null,"permalink":"/tags/text/","section":"Tags","summary":"","title":"Text","type":"tags"},{"content":"","date":"2019-03-09","externalUrl":null,"permalink":"/zh-cn/tags/%E6%8B%89%E4%B8%81%E8%AF%AD/","section":"标签","summary":"","title":"拉丁语","type":"tags"},{"content":"","date":"2019-03-09","externalUrl":null,"permalink":"/zh-cn/tags/%E6%96%87%E6%9C%AC/","section":"标签","summary":"","title":"文本","type":"tags"},{"content":"","date":"8 March 2019","externalUrl":null,"permalink":"/tags/katex/","section":"Tags","summary":"","title":"Katex","type":"tags"},{"content":"KaTeX can be used to render mathematical notation within articles.\nBlowfish will only bundle the KaTeX assets into your project if you make use of mathematical notation. In order for this to work, simply include the katex shortcode within the article. Example below:\n{{\u0026lt; katex \u0026gt;}} Any KaTeX syntax on that page will then be automatically rendered. Use the online reference of supported TeX functions for the available syntax.\nInline notation # Inline notation can be generated by wrapping the expression in \\( and \\) delimiters.\nExample:\n% KaTeX inline notation Inline notation: \\(\\varphi = \\dfrac{1+\\sqrt5}{2}= 1.6180339887…\\) Inline notation: \\(\\varphi = \\dfrac{1+\\sqrt5}{2}= 1.6180339887…\\)\nBlock notation # Alternatively, block notation can be generated using $$ delimiters. This will output the expression in its own HTML block.\nExample:\n% KaTeX block notation $$ \\varphi = 1+\\frac{1} {1+\\frac{1} {1+\\frac{1} {1+\\cdots} } } $$ $$ \\varphi = 1+\\frac{1} {1+\\frac{1} {1+\\frac{1} {1+\\cdots} } } $$","date":"8 March 2019","externalUrl":null,"permalink":"/samples/mathematical-notation/","section":"Samples","summary":"KaTeX can be used to render mathematical notation within articles.\n","title":"Mathematical notation","type":"sample"},{"content":"","date":"8 March 2019","externalUrl":null,"permalink":"/tags/maths/","section":"Tags","summary":"","title":"Maths","type":"tags"},{"content":"","date":"2019-03-08","externalUrl":null,"permalink":"/zh-cn/tags/%E6%95%B0%E5%AD%A6/","section":"标签","summary":"","title":"数学","type":"tags"},{"content":"","date":"6 March 2019","externalUrl":null,"permalink":"/tags/chart/","section":"Tags","summary":"","title":"Chart","type":"tags"},{"content":"Blowfish includes support for Chart.js using the chart shortcode. Simply wrap the chart markup within the shortcode. Blowfish automatically themes charts to match the configured colorScheme parameter, however the colours can be customised using normal Chart.js syntax.\nRefer to the chart shortcode docs for more details.\nThe examples below are a small selection taken from the official Chart.js docs. You can also view the page source on GitHub to see the markup.\nBar chart # Line chart # Doughnut chart # ","date":"6 March 2019","externalUrl":null,"permalink":"/samples/charts/","section":"Samples","summary":"Blowfish includes Chart.js for powerful charts and data visualisations.","title":"Charts","type":"sample"},{"content":"","date":"6 March 2019","externalUrl":null,"permalink":"/tags/diagram/","section":"Tags","summary":"","title":"Diagram","type":"tags"},{"content":"Mermaid diagrams are supported in Blowfish using the mermaid shortcode. Simply wrap the diagram markup within the shortcode. Blowfish automatically themes Mermaid diagrams to match the configured colorScheme parameter.\nRefer to the mermaid shortcode docs for more details.\nThe examples below are a small selection taken from the official Mermaid docs. You can also view the page source on GitHub to see the markup.\nFlowchart # graph TD A[Christmas] --\u003e|Get money| B(Go shopping) B --\u003e C{Let me think} B --\u003e G[/Another/] C ==\u003e|One| D[Laptop] C --\u003e|Two| E[iPhone] C --\u003e|Three| F[Car] subgraph Section C D E F G end Sequence diagram # sequenceDiagram autonumber par Action 1 Alice-\u003e\u003eJohn: Hello John, how are you? and Action 2 Alice-\u003e\u003eBob: Hello Bob, how are you? end Alice-\u003e\u003e+John: Hello John, how are you? Alice-\u003e\u003e+John: John, can you hear me? John--\u003e\u003e-Alice: Hi Alice, I can hear you! Note right of John: John is perceptive John--\u003e\u003e-Alice: I feel great! loop Every minute John--\u003eAlice: Great! end Class diagram # classDiagram Animal \"1\" \u003c|-- Duck Animal \u003c|-- Fish Animal \u003c--o Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } Entity relationship diagram # erDiagram CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ INVOICE : \"liable for\" DELIVERY-ADDRESS ||--o{ ORDER : receives INVOICE ||--|{ ORDER : covers ORDER ||--|{ ORDER-ITEM : includes PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT ||--o{ ORDER-ITEM : \"ordered in\" ","date":"6 March 2019","externalUrl":null,"permalink":"/samples/diagrams-flowcharts/","section":"Samples","summary":"It’s easy to add diagrams and flowcharts to articles using Mermaid.","title":"Diagrams and Flowcharts","type":"sample"},{"content":"","date":"6 March 2019","externalUrl":null,"permalink":"/tags/graph/","section":"Tags","summary":"","title":"Graph","type":"tags"},{"content":"","date":"6 March 2019","externalUrl":null,"permalink":"/tags/mermaid/","section":"Tags","summary":"","title":"Mermaid","type":"tags"},{"content":"","date":"2019-03-06","externalUrl":null,"permalink":"/zh-cn/tags/%E5%9B%BE%E7%89%87/","section":"标签","summary":"","title":"图片","type":"tags"},{"content":"","date":"2019-03-06","externalUrl":null,"permalink":"/zh-cn/tags/%E6%B5%81%E7%A8%8B%E5%9B%BE/","section":"标签","summary":"","title":"流程图","type":"tags"},{"content":"","date":"2019-03-06","externalUrl":null,"permalink":"/zh-cn/tags/%E8%A1%A8%E6%A0%BC/","section":"标签","summary":"","title":"表格","type":"tags"},{"content":"","date":"5 March 2019","externalUrl":null,"permalink":"/tags/emoji/","section":"Tags","summary":"","title":"Emoji","type":"tags"},{"content":"Emoji is supported throughout Blowfish by default. Emoji can be used in titles, menu items and article content.\nNote: The rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack. Emoji replacements are automatic throughout Blowfish, so you can use shorthand codes in your content and front matter and they will be converted to their corresponding symbols at build time.\nExample: see_no_evil \u0026#x1f648;, hear_no_evil \u0026#x1f649;, speak_no_evil \u0026#x1f64a;.\nThe Emoji cheat sheet is a useful reference for emoji shorthand codes.\n","date":"5 March 2019","externalUrl":null,"permalink":"/samples/emoji/","section":"Samples","summary":"📖🏞️🧗🏽🐉🧙🏽‍♂️🧚🏽👸","title":"Emoji 🪂","type":"sample"},{"content":"Thank you for wanting to contribute to Blowfish\u0026rsquo;s community.\nHow to start? # This is a template article that will explain how to create a new article for Blowfish\u0026rsquo;s guide section.\nClone Blowfish # Clone this repo with the following command:\ngit clone https://github.com/nunocoracao/blowfish.git Setup your files # Copy and paste the entire folder where this .md file is.\nName it using the following convention YYYYMM-title, no white spaces are allowed.\nWrite your guide # Write your guide :)\nUse the img folder to place your images and use them:\nImage caption Open a PR # Open a PR and thanks in advance for your contribution.\n","date":"22 December 1987","externalUrl":null,"permalink":"/guides/template/","section":"Recipes","summary":"Thank you for wanting to contribute to Blowfish’s community.\nHow to start? # This is a template article that will explain how to create a new article for Blowfish’s guide section.\n","title":"Recipe Template","type":"guides"},{"content":"","date":"22 December 1987","externalUrl":null,"permalink":"/tags/template/","section":"Tags","summary":"","title":"Template","type":"tags"},{"content":"","date":"1987-12-22","externalUrl":null,"permalink":"/zh-cn/tags/%E6%A8%A1%E6%9D%BF/","section":"标签","summary":"","title":"模板","type":"tags"},{"content":"2人目のダミー作者の素晴らしいダミープロフィールです。\n","externalUrl":null,"permalink":"/authors/secondauthor/_index.ja/","section":"Authors Taxonomy Listing Example","summary":"2人目のダミー作者の素晴らしいダミープロフィールです。\n","title":"2人目のダミー作者","type":"authors"},{"content":"This is the advanced tag. Just like other listing pages in Blowfish, you can add custom content to individual taxonomy terms and it will be displayed at the top of the term listing. \u0026#x1f680;\nYou can also use these content pages to define Hugo metadata like titles and descriptions that will be used for SEO and other purposes.\n","externalUrl":null,"permalink":"/tags/advanced/_index.it/","section":"Tags","summary":"This is the advanced tag. Just like other listing pages in Blowfish, you can add custom content to individual taxonomy terms and it will be displayed at the top of the term listing. 🚀\n","title":"Advanced","type":"tags"},{"content":"This is the advanced tag. Just like other listing pages in Blowfish, you can add custom content to individual taxonomy terms and it will be displayed at the top of the term listing. \u0026#x1f680;\nYou can also use these content pages to define Hugo metadata like titles and descriptions that will be used for SEO and other purposes.\n","externalUrl":null,"permalink":"/tags/advanced/","section":"Tags","summary":"This is the advanced tag. Just like other listing pages in Blowfish, you can add custom content to individual taxonomy terms and it will be displayed at the top of the term listing. 🚀\n","title":"Advanced","type":"tags"},{"content":"","externalUrl":null,"permalink":"/tags/agent/","section":"Tags","summary":"","title":"Agent","type":"tags"},{"content":"","externalUrl":null,"permalink":"/tags/ai/","section":"Tags","summary":"","title":"AI","type":"tags"},{"content":" O Blowfish dá vida ao seu conteúdo. \u0026#x1f60d; Esta seção contém algumas páginas de demonstração que mostram como o Blowfish renderiza diferentes tipos de conteúdo. Você também pode ver uma página de exemplo de listagem de taxonomia.\nNota: Esta página é apenas uma listagem de artigos padrão do Blowfish e o Hugo foi configurado para gerar um tipo de conteúdo samples e exibir resumos de artigos.\n","externalUrl":null,"permalink":"/samples/_index.pt-br/","section":"Samples","summary":" O Blowfish dá vida ao seu conteúdo. 😍 Esta seção contém algumas páginas de demonstração que mostram como o Blowfish renderiza diferentes tipos de conteúdo. Você também pode ver uma página de exemplo de listagem de taxonomia.\n","title":"Amostras","type":"samples"},{"content":" O Blowfish dá vida ao seu conteúdo. \u0026#x1f60d; Esta secção contém algumas páginas de demonstração que mostram como o Blowfish renderiza diferentes tipos de conteúdo. Também pode ver uma página de exemplo de listagem de taxonomia.\nNota: Esta página é apenas uma listagem de artigos padrão do Blowfish e o Hugo foi configurado para gerar um tipo de conteúdo samples e apresentar resumos de artigos.\n","externalUrl":null,"permalink":"/samples/_index.pt-pt/","section":"Samples","summary":" O Blowfish dá vida ao seu conteúdo. 😍 Esta secção contém algumas páginas de demonstração que mostram como o Blowfish renderiza diferentes tipos de conteúdo. Também pode ver uma página de exemplo de listagem de taxonomia.\n","title":"Amostras","type":"samples"},{"content":"","externalUrl":null,"permalink":"/tags/analytics/","section":"Tags","summary":"","title":"Analytics","type":"tags"},{"content":"Esta é a tag \u0026ldquo;Avançado\u0026rdquo;. Assim como outras páginas de listagem no Blowfish, você pode adicionar conteúdo personalizado a termos de taxonomia individuais e ele será exibido no topo da listagem de termos.\nVocê também pode usar essas páginas de conteúdo para definir metadados do Hugo, como títulos e descrições, que serão usados para SEO e outros propósitos.\n","externalUrl":null,"permalink":"/tags/advanced/_index.pt-br/","section":"Tags","summary":"Esta é a tag “Avançado”. Assim como outras páginas de listagem no Blowfish, você pode adicionar conteúdo personalizado a termos de taxonomia individuais e ele será exibido no topo da listagem de termos.\n","title":"Avançado","type":"tags"},{"content":"Esta é a tag \u0026ldquo;Avançado\u0026rdquo;. Tal como outras páginas de listagem no Blowfish, pode adicionar conteúdo personalizado a termos de taxonomia individuais e ele será apresentado no topo da listagem de termos.\nTambém pode utilizar estas páginas de conteúdo para definir metadados do Hugo, como títulos e descrições, que serão utilizados para SEO e outros propósitos.\n","externalUrl":null,"permalink":"/tags/advanced/_index.pt-pt/","section":"Tags","summary":"Esta é a tag “Avançado”. Tal como outras páginas de listagem no Blowfish, pode adicionar conteúdo personalizado a termos de taxonomia individuais e ele será apresentado no topo da listagem de termos.\n","title":"Avançado","type":"tags"},{"content":"Ceci est le tag \u0026ldquo;Avancé\u0026rdquo;. Comme pour les autres pages de liste dans Blowfish, vous pouvez ajouter du contenu personnalisé aux termes de taxonomie individuels et il sera affiché en haut de la liste des termes.\nVous pouvez également utiliser ces pages de contenu pour définir des métadonnées Hugo comme les titres et les descriptions qui seront utilisés pour le SEO et d\u0026rsquo;autres fins.\n","externalUrl":null,"permalink":"/tags/advanced/_index.fr/","section":"Tags","summary":"Ceci est le tag “Avancé”. Comme pour les autres pages de liste dans Blowfish, vous pouvez ajouter du contenu personnalisé aux termes de taxonomie individuels et il sera affiché en haut de la liste des termes.\n","title":"Avancé","type":"tags"},{"content":"Esta es la etiqueta \u0026ldquo;Avanzado\u0026rdquo;. Al igual que otras páginas de listado en Blowfish, puedes agregar contenido personalizado a términos de taxonomía individuales y se mostrará en la parte superior del listado de términos.\nTambién puedes usar estas páginas de contenido para definir metadatos de Hugo como títulos y descripciones que se usarán para SEO y otros propósitos.\n","externalUrl":null,"permalink":"/tags/advanced/_index.es/","section":"Tags","summary":"Esta es la etiqueta “Avanzado”. Al igual que otras páginas de listado en Blowfish, puedes agregar contenido personalizado a términos de taxonomía individuales y se mostrará en la parte superior del listado de términos.\n","title":"Avanzado","type":"tags"},{"content":" Blowfish bringt Ihre Inhalte zum Leben. \u0026#x1f60d; Dieser Bereich enthält einige Demo-Seiten, die zeigen, wie Blowfish verschiedene Arten von Inhalten rendert. Sie können auch eine Beispiel-Taxonomie-Auflistung-Seite sehen.\nNebenbei: Diese Seite ist nur eine Standard-Blowfish-Artikelliste und Hugo wurde so konfiguriert, dass ein samples-Inhaltstyp generiert und Artikel-Zusammenfassungen angezeigt werden.\n","externalUrl":null,"permalink":"/samples/_index.de/","section":"Samples","summary":" Blowfish bringt Ihre Inhalte zum Leben. 😍 Dieser Bereich enthält einige Demo-Seiten, die zeigen, wie Blowfish verschiedene Arten von Inhalten rendert. Sie können auch eine Beispiel-Taxonomie-Auflistung-Seite sehen.\n","title":"Beispiele","type":"samples"},{"content":" Blowfish dà vita ai tuoi contenuti. \u0026#x1f60d; Questa sezione contiene alcune pagine demo che mostrano come Blowfish esegue il rendering di diversi tipi di contenuto. Puoi anche vedere una pagina di esempio elenco tassonomia.\nNota a margine: Questa pagina è solo un elenco standard di articoli Blowfish e Hugo è stato configurato per generare un tipo di contenuto \u0026ldquo;campioni\u0026rdquo; e visualizzare riepiloghi degli articoli.\n","externalUrl":null,"permalink":"/samples/_index.it/","section":"Samples","summary":" Blowfish dà vita ai tuoi contenuti. 😍 Questa sezione contiene alcune pagine demo che mostrano come Blowfish esegue il rendering di diversi tipi di contenuto. Puoi anche vedere una pagina di esempio elenco tassonomia.\n","title":"Campioni","type":"samples"},{"content":"","externalUrl":null,"permalink":"/tags/claude-code/","section":"Tags","summary":"","title":"Claude Code","type":"tags"},{"content":"","externalUrl":null,"permalink":"/tags/comments/","section":"Tags","summary":"","title":"Comments","type":"tags"},{"content":"","externalUrl":null,"permalink":"/tags/config/","section":"Tags","summary":"","title":"Config","type":"tags"},{"content":"","externalUrl":null,"permalink":"/tags/content/","section":"Tags","summary":"","title":"Content","type":"tags"},{"content":"","externalUrl":null,"permalink":"/tags/deployment/","section":"Tags","summary":"","title":"Deployment","type":"tags"},{"content":"","externalUrl":null,"permalink":"/tags/docs/","section":"Tags","summary":"","title":"Docs","type":"tags"},{"content":" Simples, mas poderoso. Aprenda a usar o Blowfish e seus recursos. Esta seção contém tudo o que você precisa saber sobre o Blowfish. Se você é novo, confira o guia de Instalação para começar ou visite a seção de Exemplos para ver o que o Blowfish pode fazer.\n","externalUrl":null,"permalink":"/docs/_index.pt-br/","section":"Documentation","summary":" Simples, mas poderoso. Aprenda a usar o Blowfish e seus recursos. Esta seção contém tudo o que você precisa saber sobre o Blowfish. Se você é novo, confira o guia de Instalação para começar ou visite a seção de Exemplos para ver o que o Blowfish pode fazer.\n","title":"Documentação","type":"docs"},{"content":" Simples, mas poderoso. Aprenda a utilizar o Blowfish e as suas funcionalidades. Esta secção contém tudo o que precisa de saber sobre o Blowfish. Se é novo, consulte o guia de Instalação para começar ou visite a secção de Exemplos para ver o que o Blowfish pode fazer.\n","externalUrl":null,"permalink":"/docs/_index.pt-pt/","section":"Documentation","summary":" Simples, mas poderoso. Aprenda a utilizar o Blowfish e as suas funcionalidades. Esta secção contém tudo o que precisa de saber sobre o Blowfish. Se é novo, consulte o guia de Instalação para começar ou visite a secção de Exemplos para ver o que o Blowfish pode fazer.\n","title":"Documentação","type":"docs"},{"content":" Simple, pero potente. Aprende a usar Blowfish y sus características. Esta sección contiene todo lo que necesitas saber sobre Blowfish. Si eres nuevo, consulta la guía de Instalación para comenzar o visita la sección de Ejemplos para ver lo que Blowfish puede hacer.\n","externalUrl":null,"permalink":"/docs/_index.es/","section":"Documentation","summary":" Simple, pero potente. Aprende a usar Blowfish y sus características. Esta sección contiene todo lo que necesitas saber sobre Blowfish. Si eres nuevo, consulta la guía de Instalación para comenzar o visita la sección de Ejemplos para ver lo que Blowfish puede hacer.\n","title":"Documentación","type":"docs"},{"content":" Simple, mais puissant. Apprenez à utiliser Blowfish et ses fonctionnalités. Cette section contient tout ce que vous devez savoir sur Blowfish. Si vous êtes nouveau, consultez le guide d\u0026rsquo;Installation pour commencer ou visitez la section Exemples pour voir ce que Blowfish peut faire.\n","externalUrl":null,"permalink":"/docs/_index.fr/","section":"Documentation","summary":" Simple, mais puissant. Apprenez à utiliser Blowfish et ses fonctionnalités. Cette section contient tout ce que vous devez savoir sur Blowfish. Si vous êtes nouveau, consultez le guide d’Installation pour commencer ou visitez la section Exemples pour voir ce que Blowfish peut faire.\n","title":"Documentation","type":"docs"},{"content":" Simple, yet powerful. Learn how to use Blowfish and its features. This section contains everything you need to know about Blowfish. If you\u0026rsquo;re new, check out the Installation guide to begin or visit the Samples section to see what Blowfish can do.\n","externalUrl":null,"permalink":"/docs/","section":"Documentation","summary":" Simple, yet powerful. Learn how to use Blowfish and its features. This section contains everything you need to know about Blowfish. If you’re new, check out the Installation guide to begin or visit the Samples section to see what Blowfish can do.\n","title":"Documentation","type":"docs"},{"content":"","externalUrl":null,"permalink":"/series/documentation/","section":"Series","summary":"","title":"Documentation","type":"series"},{"content":" Semplice ma potente. Scopri come utilizzare Blowfish e le sue funzionalità. Questa sezione contiene tutto ciò che devi sapere su Blowfish. Se sei nuovo, consulta la guida Installazione per iniziare o visita la sezione Esempi per vedere cosa può fare Blowfish.\n","externalUrl":null,"permalink":"/docs/_index.it/","section":"Documentation","summary":" Semplice ma potente. Scopri come utilizzare Blowfish e le sue funzionalità. Questa sezione contiene tutto ciò che devi sapere su Blowfish. Se sei nuovo, consulta la guida Installazione per iniziare o visita la sezione Esempi per vedere cosa può fare Blowfish.\n","title":"Documenti","type":"docs"},{"content":" Einfach, aber leistungsstark. Erfahren Sie, wie Sie Blowfish und seine Funktionen nutzen können. Dieser Abschnitt enthält alles, was Sie über Blowfish wissen müssen. Wenn Sie neu sind, lesen Sie den Installations-Leitfaden, um zu beginnen, oder besuchen Sie den Bereich Beispiele, um zu sehen, was Blowfish kann.\n","externalUrl":null,"permalink":"/docs/_index.de/","section":"Documentation","summary":" Einfach, aber leistungsstark. Erfahren Sie, wie Sie Blowfish und seine Funktionen nutzen können. Dieser Abschnitt enthält alles, was Sie über Blowfish wissen müssen. Wenn Sie neu sind, lesen Sie den Installations-Leitfaden, um zu beginnen, oder besuchen Sie den Bereich Beispiele, um zu sehen, was Blowfish kann.\n","title":"Dokumentation","type":"docs"},{"content":"Die fantastische Beispielbiografie des zweiten Beispielautors.\n","externalUrl":null,"permalink":"/authors/secondauthor/_index.de/","section":"Authors Taxonomy Listing Example","summary":"Die fantastische Beispielbiografie des zweiten Beispielautors.\n","title":"Dummy Second Author","type":"authors"},{"content":"La increíble biografía ficticia del segundo autor ficticio.\n","externalUrl":null,"permalink":"/authors/secondauthor/_index.es/","section":"Authors Taxonomy Listing Example","summary":"La increíble biografía ficticia del segundo autor ficticio.\n","title":"Dummy Second Author","type":"authors"},{"content":"La super bio fictive du deuxième auteur fictif.\n","externalUrl":null,"permalink":"/authors/secondauthor/_index.fr/","section":"Authors Taxonomy Listing Example","summary":"La super bio fictive du deuxième auteur fictif.\n","title":"Dummy Second Author","type":"authors"},{"content":"A incrível bio fictícia do segundo autor fictício.\n","externalUrl":null,"permalink":"/authors/secondauthor/_index.pt-br/","section":"Authors Taxonomy Listing Example","summary":"A incrível bio fictícia do segundo autor fictício.\n","title":"Dummy Second Author","type":"authors"},{"content":"A fantástica biografia fictícia do segundo autor fictício.\n","externalUrl":null,"permalink":"/authors/secondauthor/_index.pt-pt/","section":"Authors Taxonomy Listing Example","summary":"A fantástica biografia fictícia do segundo autor fictício.\n","title":"Dummy Second Author","type":"authors"},{"content":" Blowfish donne vie à votre contenu. \u0026#x1f60d; Cette section contient quelques pages de démonstration qui montrent comment Blowfish rend différents types de contenu. Vous pouvez également voir une page exemple de liste de taxonomie.\nNote : Cette page est juste une liste d\u0026rsquo;articles Blowfish standard et Hugo a été configuré pour générer un type de contenu samples et afficher les résumés d\u0026rsquo;articles.\n","externalUrl":null,"permalink":"/samples/_index.fr/","section":"Samples","summary":" Blowfish donne vie à votre contenu. 😍 Cette section contient quelques pages de démonstration qui montrent comment Blowfish rend différents types de contenu. Vous pouvez également voir une page exemple de liste de taxonomie.\n","title":"Échantillons","type":"samples"},{"content":"Un rapido esempio di come iniziare a utilizzare le tassonomie degli autori nei tuoi articoli.\n","externalUrl":null,"permalink":"/authors/_index.it/","section":"Authors Taxonomy Listing Example","summary":"Un rapido esempio di come iniziare a utilizzare le tassonomie degli autori nei tuoi articoli.\n","title":"Esempio di elenco di tassonomia degli autori","type":"authors"},{"content":"","externalUrl":null,"permalink":"/tags/example/","section":"Tags","summary":"","title":"Example","type":"tags"},{"content":"","externalUrl":null,"permalink":"/tags/favicons/","section":"Tags","summary":"","title":"Favicons","type":"tags"},{"content":"","externalUrl":null,"permalink":"/tags/firebase/","section":"Tags","summary":"","title":"Firebase","type":"tags"},{"content":"Dies ist das Tag \u0026ldquo;Fortgeschritten\u0026rdquo;. Genau wie bei anderen Auflistungsseiten in Blowfish können Sie benutzerdefinierten Inhalt zu einzelnen Taxonomiebegriffen hinzufügen, der oben in der Begriffsliste angezeigt wird.\nSie können diese Inhaltsseiten auch verwenden, um Hugo-Metadaten wie Titel und Beschreibungen zu definieren, die für SEO und andere Zwecke verwendet werden.\n","externalUrl":null,"permalink":"/tags/advanced/_index.de/","section":"Tags","summary":"Dies ist das Tag “Fortgeschritten”. Genau wie bei anderen Auflistungsseiten in Blowfish können Sie benutzerdefinierten Inhalt zu einzelnen Taxonomiebegriffen hinzufügen, der oben in der Begriffsliste angezeigt wird.\nSie können diese Inhaltsseiten auch verwenden, um Hugo-Metadaten wie Titel und Beschreibungen zu definieren, die für SEO und andere Zwecke verwendet werden.\n","title":"Fortgeschritten","type":"tags"},{"content":"","externalUrl":null,"permalink":"/tags/front-matter/","section":"Tags","summary":"","title":"Front Matter","type":"tags"},{"content":" Veja o que é possível com o Blowfish. Esta seção contém links para modelos de exemplo e páginas criadas usando o Blowfish para inspirar você.\n","externalUrl":null,"permalink":"/examples/_index.pt-br/","section":"Showcase","summary":" Veja o que é possível com o Blowfish. Esta seção contém links para modelos de exemplo e páginas criadas usando o Blowfish para inspirar você.\n","title":"Galeria","type":"examples"},{"content":" Veja o que é possível com o Blowfish. Esta secção contém ligações para modelos de exemplo e páginas criadas utilizando o Blowfish para o inspirar.\n","externalUrl":null,"permalink":"/examples/_index.pt-pt/","section":"Showcase","summary":" Veja o que é possível com o Blowfish. Esta secção contém ligações para modelos de exemplo e páginas criadas utilizando o Blowfish para o inspirar.\n","title":"Galeria","type":"examples"},{"content":" Mira lo que es posible con Blowfish. Esta sección contiene enlaces a plantillas de ejemplo y páginas creadas con Blowfish para inspirarte.\n","externalUrl":null,"permalink":"/examples/_index.es/","section":"Showcase","summary":" Mira lo que es posible con Blowfish. Esta sección contiene enlaces a plantillas de ejemplo y páginas creadas con Blowfish para inspirarte.\n","title":"Galería","type":"examples"},{"content":" Sehen Sie, was mit Blowfish möglich ist. Dieser Bereich enthält Links zu Beispielvorlagen und Seiten, die mit Blowfish erstellt wurden, um Sie zu inspirieren.\n","externalUrl":null,"permalink":"/examples/_index.de/","section":"Showcase","summary":" Sehen Sie, was mit Blowfish möglich ist. Dieser Bereich enthält Links zu Beispielvorlagen und Seiten, die mit Blowfish erstellt wurden, um Sie zu inspirieren.\n","title":"Galerie","type":"examples"},{"content":"","externalUrl":null,"permalink":"/tags/github/","section":"Tags","summary":"","title":"Github","type":"tags"},{"content":"","externalUrl":null,"permalink":"/tags/homepage/","section":"Tags","summary":"","title":"Homepage","type":"tags"},{"content":"","externalUrl":null,"permalink":"/tags/hosting/","section":"Tags","summary":"","title":"Hosting","type":"tags"},{"content":"","externalUrl":null,"permalink":"/tags/icon/","section":"Tags","summary":"","title":"Icon","type":"tags"},{"content":"","externalUrl":null,"permalink":"/tags/installation/","section":"Tags","summary":"","title":"Installation","type":"tags"},{"content":"","externalUrl":null,"permalink":"/tags/layouts/","section":"Tags","summary":"","title":"Layouts","type":"tags"},{"content":"","externalUrl":null,"permalink":"/tags/lead/","section":"Tags","summary":"","title":"Lead","type":"tags"},{"content":"","externalUrl":null,"permalink":"/tags/likes/","section":"Tags","summary":"","title":"Likes","type":"tags"},{"content":" Blowfish da vida a tu contenido. \u0026#x1f60d; Esta sección contiene algunas páginas de demostración que muestran cómo Blowfish renderiza diferentes tipos de contenido. También puedes ver una página de ejemplo de listado de taxonomía.\nNota: Esta página es solo un listado de artículos estándar de Blowfish y Hugo ha sido configurado para generar un tipo de contenido samples y mostrar resúmenes de artículos.\n","externalUrl":null,"permalink":"/samples/_index.es/","section":"Samples","summary":" Blowfish da vida a tu contenido. 😍 Esta sección contiene algunas páginas de demostración que muestran cómo Blowfish renderiza diferentes tipos de contenido. También puedes ver una página de ejemplo de listado de taxonomía.\n","title":"Muestras","type":"samples"},{"content":"","externalUrl":null,"permalink":"/tags/netlify/","section":"Tags","summary":"","title":"Netlify","type":"tags"},{"content":"","externalUrl":null,"permalink":"/tags/new/","section":"Tags","summary":"","title":"New","type":"tags"},{"content":"La fantastica biografia di Nuno.\n","externalUrl":null,"permalink":"/authors/nunocoracao/_index.it/","section":"Authors Taxonomy Listing Example","summary":"La fantastica biografia di Nuno.\n","title":"Nuno Coraçao","type":"authors"},{"content":"Nunos fantastische Beispielbiografie.\n","externalUrl":null,"permalink":"/authors/nunocoracao/_index.de/","section":"Authors Taxonomy Listing Example","summary":"Nunos fantastische Beispielbiografie.\n","title":"Nuno Coração","type":"authors"},{"content":"La increíble biografía ficticia de Nuno.\n","externalUrl":null,"permalink":"/authors/nunocoracao/_index.es/","section":"Authors Taxonomy Listing Example","summary":"La increíble biografía ficticia de Nuno.\n","title":"Nuno Coração","type":"authors"},{"content":"La super bio fictive de Nuno.\n","externalUrl":null,"permalink":"/authors/nunocoracao/_index.fr/","section":"Authors Taxonomy Listing Example","summary":"La super bio fictive de Nuno.\n","title":"Nuno Coração","type":"authors"},{"content":"Nuno の素晴らしいダミープロフィールです。\n","externalUrl":null,"permalink":"/authors/nunocoracao/_index.ja/","section":"Authors Taxonomy Listing Example","summary":"Nuno の素晴らしいダミープロフィールです。\n","title":"Nuno Coração","type":"authors"},{"content":"A incrível bio fictícia do Nuno.\n","externalUrl":null,"permalink":"/authors/nunocoracao/_index.pt-br/","section":"Authors Taxonomy Listing Example","summary":"A incrível bio fictícia do Nuno.\n","title":"Nuno Coração","type":"authors"},{"content":"A fantástica biografia fictícia do Nuno.\n","externalUrl":null,"permalink":"/authors/nunocoracao/_index.pt-pt/","section":"Authors Taxonomy Listing Example","summary":"A fantástica biografia fictícia do Nuno.\n","title":"Nuno Coração","type":"authors"},{"content":"","externalUrl":null,"permalink":"/tags/open-code/","section":"Tags","summary":"","title":"Open Code","type":"tags"},{"content":"","externalUrl":null,"permalink":"/tags/partials/","section":"Tags","summary":"","title":"Partials","type":"tags"},{"content":"","externalUrl":null,"permalink":"/tags/plugin/","section":"Tags","summary":"","title":"Plugin","type":"tags"},{"content":"","externalUrl":null,"permalink":"/posts/","section":"Posts","summary":"","title":"Posts","type":"posts"},{"content":"","externalUrl":null,"permalink":"/tags/productivity/","section":"Tags","summary":"","title":"Productivity","type":"tags"},{"content":" Receitas, guias e tutoriais para o Blowfish Usuário do Blowfish? Para adicionar seu guia a esta lista, confira o template.\nEsta seção contém guias para vários cenários sobre como configurar seu tema. Se você é novo, confira o guia de Instalação para começar ou visite a seção de Amostras para ver o que o Blowfish pode fazer.\n","externalUrl":null,"permalink":"/guides/_index.pt-br/","section":"Recipes","summary":" Receitas, guias e tutoriais para o Blowfish Usuário do Blowfish? Para adicionar seu guia a esta lista, confira o template.\nEsta seção contém guias para vários cenários sobre como configurar seu tema. Se você é novo, confira o guia de Instalação para começar ou visite a seção de Amostras para ver o que o Blowfish pode fazer.\n","title":"Receitas","type":"guides"},{"content":" Receitas, guias e tutoriais para o Blowfish Utilizador do Blowfish? Para adicionar o seu guia a esta lista, consulte o template.\nEsta secção contém guias para vários cenários sobre como configurar o seu tema. Se é novo, consulte o guia de Instalação para começar ou visite a secção de Amostras para ver o que o Blowfish pode fazer.\n","externalUrl":null,"permalink":"/guides/_index.pt-pt/","section":"Recipes","summary":" Receitas, guias e tutoriais para o Blowfish Utilizador do Blowfish? Para adicionar o seu guia a esta lista, consulte o template.\nEsta secção contém guias para vários cenários sobre como configurar o seu tema. Se é novo, consulte o guia de Instalação para começar ou visite a secção de Amostras para ver o que o Blowfish pode fazer.\n","title":"Receitas","type":"guides"},{"content":" Recetas, guías y tutoriales para Blowfish ¿Usuario de Blowfish? Para añadir tu guía a esta lista, consulta la plantilla.\nEsta sección contiene guías para varios escenarios sobre cómo configurar tu tema. Si eres nuevo, consulta la guía de Instalación para comenzar o visita la sección de Muestras para ver lo que Blowfish puede hacer.\n","externalUrl":null,"permalink":"/guides/_index.es/","section":"Recipes","summary":" Recetas, guías y tutoriales para Blowfish ¿Usuario de Blowfish? Para añadir tu guía a esta lista, consulta la plantilla.\nEsta sección contiene guías para varios escenarios sobre cómo configurar tu tema. Si eres nuevo, consulta la guía de Instalación para comenzar o visita la sección de Muestras para ver lo que Blowfish puede hacer.\n","title":"Recetas","type":"guides"},{"content":" Recettes, guides et tutoriels pour Blowfish Utilisateur de Blowfish ? Pour ajouter votre guide à cette liste, consultez le modèle.\nCette section contient des guides pour divers scénarios de configuration de votre thème. Si vous êtes nouveau, consultez le guide d\u0026rsquo;Installation pour commencer ou visitez la section Échantillons pour voir ce que Blowfish peut faire.\n","externalUrl":null,"permalink":"/guides/_index.fr/","section":"Recipes","summary":" Recettes, guides et tutoriels pour Blowfish Utilisateur de Blowfish ? Pour ajouter votre guide à cette liste, consultez le modèle.\nCette section contient des guides pour divers scénarios de configuration de votre thème. Si vous êtes nouveau, consultez le guide d’Installation pour commencer ou visitez la section Échantillons pour voir ce que Blowfish peut faire.\n","title":"Recettes","type":"guides"},{"content":" Recipes, guides, and tutorials for Blowfish Blowfish user? To add your guide to this list, check the template.\nThis section contains guides for a variety of scenarios on how to configure your theme. If you\u0026rsquo;re new, check out the Installation guide to begin or visit the Samples section to see what Blowfish can do.\n","externalUrl":null,"permalink":"/guides/_index.it/","section":"Recipes","summary":" Recipes, guides, and tutorials for Blowfish Blowfish user? To add your guide to this list, check the template.\nThis section contains guides for a variety of scenarios on how to configure your theme. If you’re new, check out the Installation guide to begin or visit the Samples section to see what Blowfish can do.\n","title":"Recipes","type":"guides"},{"content":"","externalUrl":null,"permalink":"/tags/render/","section":"Tags","summary":"","title":"Render","type":"tags"},{"content":" Rezepte, Anleitungen und Tutorials für Blowfish Blowfish-Nutzer? Um Ihre Anleitung zu dieser Liste hinzuzufügen, schauen Sie sich die Vorlage an.\nDieser Bereich enthält Anleitungen für verschiedene Szenarien zur Konfiguration Ihres Themes. Wenn Sie neu sind, schauen Sie sich die Installations-Anleitung an, um zu beginnen, oder besuchen Sie den Beispiele-Bereich, um zu sehen, was Blowfish kann.\n","externalUrl":null,"permalink":"/guides/_index.de/","section":"Recipes","summary":" Rezepte, Anleitungen und Tutorials für Blowfish Blowfish-Nutzer? Um Ihre Anleitung zu dieser Liste hinzuzufügen, schauen Sie sich die Vorlage an.\nDieser Bereich enthält Anleitungen für verschiedene Szenarien zur Konfiguration Ihres Themes. Wenn Sie neu sind, schauen Sie sich die Installations-Anleitung an, um zu beginnen, oder besuchen Sie den Beispiele-Bereich, um zu sehen, was Blowfish kann.\n","title":"Rezepte","type":"guides"},{"content":"La fantastica biografia fittizia di Dummy Second Author.\n","externalUrl":null,"permalink":"/authors/secondauthor/_index.it/","section":"Authors Taxonomy Listing Example","summary":"La fantastica biografia fittizia di Dummy Second Author.\n","title":"Secondo autore fittizio","type":"authors"},{"content":"","externalUrl":null,"permalink":"/series/","section":"Series","summary":"","title":"Series","type":"series"},{"content":"","externalUrl":null,"permalink":"/tags/series/","section":"Tags","summary":"","title":"Series","type":"tags"},{"content":" See what\u0026rsquo;s possible with Blowfish. This section contains links to example templates and pages created using Blowfish to get you inspired.\n","externalUrl":null,"permalink":"/examples/_index.it/","section":"Showcase","summary":" See what’s possible with Blowfish. This section contains links to example templates and pages created using Blowfish to get you inspired.\n","title":"Showcase","type":"examples"},{"content":"Blowfish ha il pieno supporto per le tassonomie Hugo e si adatterà a qualsiasi impostazione tassonomica. Gli elenchi di tassonomia come questo supportano anche il contenuto personalizzato da visualizzare sopra l\u0026rsquo;elenco dei termini.\nQuest\u0026rsquo;area può essere utilizzata per aggiungere testo descrittivo aggiuntivo a ciascuna tassonomia. Dai un\u0026rsquo;occhiata al tag avanzato di seguito per vedere come portare questo concetto ancora oltre.\n","externalUrl":null,"permalink":"/tags/_index.it/","section":"Tags","summary":"Blowfish ha il pieno supporto per le tassonomie Hugo e si adatterà a qualsiasi impostazione tassonomica. Gli elenchi di tassonomia come questo supportano anche il contenuto personalizzato da visualizzare sopra l’elenco dei termini.\n","title":"Tag","type":"tags"},{"content":"","externalUrl":null,"permalink":"/tags/tools/","section":"Tags","summary":"","title":"Tools","type":"tags"},{"content":"","externalUrl":null,"permalink":"/tags/vibe-coding/","section":"Tags","summary":"","title":"Vibe Coding","type":"tags"},{"content":"","externalUrl":null,"permalink":"/tags/views/","section":"Tags","summary":"","title":"Views","type":"tags"},{"content":" Découvrez ce qui est possible avec Blowfish. Cette section contient des liens vers des modèles et pages d\u0026rsquo;exemple créés avec Blowfish pour vous inspirer.\n","externalUrl":null,"permalink":"/examples/_index.fr/","section":"Showcase","summary":" Découvrez ce qui est possible avec Blowfish. Cette section contient des liens vers des modèles et pages d’exemple créés avec Blowfish pour vous inspirer.\n","title":"Vitrine","type":"examples"},{"content":"","externalUrl":null,"permalink":"/_index.ja/","section":"Welcome to OPC! 🎉","summary":"","title":"Welcome to OPC! 🎉","type":"page"},{"content":" Blowfish はあなたのコンテンツに命を宿します。\u0026#x1f60d; このセクションは、 Blowfish で様々な種類のコンテンツをどのように表示するのかを紹介するデモページを含みます。例としては分類一覧ページも参考になります。\nサイドノート: このページは一般的な Blowfish のリストで、 Hugo が生成した samples コンテンツタイプと記事の要約を表示する様に設定しています。\n","externalUrl":null,"permalink":"/samples/_index.ja/","section":"Samples","summary":" Blowfish はあなたのコンテンツに命を宿します。😍 このセクションは、 Blowfish で様々な種類のコンテンツをどのように表示するのかを紹介するデモページを含みます。例としては分類一覧ページも参考になります。\n","title":"サンプル","type":"samples"},{"content":" Blowfish で何が出来るか見てみる。 このセクションはテンプレートの例やインスピレーションを得ることの出来る Blowfish を使用して作成されたページのリンクがあります。\n","externalUrl":null,"permalink":"/examples/_index.ja/","section":"Showcase","summary":" Blowfish で何が出来るか見てみる。 このセクションはテンプレートの例やインスピレーションを得ることの出来る Blowfish を使用して作成されたページのリンクがあります。\n","title":"ショーケース","type":"examples"},{"content":"Blowfish は Hugo の分類システムを完全にサポートし、どのような分類システムの設定でも適合できます。このような分類システムのリストは、用語リストの上に表示されるカスタムコンテンツもサポートしています。\nこのエリアはそれぞれの分類システムに追加の説明をする時に利用します。以下の高度なタグを確認して、このコンセプトをさらに発展させる方法をご覧ください。\n","externalUrl":null,"permalink":"/tags/_index.ja/","section":"Tags","summary":"Blowfish は Hugo の分類システムを完全にサポートし、どのような分類システムの設定でも適合できます。このような分類システムのリストは、用語リストの上に表示されるカスタムコンテンツもサポートしています。\n","title":"タグ","type":"tags"},{"content":" シンプル、それでいて強力。 Blowfish の利用方法と特徴について学ぶ。 このセクションでは、Blowfish について知っておくべきことをすべて網羅しています。初めての方は、まずインストールガイドをご覧いただくか、サンプルセクションで Blowfish で何ができるかを確認してみてください。\n","externalUrl":null,"permalink":"/docs/_index.ja/","section":"Documentation","summary":" シンプル、それでいて強力。 Blowfish の利用方法と特徴について学ぶ。 このセクションでは、Blowfish について知っておくべきことをすべて網羅しています。初めての方は、まずインストールガイドをご覧いただくか、サンプルセクションで Blowfish で何ができるかを確認してみてください。\n","title":"ドキュメント","type":"docs"},{"content":" Blowfish のためのレシピ、ガイド、チュートリアル Blowfish ユーザーですか? この一覧にあなたのガイドを加える際は、テンプレートを確認してください。\nこのセクションではあなたのテーマの設定方法する様々なシナリオを含んでいます。新しく作成する場合は、開始するためにインストールガイド、または Blowfish が何が出来るかサンプルセクションに訪れてください。\n","externalUrl":null,"permalink":"/guides/_index.ja/","section":"Recipes","summary":" Blowfish のためのレシピ、ガイド、チュートリアル Blowfish ユーザーですか? この一覧にあなたのガイドを加える際は、テンプレートを確認してください。\n","title":"レシピ","type":"guides"},{"content":"","externalUrl":null,"permalink":"/zh-cn/tags/%E4%B8%BB%E9%A1%B5/","section":"标签","summary":"","title":"主页","type":"tags"},{"content":"","externalUrl":null,"permalink":"/zh-cn/tags/%E5%86%85%E5%AE%B9/","section":"标签","summary":"","title":"内容","type":"tags"},{"content":"","externalUrl":null,"permalink":"/zh-cn/tags/%E5%AE%89%E8%A3%85/","section":"标签","summary":"","title":"安装","type":"tags"},{"content":"","externalUrl":null,"permalink":"/zh-cn/tags/%E5%B8%83%E5%B1%80/","section":"标签","summary":"","title":"布局","type":"tags"},{"content":"","externalUrl":null,"permalink":"/zh-cn/tags/%E6%89%98%E7%AE%A1/","section":"标签","summary":"","title":"托管","type":"tags"},{"content":"","externalUrl":null,"permalink":"/zh-cn/tags/%E6%96%87%E6%A1%A3/","section":"标签","summary":"","title":"文档","type":"tags"},{"content":"","externalUrl":null,"permalink":"/zh-cn/tags/%E6%96%B0%E6%89%8B/","section":"标签","summary":"","title":"新手","type":"tags"},{"content":"","externalUrl":null,"permalink":"/zh-cn/tags/%E6%B8%B2%E6%9F%93%E5%99%A8/","section":"标签","summary":"","title":"渲染器","type":"tags"},{"content":"","externalUrl":null,"permalink":"/zh-cn/tags/%E7%82%B9%E8%B5%9E%E9%87%8F/","section":"标签","summary":"","title":"点赞量","type":"tags"},{"content":"","externalUrl":null,"permalink":"/zh-cn/tags/%E7%B3%BB%E5%88%97/","section":"标签","summary":"","title":"系列","type":"tags"},{"content":"","externalUrl":null,"permalink":"/zh-cn/tags/%E7%BB%9F%E8%AE%A1%E6%9C%8D%E5%8A%A1/","section":"标签","summary":"","title":"统计服务","type":"tags"},{"content":"","externalUrl":null,"permalink":"/zh-cn/tags/%E7%BD%91%E7%AB%99%E5%9B%BE%E6%A0%87/","section":"标签","summary":"","title":"网站图标","type":"tags"},{"content":"あなたの記事で著者のタクソノミーを使う方法の簡単な例です。\n","externalUrl":null,"permalink":"/authors/_index.ja/","section":"Authors Taxonomy Listing Example","summary":"あなたの記事で著者のタクソノミーを使う方法の簡単な例です。\n","title":"著者のタクソノミーリストの例","type":"authors"},{"content":"","externalUrl":null,"permalink":"/zh-cn/tags/%E8%AF%84%E8%AE%BA/","section":"标签","summary":"","title":"评论","type":"tags"},{"content":"","externalUrl":null,"permalink":"/zh-cn/tags/%E9%83%A8%E7%BD%B2/","section":"标签","summary":"","title":"部署","type":"tags"},{"content":"","externalUrl":null,"permalink":"/zh-cn/series/%E9%83%A8%E7%BD%B2%E6%95%99%E7%A8%8B/","section":"Series","summary":"","title":"部署教程","type":"series"},{"content":"","externalUrl":null,"permalink":"/zh-cn/tags/%E9%85%8D%E7%BD%AE/","section":"标签","summary":"","title":"配置","type":"tags"},{"content":"","externalUrl":null,"permalink":"/zh-cn/tags/%E9%98%85%E8%AF%BB%E9%87%8F/","section":"标签","summary":"","title":"阅读量","type":"tags"},{"content":"こちらは高度なタグです。 Blowfish の他のページの様に、個々の分類条項にカスタムコンテンツの追加やそれを条項リストの一番上に表示することが可能です。\u0026#x1f680;\nタイトルや説明など SEO や他の目的に利用するためのHugo のメタデータを定義するためにこれらのコンテンツページも利用可能です。\n","externalUrl":null,"permalink":"/tags/advanced/_index.ja/","section":"Tags","summary":"こちらは高度なタグです。 Blowfish の他のページの様に、個々の分類条項にカスタムコンテンツの追加やそれを条項リストの一番上に表示することが可能です。🚀\n","title":"高度なタグ","type":"tags"},{"content":"","externalUrl":null,"permalink":"/zh-cn/tags/%E9%AB%98%E7%BA%A7/","section":"标签","summary":"","title":"高级","type":"tags"}]