# partial with md && css

**URL:** <https://discourse.gohugo.io/t/partial-with-md-css/44830>\
**Category:** support\
**Created:** [June 16, 2023, 3:53am UTC](https://discourse.gohugo.io/t/partial-with-md-css/44830 "2023-06-16T03:53:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rik](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rik/32/19668_2.png) [@Rik](https://discourse.gohugo.io/u/Rik)\
**Post date:** [June 16, 2023, 3:53am UTC](https://discourse.gohugo.io/t/partial-with-md-css/44830/1 "2023-06-16T03:53:00Z")

</div>

I use partials a lot in my hugo project, and it works very well in many cases, but when I want to use a partial on another page, I have to import the md content file and style file corresponding to this partial separately to the page, this will be more troublesome. I want to know if there is a way for me to implement a unified component that contains html, content md && css inside, and if so, can you provide me with an example

---

<div class="post-metadata">

**Author:** ![Tom\_Durand](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/tom_durand/32/14460_2.png) [@Tom\_Durand](https://discourse.gohugo.io/u/Tom_Durand)\
**Post date:** [June 16, 2023, 7:58am UTC](https://discourse.gohugo.io/t/partial-with-md-css/44830/2 "2023-06-16T07:58:28Z")

</div>

> [@Rik](#):
>
> when I want to use a partial on another page, I have to import the md content file and style file

That is not clear.  
What does it look like ? Please share some code.  
You could inline your css (`style=" "`) in the partial, or an external sheet linked to in the head section loaded just in the chosen pages, or in your main css.  
markdown can be put and rendered anywhere with `.RenderString`.  
But please don’t do that. Baby - ugly ! - example:

```auto
<span style="summary {color:lime}
	  	summary::after {
	    	content: " ☚ Unroll";
	    	font-size:0.7rem;}
		summary:hover{color: red}
	details[open] {
		summary{
			color: red;
			border-bottom: thick dotted red;}
		outline: thin solid ghostwhite;}">
<details{{ if .Get "open"}} open{{ end }}>
 <summary>{{ .Page.RenderString "*Fixed* Title of your **summary**"}}</summary>
    {{ .Inner | .Page.RenderString }}
</details>
</span>

```

---

<div class="post-metadata">

**Author:** ![Rik](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rik/32/19668_2.png) [@Rik](https://discourse.gohugo.io/u/Rik)\
**Post date:** [June 19, 2023, 2:29am UTC](https://discourse.gohugo.io/t/partial-with-md-css/44830/3 "2023-06-19T02:29:29Z")

</div>

What I mean is, suppose I have a partial title with

{{.title}}
 inside, I have to define a title under each page that uses it, and pass it into  
{{ with .Params.title}}  
{{ partial “title” .}}  
{{ end }}  
title is just an example, actually my partial will have more data, is there a way for me to avoid defining the data on each page, but get it directly inside the partial

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [June 19, 2023, 3:50am UTC](https://discourse.gohugo.io/t/partial-with-md-css/44830/4 "2023-06-19T03:50:58Z")

</div>

If you do this with `layouts/_default/single.html` …

```auto
{{ partial "foo.html" . }}

```

then the partial template receives the current page in _context_\[1\]. That’s what the dot is… context. So within the partial you can do…

```auto
{{ .Title }} --> My First Post
{{ .Params.foo }} --> something
{{ .Content }} --> The rendered page content

```

Do you see how each of them begin with the dot? That’s the context.

* * *

1. assuming you are not calling the partial within a `with` or `range` block that changes the context