Open Board

h1. Hydeout Theme 꾸미기

h2. sidebar.html 분석

<pre><code class="html">
<div id="sidebar">
<header>
<{% if page.layout == "index" %}h1{% else %}div{% endif %} class="site-title">
<a href="{{ site.baseurl }}/">
{% unless page.url == "/" %}
<span class="back-arrow icon">{% include svg/back-arrow.svg %}</span>
{% endunless %}
{{ site.title }}
</a>
</{% if page.layout == "index" %}h1{% else %}div{% endif %}>
<p class="lead">{{ site.description }}</p>
</header>
{% include sidebar-nav-links.html %}

{% if site.version %}
<span class="site-version">Currently v{{ site.version }}</span>
{% endif %}

{% include sidebar-icon-links.html %}
{% include copyright.html %}
</div>
</code></pre>

* 여기서 @{{ xxx }}@ 로 나타나는 부분이 Hydeout의 변수 부분이다.
** _config.yml 에서 수정하거나 첨가하면 된다.

각각의 변수는 다음의 의미이다. (그림 참조)

!https://public.boxcloud.com/api/2.0/internal_files/307064290248/versions/323438176296/representations/png_paged_2048x2048/content/1.png?access_token=1!mktLToB-qVhySx9aeotIGlzscKkUBDqCVwAkcXFoBJD3uEjAy-ioP3SClo7mACCogtL_XgvQUQxoQDP4qeH-3quBDfJB9e-9wqkMPiSu_hKacCCuhatcNfafsy2nSKvDmtOk4fFIq9O10hi7v504pfiAWF6Uib8z_MWp3y8_dn9c-cHDQ84563HPjYIyKRoiwMFOMhfUyNhdM2F7jsuKX08NmLBctKaoI3NZB3mnaH0lR8BeX7lfPmBL8hi5888grBSkQ3fnKbnUNLD4f9XPd9J6r3JXWnt_Y1tl8ogwV86TDTivld-yfpF3Be3Nzn9Z-Vb09nZi8c7qfIhPFjZ-NJv2tWMo1qSFlOksvwaXgNC-USp3d_Sl452ro7g0F-v_4vjJ2O7gDdNwSOhBuDGyLaqvY1zvsOD2JWhqFBuMBSIPw-5IzozoBbqB753M5NN_GWNI_3VRCX8lS9KJMnPdzOzxhtFmMtogboUtNHO0kf4T2jNOcRkwAFkQaU9FrgY.&box_client_name=box-content-preview&box_client_version=1.46.0!

!https://app.box.com/s/hfuye55m9n8lhn2s0srmixcwq27dbys2!

h2. Back ground 색상 변화

@_sass\hydeout\_variables.scss@ 에서,
<pre><code class="ruby">
// Hyde theming
$sidebar-bg-color: #202020 !default;
$sidebar-title-color: #ffffff !default;
$sidebar-sticky: true !default;
$layout-reverse: false !default;
</code></pre>

@$sidebar-bg-color@ 항목을 이렇게 바꾼다.

<pre><code class="ruby">
// Hyde theming
//$sidebar-bg-color: #202020 !default;
$sidebar-bg-color: #106792 !default;
$sidebar-title-color: #ffffff !default;
$sidebar-sticky: true !default;
$layout-reverse: false !default;
</code></pre>