<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>WriteFreely &amp;mdash; Crystal生活誌</title>
    <link>https://paper.wf/x200706/tag:WriteFreely</link>
    <description>記錄生活用的</description>
    <pubDate>Mon, 02 Nov 2026 16:16:35 +0000</pubDate>
    <item>
      <title>WriteFreely深色模式CSS分享3（黑夜）v1</title>
      <link>https://paper.wf/x200706/writefreelyshen-se-mo-shi-cssfen-xiang-3-hei-ye-v1</link>
      <description>&lt;![CDATA[WriteFreely深色模式CSS分享3（黑夜）v1&#xA;#WriteFreely #網站相關&#xA;&#xA;這個主題程式碼區塊有調成深色，所以預覽圖截取這個部分，&#xA;技法參考這個主題&#xA;@import url(&#39;https://fonts.googleapis.com/css2?family=Noto+Sans+TC&amp;display=swap&#39;);&#xA;{&#xA;    font-family: &#39;Noto Sans TC&#39;, sans-serif!important;&#xA;}&#xA;&#xA;a,nav,a:visited{&#xA;        color:#bfc7d5!important;&#xA;}&#xA;&#xA;a:hover{&#xA;    text-decoration: underline dotted!important;&#xA;&#xA;}&#xA;&#xA;body#post article code {&#xA;    background-color: #1f2330;&#xA;    color: #b2add9;&#xA;}&#xA;&#xA;#collection #wrapper code {&#xA;    background-color: #1f2330;&#xA;    color: #b2add9;&#xA;}&#xA;&#xA;#collection #wrapper pre {&#xA;    background-color: #1f2330;&#xA;}&#xA;#subpage #wrapper code {&#xA;    background-color: #1f2330;&#xA;    color: #b2add9;&#xA;}&#xA;&#xA;#subpage #wrapper pre {&#xA;    background-color: #1f2330;&#xA;}&#xA;body#post pre {&#xA;    background: #1f2330;&#xA;}&#xA;body:not(code){&#xA;    background-color: #292d3e;&#xA;    color:#ded5b1!important;&#xA;    &#xA;}&#xA;/ Blog description (underneath title) on index page /&#xA;header p.description,h2,h3,h4,blockquote,time{&#xA;    color:#ded5b1!important;&#xA;}&#xA;&#xA;.post-title a.u-url:link{&#xA;    text-decoration: none!important;&#xA;}&#xA;.post-title a.u-url:hover{&#xA;    text-decoration: underline dotted!important;&#xA;}&#xA;&#xA;/ &#34;Read more...&#34; links /&#xA;body#collection a.read-more {&#xA;    text-decoration: none!important;&#xA;}&#xA;&#xA;/ Links inside blog posts /&#xA;article p a {&#xA;    text-decoration: none!important;&#xA;    color:#bfc7d5!important;&#xA;}&#xA;article p a:hover {&#xA;    text-decoration: underline dotted!important;&#xA;    color:#bfc7d5!important;&#xA;}&#xA;&#xA;/&#xA;&#xA;    RECIPES&#xA;    These are common patterns you may want to use on your blog.&#xA;&#xA;/&#xA;&#xA;/ Center images /&#xA;img {&#xA;    display: block;&#xA;    margin: 0 auto;&#xA;}&#xA;&#xA;/ Disable post header fade effect /&#xA;body#post header{&#xA;    -moz-opacity: 1;&#xA;    -khtml-opacity: 1;&#xA;    -webkit-opacity: 1;&#xA;    opacity: 1;&#xA;}&#xA;&#xA;/ Hide post views */&#xA;header nav .views {&#xA;    display: none;&#xA;}&#xA;覺得太在意CSS有點干擾寫作心情，&#xA;差點還因為對自己寫得主題都不滿意想搬到Wordpress.com&#xA;因為變成要錢作罷，&#xA;之後應該只會套用官方提供的主題]]&gt;</description>
      <content:encoded><![CDATA[<p>WriteFreely深色模式CSS分享3（黑夜）v1
<a href="/x200706/tag:WriteFreely" class="hashtag" rel="nofollow"><span>#</span><span class="p-category">WriteFreely</span></a> <a href="/x200706/tag:%E7%B6%B2%E7%AB%99%E7%9B%B8%E9%97%9C" class="hashtag" rel="nofollow"><span>#</span><span class="p-category">網站相關</span></a>
<img src="https://i.imgur.com/yHEPPcU.png" alt="">
這個主題程式碼區塊有調成深色，所以預覽圖截取這個部分，
技法參考<a href="https://write.as/themes/painkiller-bullet" rel="nofollow">這個主題</a></p>

<pre><code class="language-css">@import url(&#39;https://fonts.googleapis.com/css2?family=Noto+Sans+TC&amp;display=swap&#39;);
*{
    font-family: &#39;Noto Sans TC&#39;, sans-serif!important;
}

a,nav,a:visited{
        color:#bfc7d5!important;
}

a:hover{
    text-decoration: underline dotted!important;

}


body#post article code {
    background-color: #1f2330;
    color: #b2add9;
}

#collection #wrapper code {
    background-color: #1f2330;
    color: #b2add9;
}

#collection #wrapper pre {
    background-color: #1f2330;
}
#subpage #wrapper code {
    background-color: #1f2330;
    color: #b2add9;
}

#subpage #wrapper pre {
    background-color: #1f2330;
}
body#post pre {
    background: #1f2330;
}
body:not(code){
    background-color: #292d3e;
    color:#ded5b1!important;
    
}
/* Blog description (underneath title) on index page */
header p.description,h2,h3,h4,blockquote,time{
    color:#ded5b1!important;
}

.post-title a.u-url:link{
    text-decoration: none!important;
}
.post-title a.u-url:hover{
    text-decoration: underline dotted!important;
}

/* &#34;Read more...&#34; links */
body#collection a.read-more {
    text-decoration: none!important;
}

/* Links inside blog posts */
article p a {
    text-decoration: none!important;
    color:#bfc7d5!important;
}
article p a:hover {
    text-decoration: underline dotted!important;
    color:#bfc7d5!important;
}

/*

    RECIPES
    These are common patterns you may want to use on your blog.

*/

/* Center images */
img {
    display: block;
    margin: 0 auto;
}

/* Disable post header fade effect */
body#post header{
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
}

/* Hide post views */
header nav .views {
    display: none;
}
</code></pre>

<p>覺得太在意CSS有點干擾寫作心情，
差點還因為對自己寫得主題都不滿意想搬到Wordpress.com
<del>因為變成要錢作罷</del>，
之後應該只會套用官方提供的主題</p>
]]></content:encoded>
      <guid>https://paper.wf/x200706/writefreelyshen-se-mo-shi-cssfen-xiang-3-hei-ye-v1</guid>
      <pubDate>Sat, 12 Nov 2022 09:25:45 +0000</pubDate>
    </item>
    <item>
      <title>WriteFreely細節小記（截至20221022）</title>
      <link>https://paper.wf/x200706/writefreelyxi-jie-xiao-ji-jie-zhi-20221022</link>
      <description>&lt;![CDATA[#WriteFreely #網站相關&#xA;&#xA;MD``註釋無法正常顯示於文末&#xA;不能使用Font Awesome]]&gt;</description>
      <content:encoded><![CDATA[<p><a href="/x200706/tag:WriteFreely" class="hashtag" rel="nofollow"><span>#</span><span class="p-category">WriteFreely</span></a> <a href="/x200706/tag:%E7%B6%B2%E7%AB%99%E7%9B%B8%E9%97%9C" class="hashtag" rel="nofollow"><span>#</span><span class="p-category">網站相關</span></a></p>
<ul><li>MD<code>[^1]</code>註釋無法正常顯示於文末</li>
<li>不能使用Font Awesome</li></ul>
]]></content:encoded>
      <guid>https://paper.wf/x200706/writefreelyxi-jie-xiao-ji-jie-zhi-20221022</guid>
      <pubDate>Sat, 22 Oct 2022 06:33:42 +0000</pubDate>
    </item>
    <item>
      <title>WriteFreely深色模式CSS分享2（午夜紫）v1</title>
      <link>https://paper.wf/x200706/writefreelyshen-se-mo-shi-cssfen-xiang-2-wu-ye-zi-v1</link>
      <description>&lt;![CDATA[#WriteFreely #網站相關&#xA;&#xA;@import url(&#39;https://fonts.googleapis.com/css2?family=Noto+Sans+TC&amp;display=swap&#39;);&#xA;{&#xA;    font-family: &#39;Noto Sans TC&#39;, sans-serif!important;&#xA;}&#xA;&#xA;a,nav,a:visited{&#xA;        color:#dce4f5!important;&#xA;}&#xA;li a{&#xA;    color:#777!important;&#xA;}&#xA;a:hover{&#xA;    text-decoration: underline dotted!important;&#xA;&#xA;}&#xA;code{&#xA;    color:#e6478e;&#xA;}&#xA;body:not(code){&#xA;    background-color: #3c374a;&#xA;    color:#f5f0dc!important;&#xA;    &#xA;}&#xA;/ Blog description (underneath title) on index page /&#xA;header p.description,h2,h3,h4,blockquote,time{&#xA;    color:#f5f0dc!important;&#xA;}&#xA;&#xA;.post-title a.u-url:link{&#xA;    text-decoration: none!important;&#xA;}&#xA;.post-title a.u-url:hover{&#xA;    text-decoration: underline dotted!important;&#xA;}&#xA;&#xA;/ &#34;Read more...&#34; links /&#xA;body#collection a.read-more {&#xA;    text-decoration: none!important;&#xA;}&#xA;&#xA;/ Links inside blog posts /&#xA;article p a {&#xA;    text-decoration: none!important;&#xA;}&#xA;article p a:hover {&#xA;    text-decoration: underline dotted!important;&#xA;}&#xA;&#xA;/&#xA;&#xA;    RECIPES&#xA;    These are common patterns you may want to use on your blog.&#xA;&#xA;/&#xA;&#xA;/ Center images /&#xA;img {&#xA;    display: block;&#xA;    margin: 0 auto;&#xA;}&#xA;&#xA;/ Disable post header fade effect /&#xA;body#post header{&#xA;    -moz-opacity: 1;&#xA;    -khtml-opacity: 1;&#xA;    -webkit-opacity: 1;&#xA;    opacity: 1;&#xA;}&#xA;&#xA;/ Hide post views */&#xA;header nav .views {&#xA;    display: none;&#xA;}&#xA;&#xA;已知問題：（可能須自行斟酌調整）&#xA;&#xA;部分超連結（元素a）可能要自行改色，不然會顯示深灰色&#xA;管理員登入後，左上角管理選單已訪問連結顏色跟全域一樣都是淺藍色，導致在白底的選單不好閱讀，但對讀者似乎沒影響&#xA;字的對比似乎跟背景太高，可以視個人需求降低明度]]&gt;</description>
      <content:encoded><![CDATA[<p><a href="/x200706/tag:WriteFreely" class="hashtag" rel="nofollow"><span>#</span><span class="p-category">WriteFreely</span></a> <a href="/x200706/tag:%E7%B6%B2%E7%AB%99%E7%9B%B8%E9%97%9C" class="hashtag" rel="nofollow"><span>#</span><span class="p-category">網站相關</span></a></p>

<p><img src="https://i.imgur.com/ueTcXiz.png" alt=""></p>

<pre><code class="language-css">@import url(&#39;https://fonts.googleapis.com/css2?family=Noto+Sans+TC&amp;display=swap&#39;);
*{
    font-family: &#39;Noto Sans TC&#39;, sans-serif!important;
}

a,nav,a:visited{
        color:#dce4f5!important;
}
li a{
    color:#777!important;
}
a:hover{
    text-decoration: underline dotted!important;

}
code{
    color:#e6478e;
}
body:not(code){
    background-color: #3c374a;
    color:#f5f0dc!important;
    
}
/* Blog description (underneath title) on index page */
header p.description,h2,h3,h4,blockquote,time{
    color:#f5f0dc!important;
}

.post-title a.u-url:link{
    text-decoration: none!important;
}
.post-title a.u-url:hover{
    text-decoration: underline dotted!important;
}

/* &#34;Read more...&#34; links */
body#collection a.read-more {
    text-decoration: none!important;
}

/* Links inside blog posts */
article p a {
    text-decoration: none!important;
}
article p a:hover {
    text-decoration: underline dotted!important;
}

/*

    RECIPES
    These are common patterns you may want to use on your blog.

*/

/* Center images */
img {
    display: block;
    margin: 0 auto;
}

/* Disable post header fade effect */
body#post header{
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
}

/* Hide post views */
header nav .views {
    display: none;
}

</code></pre>

<p>已知問題：（可能須自行斟酌調整）</p>
<ul><li>部分超連結（元素<code>a</code>）可能要自行改色，不然會顯示深灰色</li>
<li>管理員登入後，左上角管理選單已訪問連結顏色跟全域一樣都是淺藍色，導致在白底的選單不好閱讀，但對讀者似乎沒影響</li>
<li>字的對比似乎跟背景太高，可以視個人需求降低明度</li></ul>
]]></content:encoded>
      <guid>https://paper.wf/x200706/writefreelyshen-se-mo-shi-cssfen-xiang-2-wu-ye-zi-v1</guid>
      <pubDate>Wed, 19 Oct 2022 23:12:28 +0000</pubDate>
    </item>
    <item>
      <title>WriteFreely使用三天心得</title>
      <link>https://paper.wf/x200706/writefreelyshi-yong-san-tian-xin-de</link>
      <description>&lt;![CDATA[#WriteFreely #網站相關&#xA;&#xA;因為Bloggi不能客製CSS，原生提供的配色方案又不是這麼喜歡，最近幾個月不知道為什麼一直看到WriteFreely的資訊，就想說搬來用用&#xA;&#xA;其實我一直有Write.as的帳號，但它免費版我記得限制頗多，當初用時覺得不上手，也沒有繼續用了&#xA;&#xA;但這次找了一個WriteFreely實例註冊，我覺得挺小而美的，以下說說這幾天的體驗：&#xA;&#xA;優點&#xA;1.實例版可以客製CSS&#xA;官方版Write.as這是付費功能，但至少在我註冊的實例是免費、開放的，我一拿到就寫了一個深色樣式，開心XD&#xA;&#xA;2.目前為止（體感上）覺得它的自動儲存比較穩定&#xA;同樣是Markdown部落格，我被Bloggi的編輯器陰了不下三次Orz，其實有點PTSD了，我後來是用HackMD之類的記事軟體寫完再丟過去ˊ  ˋ...&#xA;&#xA;3.能在Fedi上的其他實例看到自己的部落格&#xA;只要帳號是公開的，就能用Mastodon等Fedi上的平台看到自己的部落格，還有專屬的id，像我這個站是@paper.wf@x200706（用Mastodon查要去掉第一個老鼠）&#xA;&#xA;缺點&#xA;1.沒有單篇文章預覽功能，得善用草稿頻道Draft功能&#xA;我覺得有點可惜，有時候就想看看文章在網站的呈現，但還不想發半成品rr（而且Fedi上的帳號還會自己推播==）&#xA;&#xA;2.不像bloggi可以拖曳上傳圖片&#xA;只好用imgur上傳好後，用Markdown`或HTML語法img src=&#34;&#34; style=&#34;只能用HTML調大小MD我試過不行&#34;`嵌入圖片&#xA;&#xA;3.版型相對單調&#xA;後台有提供三種文章呈現方式，但比起Bloggi還是少很多&#xA;&#xA;hr&#xA;但我覺得還是值得一試，或許寫文功能太多反而失其本心？&#xA;話說我真喜歡換平台]]&gt;</description>
      <content:encoded><![CDATA[<p><a href="/x200706/tag:WriteFreely" class="hashtag" rel="nofollow"><span>#</span><span class="p-category">WriteFreely</span></a> <a href="/x200706/tag:%E7%B6%B2%E7%AB%99%E7%9B%B8%E9%97%9C" class="hashtag" rel="nofollow"><span>#</span><span class="p-category">網站相關</span></a></p>

<p>因為Bloggi不能客製CSS，原生提供的配色方案又不是這麼喜歡，最近幾個月不知道為什麼一直看到WriteFreely的資訊，就想說搬來用用</p>

<p>其實我一直有Write.as的帳號，但它免費版我記得限制頗多，當初用時覺得不上手，也沒有繼續用了</p>

<p>但這次找了一個WriteFreely實例註冊，我覺得挺小而美的，以下說說這幾天的體驗：</p>

<h2 id="優點">優點</h2>

<p>1.實例版可以客製CSS
官方版Write.as這是付費功能，但至少在我註冊的實例是免費、開放的，我一拿到就寫了一個深色樣式，開心XD</p>

<p>2.目前為止（體感上）覺得它的自動儲存比較穩定
同樣是Markdown部落格，我被Bloggi的編輯器陰了不下三次Orz，其實有點PTSD了，我後來是用HackMD之類的記事軟體寫完再丟過去ˊ_&gt;ˋ...</p>

<p>3.能在Fedi上的其他實例看到自己的部落格
只要帳號是公開的，就能用Mastodon等Fedi上的平台看到自己的部落格，還有專屬的id，像我這個站是<code>@paper.wf@x200706</code>（用Mastodon查要去掉第一個老鼠）</p>

<h2 id="缺點">缺點</h2>

<p>1.沒有單篇文章預覽功能，得善用草稿頻道Draft功能
我覺得有點可惜，有時候就想看看文章在網站的呈現，但還不想發半成品rr（而且Fedi上的帳號還會自己推播=_=）</p>

<p>2.不像bloggi可以拖曳上傳圖片
只好用imgur上傳好後，用Markdown<code>![]()</code>或HTML語法<code>&lt;img src=&#34;&#34; style=&#34;只能用HTML調大小MD我試過不行&#34;&gt;</code>嵌入圖片</p>

<p>3.版型相對單調
後台有提供三種文章呈現方式，但比起Bloggi還是少很多</p>

<hr>

<p>但我覺得還是值得一試，或許寫文功能太多反而失其本心？
<del>話說我真喜歡換平台</del></p>
]]></content:encoded>
      <guid>https://paper.wf/x200706/writefreelyshi-yong-san-tian-xin-de</guid>
      <pubDate>Tue, 18 Oct 2022 05:12:23 +0000</pubDate>
    </item>
    <item>
      <title>WriteFreely深色模式CSS分享（Mastodon-like）v1</title>
      <link>https://paper.wf/x200706/writefreelyshen-se-mo-shi-cssfen-xiang-mastodon-like-v1</link>
      <description>&lt;![CDATA[#WriteFreely #網站相關&#xA;&#xA;其實我寫完以後發現配色長得跟網路上有個人的超像啊啊&#xA;不過我hover是用了虛線；&#xA;&#xA;Chrome上面字體會比較大，我還沒有設計個別元素的字型大小&#xA;&#xA;以下是寫得超暴力的CSS請笑納QAQ&#xA;@import url(&#39;https://fonts.googleapis.com/css2?family=Noto+Sans+TC&amp;display=swap&#39;);&#xA;{&#xA;    font-family: &#39;Noto Sans TC&#39;, sans-serif!important;&#xA;}&#xA;&#xA;a,nav{&#xA;        color:#eee!important;&#xA;}&#xA;li a{&#xA;    color:#777!important;&#xA;}&#xA;a:hover,a:visited{&#xA;    text-decoration: underline dotted!important;&#xA;&#xA;}&#xA;code{&#xA;    color:#e6478e;&#xA;}&#xA;body:not(code){&#xA;    background-color: #373c4a;&#xA;    color:#eee!important;&#xA;    &#xA;}&#xA;/ Blog description (underneath title) on index page /&#xA;header p.description,h2,h3,h4,blockquote,time{&#xA;    color:#eee!important;&#xA;}&#xA;&#xA;.post-title a.u-url:link, .post-title a.u-url:visited {&#xA;    text-decoration: underline dotted!important;&#xA;}&#xA;&#xA;/ &#34;Read more...&#34; links /&#xA;body#collection a.read-more {&#xA;    text-decoration: underline dotted!important;&#xA;}&#xA;&#xA;/ Links inside blog posts /&#xA;article p a {&#xA;    text-decoration: underline dotted!important;&#xA;}&#xA;article p a:hover {&#xA;    text-decoration: underline dotted!important;&#xA;}&#xA;&#xA;/&#xA;&#xA;    RECIPES&#xA;    These are common patterns you may want to use on your blog.&#xA;&#xA;/&#xA;&#xA;/ Center images /&#xA;img {&#xA;    display: block;&#xA;    margin: 0 auto;&#xA;}&#xA;&#xA;/ Disable post header fade effect /&#xA;body#post header{&#xA;    -moz-opacity: 1;&#xA;    -khtml-opacity: 1;&#xA;    -webkit-opacity: 1;&#xA;    opacity: 1;&#xA;}&#xA;&#xA;/ Hide post views */&#xA;header nav .views {&#xA;    display: none;&#xA;}&#xA;&#xA;基於官方建議修改；&#xA;&#xA;使用了Google Font之思源黑體，&#xA;頁面中比較明顯的色彩應該只有#eee跟藍灰色底色#373c4a，&#xA;也就是替換掉這兩個顏色，就能變成你喜歡的深色主題配色了~]]&gt;</description>
      <content:encoded><![CDATA[<p><a href="/x200706/tag:WriteFreely" class="hashtag" rel="nofollow"><span>#</span><span class="p-category">WriteFreely</span></a> <a href="/x200706/tag:%E7%B6%B2%E7%AB%99%E7%9B%B8%E9%97%9C" class="hashtag" rel="nofollow"><span>#</span><span class="p-category">網站相關</span></a></p>

<p><img src="https://i.imgur.com/8cya6HN.png" alt=""></p>

<p>其實我寫完以後發現配色長得跟網路上有個人的超像啊啊
不過我hover是用了虛線；</p>

<p>Chrome上面字體會比較大，我還沒有設計個別元素的字型大小</p>

<p>以下是寫得超暴力的CSS請笑納QAQ</p>

<pre><code class="language-css">@import url(&#39;https://fonts.googleapis.com/css2?family=Noto+Sans+TC&amp;display=swap&#39;);
*{
    font-family: &#39;Noto Sans TC&#39;, sans-serif!important;
}

a,nav{
        color:#eee!important;
}
li a{
    color:#777!important;
}
a:hover,a:visited{
    text-decoration: underline dotted!important;

}
code{
    color:#e6478e;
}
body:not(code){
    background-color: #373c4a;
    color:#eee!important;
    
}
/* Blog description (underneath title) on index page */
header p.description,h2,h3,h4,blockquote,time{
    color:#eee!important;
}

.post-title a.u-url:link, .post-title a.u-url:visited {
    text-decoration: underline dotted!important;
}

/* &#34;Read more...&#34; links */
body#collection a.read-more {
    text-decoration: underline dotted!important;
}

/* Links inside blog posts */
article p a {
    text-decoration: underline dotted!important;
}
article p a:hover {
    text-decoration: underline dotted!important;
}

/*

    RECIPES
    These are common patterns you may want to use on your blog.

*/

/* Center images */
img {
    display: block;
    margin: 0 auto;
}

/* Disable post header fade effect */
body#post header{
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
}

/* Hide post views */
header nav .views {
    display: none;
}

</code></pre>

<p>基於官方建議修改；</p>

<p>使用了Google Font之思源黑體，
頁面中比較明顯的色彩應該只有<code>#eee</code>跟藍灰色底色<code>#373c4a</code>，
也就是替換掉這兩個顏色，就能變成你喜歡的深色主題配色了~</p>
]]></content:encoded>
      <guid>https://paper.wf/x200706/writefreelyshen-se-mo-shi-cssfen-xiang-mastodon-like-v1</guid>
      <pubDate>Mon, 17 Oct 2022 05:22:59 +0000</pubDate>
    </item>
  </channel>
</rss>