咨询：如何在导航栏右侧及Morea生成页面右上角添加Logo

Got it, let's tackle your two Morea logo customization needs one by one— I’ve worked with Morea for a few course sites, so this should be straightforward.

1. Adding a Logo to the Right Side of the Navigation Bar #

Morea uses Bootstrap for its default styling, and the navigation bar lives in a reusable include file. Here's what to do:

• First, upload your logo image to the assets/images/ directory in your Morea project (create the folder if it doesn’t exist).
• Open the _includes/header.html file (this is where the nav bar code lives).
• Look for the section with the right-aligned navigation links— it’ll usually have a Bootstrap class like navbar-nav ml-auto or navbar-nav ms-auto (depending on your Bootstrap version).
• Add your logo code right inside that container, after the last nav link. For example:

  <img src="{{ '/assets/images/your-logo.png' | relative_url }}" alt="Site Logo" style="height: 40px; margin-left: 15px; margin-top: 2px;">
  

• Adjust the height, margin-left, and margin-top values to match your nav bar’s height and spacing preferences.
• Save the file, then run bundle exec jekyll serve to preview the changes. Tweak the styles until it looks just right.

2. Adding a Logo to the Top-Right Corner of Morea-Generated Pages #

This depends on whether you want the logo on all pages or just specific Morea pages (like modules, outcomes, or readings). Here’s how to handle both cases:

Option A: Add Logo to All Morea Pages #

• Open the _layouts/default.html file— this is the base layout that all other pages inherit from.
• Find the main content container, which will look something like <main role="main" class="container">. Add position: relative; to its style so we can position the logo absolutely inside it:

  <main role="main" class="container" style="position: relative;">
  

• Right after opening the <main> tag, add your logo code with absolute positioning:

  <div style="position: absolute; top: 20px; right: 20px;">
    <img src="{{ '/assets/images/your-page-logo.png' | relative_url }}" alt="Page Logo" style="height: 50px;">
  </div>
  

• Adjust the top value to avoid overlapping with the navigation bar (if your nav bar is 56px tall, try top: 70px instead). Tweak the height and right spacing as needed.

Option B: Add Logo Only to Specific Morea Pages #

If you only want the logo on module pages, outcome pages, etc., find the corresponding layout file in the _layouts directory:

• Module pages: _layouts/morea-module.html
• Outcome pages: _layouts/morea-outcome.html
• Reading pages: _layouts/morea-reading.html
• Repeat the same steps as Option A: add position: relative; to the main container, then insert the absolute-positioned logo code at the top of the content area.

Pro Tip: If your Morea project uses a theme (stored in _themes/morea/), don’t edit the theme files directly— copy the relevant include/layout file to your project’s root _includes or _layouts folder first, then make your changes there. This way, theme updates won’t overwrite your customizations.

内容的提问来源于stack exchange，提问作者Quirksahern