Plone 5 技术咨询：搜索栏迁移及头部图片添加等问题

云上老周

2026-5-20

Hey there! As someone who’s navigated the Plone 5 learning curve myself, I totally get how confusing the architecture can feel when you’re just starting out. Let’s break down your questions with clear, actionable steps:

Plone 5 uses the Diazo theming system to manage frontend layout, so most of this work will happen in your theme’s configuration files. Here’s how to do it:

First, locate your theme package (usually in src/your-theme-name/ in your Plone instance). Open the rules.xml file—this is where you’ll define how elements are moved or modified.
Remove the search bar from its original header position by adding this rule:
```
<remove css:theme="#portal-searchbox" />
```
Next, insert the search bar into the navbar. Find the CSS selector for your navbar (common ones are #portal-globalnav or .navbar-nav). Add this rule to insert the search bar after the navbar links:
```
<insert href="++plone++static/searchbox.pt" css:theme-insert="#portal-globalnav" position="after" />
```
Finally, tweak your theme’s CSS to style the search bar so it fits the navbar’s layout. For example, you might add:
```
#portal-searchbox {
  float: right;
  margin-top: 8px;
  margin-left: 15px;
}
```

Again, we’ll use rules.xml and some CSS to make this happen:

In your theme’s rules.xml, find the selector for the header logo (typically #portal-logo). Add a rule to insert your custom image right after the logo:

<insert css:theme-insert="#portal-logo" position="after">
  <img src="++theme++your-theme-name/images/your-custom-image.png" alt="Your Image Description" class="logo-side-image" />
</insert>

Place your image file in the images folder of your theme package (create the folder if it doesn’t exist).

Adjust the CSS to position the image properly. For example:

.logo-side-image {
  float: left;
  height: 50px; /* Match your logo's height */
  margin-left: 10px;
}