DOCSEARCHbyAlgolia
Submit Docs

Tumblr Builder

website·Indexed 29 days ago

http://yoriiis.github.io/tumblr-builder

A JavaScript library for building custom Tumblr themes. It provides tools for customizing HTML for home pages, tagged pages, post pages, and various article types, along with a set of exposed instance methods for theme development.

Tokens
3.6K
Snippets
24
Records
31
Agent score
74%

What's inside Tumblr Builder

  1. Overview of TumblrBuilder

    TumblrBuilder is a framework that allows developers to build custom Tumblr themes using JavaScript. It provides a system for creating templates for the various page types and article types supported by the Tumblr platform.

  2. TumblrBuilder core features and deployment options

    TumblrBuilder includes several built-in features to enhance user experience and performance:

    • Infinite scrolling on article lists
    • Display of all article hashtags
    • Related posts functionality
    • Browser storage integration to improve load performance

    Because it utilizes the Tumblr API, TumblrBuilder can be deployed either directly within a Tumblr blog or as part of a separate personal website.

  3. Customize the Home page template

    To customize the home page, provide a function to templatesPages.home. This function receives an object containing templates (the post type template functions), tags (a list of all available hashtags), and posts (the initial list of articles to display). To enable infinite scrolling in your custom HTML, use the data-infinite-scroll attribute on the posts container.
    function customHomePage({ templates, tags, posts }) {
  return `
    <nav>...</nav>
    <div class="tags">
      ${tags.map(tag => `<a href="#/tagged/${tag}">${tag}</a>`).join('')}
    </div>
    <div class="posts" data-infinite-scroll>
      ${posts.map(post => templates[post.type](post)).join('')}
    </div>
  `;
}

new TumblrBuilder({
  templatesPages: {
    home: customHomePage
  }
});

  4. Customize the Tagged page template

    To customize the page that displays posts for a specific tag, provide a function to templatesPages.tagged. The function receives templates (post type templates), tag (the current hashtag from the route), and posts (articles filtered by that hashtag). Use the data-infinite-scroll attribute to support infinite scrolling.
    function customTaggedPage({ templates, tag, posts }) {
  return `
    <h3>Tagged: ${tag}</h3>
    <div class="posts" data-infinite-scroll>
      ${posts.map(post => templates[post.type](post)).join('')}
    </div>
  `;
}

new TumblrBuilder({
  templatesPages: {
    tagged: customTaggedPage
  }
});

  5. Explore TumblrBuilder examples and playground

    To learn how to use TumblrBuilder, you can use the following resources:

    • Online Playground: An interactive environment available on CodePen.
    • GitHub Repository: Download the source code to run examples locally. The ./examples/ directory contains functional implementations including:
      • basic-usage: Uses all default templates for pages and articles.
      • custom-pages: Demonstrates custom templates for pages with default article templates.
      • custom-posts: Demonstrates custom templates for articles with default page templates.
    # Clone the repository to access examples
git clone https://github.com/yoriiis/tumblr-builder

  6. Deploy the app to an external site

    Because the application relies on the Tumblr API for all requests, it can be hosted on any external site using standard web hosting processes. It does not need to reside within the Tumblr ecosystem to function.

  7. Deploy the app to a Tumblr blog

    To deploy the application directly to Tumblr, use the Tumblr customize page to import the custom HTML. You must host the associated asset files (scripts and styles) independently.
    1. Copy the HTML content
    2. Open the Tumblr editor at https://www.tumblr.com/customize/<hostname>
    3. Paste the HTML content
    4. Host the asset files (scripts and styles)
    5. Navigate to the Tumblr blog

  8. Customize TumblrBuilder themes

    TumblrBuilder provides a minimalist default theme for all pages and article types. These default themes can be individually overridden to create custom designs.

  9. Customize the Post page template

    To customize the individual post view, provide a function to templatesPages.post. The function receives templates (post type templates), posts (data for the current article), and relatedPosts (a list of related posts).
    function customPostPage({ templates, posts, relatedPosts }) {
  return `
    <div class="post-content">
      ${posts.map(post => templates[post.type](post)).join('')}
    </div>
    ${relatedPosts.length ? `<div class="related">${relatedPosts.map(p => templates[p.type](p)).join('')}</div>` : ''}
  `;
}

new TumblrBuilder({
  templatesPages: {
    post: customPostPage
  }
});

  11. Initialize a TumblrBuilder application

    To start a custom Tumblr blog, create a container element in your HTML and initialize the TumblrBuilder constructor. After instantiation, call the .init() method to render the app.

    <!-- HTML Container --> <div id="tumblr-app"> <!-- App will be render here --> </div>

    <script> const tumblr = new TumblrBuilder({ element: document.getElementById('tumblr-app'), host: "your-blog.tumblr.com", apiKey: "your-api-key" });

    tumblr.init().then(response => { // App is rendered and ready }); </script>