2024/12部落格更新：文章排版更新、RWD手機端頂端列、廣告嘗試 - SeagaLogs

距離上次發文有兩個月了，也距離本站第一次上架後將近四個月，
之所以間隔會有那麼久沒發文，主要有兩個原因：
一是正在編輯的遊戲攻略心得還在思考文案；二來則是舊版的markdown語法樣式實在不是很好看。

所以事不宜遲，馬上來進行本次的更新日誌，同時作為展示新版本的markdown樣式實際使用。

markdown樣式更新 & markdown-it插件新增 🔗

markdown stylesheet css更新 🔗

最初個人接觸markdown是使用HackMd作為筆記時開始使用，後續也比較習慣HackMd的樣式，
因此這次的md樣式更新便是參照HackMd的樣式微調後進行使用，
找markdown的css現成樣式表在網路上比較難找到現成即用的版本，於是便參照比對出了這一份文件(點擊查看)

本次更新 markdown css表內容

@import url(https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css);
/* @import url(https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css); */

.markdown-body {
  max-width: 100%;
  font-size: 18px;
  line-height: 1.75;
  overflow-wrap: break-word;
}

.markdown-body>*{
  max-width: 100%;
}

.markdown-body p,
.markdown-body blockquote,
.markdown-body ul,
.markdown-body ol,
.markdown-body dl,
.markdown-body table,
.markdown-body pre{
  margin-top: 0;
  margin-bottom: 18px;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6{
  margin-top: 27px;
  margin-bottom: 18px;
  font-weight: 600;
  line-height: 1.25;
  scroll-margin-top: calc(20px + var(--header-height)); 
  /* 動態跟著header厚度 */
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5{
  font-weight: 700;
}

.markdown-body h1{
  font-size: 2em;
  text-align: center;
}

.markdown-body h2{
  padding-bottom: .3em;
  font-size: 1.5em;
  border-bottom: 1px solid;
  border-bottom-color: #e4e4e7;
}

.markdown-body h3{
  font-size: 1.25em;
}

.markdown-body h4{
  font-size: 1em;
}

.markdown-body h5{
  font-size: 0.875em;
}

.markdown-body h6{
  font-size: 0.85em;
  color: #777;
}

.markdown-body a {
  color: #4293af;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.markdown-body a:hover,
.markdown-body a:focus {
  text-decoration: none;
}

/* 滑鼠移到上面時顯示 */
.markdown-body h2 a.header-anchor,
.markdown-body h3 a.header-anchor,
.markdown-body h4 a.header-anchor {
  text-decoration: none;
  display: none;
}
.markdown-body h2:hover a.header-anchor,
.markdown-body h3:hover a.header-anchor,
.markdown-body h4:hover a.header-anchor{
  display: inline;
}

.markdown-body blockquote {
  padding: 0 1em;
  color: #777;
  border-left: 3px solid #ddd;
}

.markdown-body hr{
  padding: 0;
  margin: 27px 0;
  border: 0;
  height: 2px;
  background-color: #d4d4d8;
}

.markdown-body b,
.markdown-body strong{
  font-weight: 700;
}

.markdown-body em{
  font-style: italic;
}

.markdown-body s{
  text-decoration: line-through;
}

.markdown-body ul,
.markdown-body ol{
  padding-left: 2em;
}

.markdown-body ul ul,
.markdown-body ul ol,
.markdown-body ol ul,
.markdown-body ol ol{
  margin-top: 6px;
  margin-bottom: 12px;
}

.markdown-body ul{
  list-style-type: disc;
}

.markdown-body ol{
  list-style-type: decimal;
}

.markdown-body ul ul{
  list-style-type: circle;
}

.markdown-body ul ul ul{
  list-style-type: square;
}

.markdown-body li>p{
  margin-top: 16px;

}

.markdown-body li+li{
  padding-top: .25em;
}

.markdown-body code,
.markdown-body tt{
  padding: .2em 0;
  margin: 0;
  font-size: 85%;
  background-color: #0000000a;
  border-radius: 3px;
}

.markdown-body :not(pre)>code{
  background-color: #0000000a;
}

.markdown-body pre{
  word-wrap: normal;
}

.markdown-body pre,
.markdown-body .highlight pre{
  border-radius: 4px;
}

.markdown-body pre{
  border: inherit;
}

.markdown-body:not(.next-editor) pre {
    padding: 16px
}

.markdown-body pre,
.markdown-body .highlight pre{
    background-color: #f4f4f5;
    overflow: auto;
}

.markdown-body pre>code {
    padding: 0;
    margin: 0;
    font-size: 100%;
    word-break: normal;
    white-space: pre;
    background: transparent;
    border: 0
}

.markdown-body pre code,.markdown-body pre tt {
    display: inline;
    max-width: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    line-height: inherit;
    word-wrap: normal;
    background-color: transparent;
    border: 0
}

.markdown-body table {
  border-spacing: 0;
  border-collapse: collapse;
  display: block;
  overflow: auto;
  word-break: keep-all;
  border-radius: 4px;
  border: 1px solid;
  width: fit-content;
  border-color: #e4e4e7;
}

.markdown-body table thead,
.markdown-body table thead th:first-child,
.markdown-body table tbody tr td:first-child {
  border-left: none
}

.markdown-body table tr {
  background-color: #fff;
  border-top: 1px solid #ccc
}

.markdown-body table thead tr {
  border-bottom: 1px solid;
  border-top: none;
  background-color: #f4f4f5;
  border-bottom-color: #d4d4d8;
}

.markdown-body th{
  padding: 0;
  text-align: left;
}

.markdown-body table th {
    font-weight: 700
}

.markdown-body table th,
.markdown-body table td {
    padding: 6px 13px;
    border: 1px solid #ddd;
    border-right: none;
    border-bottom: none;
}

.markdown-body table thead tr th,
.markdown-body table tbody tr {
    border-top: none
}

.markdown-body table thead,
.markdown-body table thead th:first-child,
.markdown-body table tbody tr td:first-child {
    border-left: none
}

.markdown-body img {
  border: 0;
  vertical-align: middle;
    max-width: 100%;
    box-sizing: content-box;
    background-color: #fff
}

.markdown-body img,
.markdown-body iframe {
    margin: .5rem 0;
    border-radius: 6px;
    background-color: initial
}

sup,
sub{
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

.markdown-body dl {
    padding: 0
}

.markdown-body dl dt {
  line-height: 1.42857143;
    padding: 0;
    margin-top: 16px;
    font-size: 1em;
    font-style: italic;
    font-weight: 700
}

.markdown-body dl dd {
  line-height: 1.42857143;
  margin-left: 0;
    padding: 0 16px;
    margin-bottom: 16px
}

.markdown-body .info,
.markdown-body .warning,
.markdown-body .success,
.markdown-body .danger {
  padding: 15px;
  margin-bottom: 20px;
  border: none;
  border-radius: 4px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-left: 3px solid;
}

.markdown-body .info>*,
.markdown-body .warning>*,
.markdown-body .success>*,
.markdown-body .danger>* {
  margin: 0;
}

.markdown-body .info {
  background-color: #e0f2fe;
  color: #0284c7;
  border-left-color: #0284c7
}

.markdown-body .warning{
  background-color: #fef3c799;
  color: #f59e0b;
  border-left-color: #f59e0b
}

.markdown-body .success{
  background-color: #d9f9e5;
  color: #43946c;
  border-left-color: #43946c;
}

.markdown-body .danger{
  background-color: #fee2e299;
  color: #ef4444;
  border-left-color: #ef4444
}

.markdown-body details {
  padding: .5rem 1rem;
  margin-bottom: .5rem;
  border-radius: 4px;
  background-color: #f4f4f5;
}

.markdown-body details summary {
  cursor: pointer
}

.markdown-body summary {
  display: list-item
}

.markdown-body details summary+p {
  margin-top: .5rem
}

.markdown-body details p:last-child {
  margin-bottom: 0
}

.markdown-body details:hover {
  transition: .1s all;
  background: #E4E4E7;
}

.markdown-body details[open]:hover {
  background-color: #f4f4f5;
}

@media screen and (max-width: 768px) {
  .markdown-body h1 {
      font-size:1.6em
  }

  .markdown-body h2 {
      font-size: 1.4em
  }

  .markdown-body h3 {
      font-size: 1.125em
  }
}

markdown-it插件 🔗

本站使用markdown-it作為Parser使用，本來舊版是幾乎只用預設的設定直接使用，
而到了這版，加上不少插件使得功能更加完善，也更加貼近原本HackMd的寫作習慣。

markdown-it-anchor: 段落標題錨點，可以通過複製標題後連結作為直接連結至該段落的連結。
markdown-it-emoji: 表情符號，支援顯示 😃 😦 等表情，也可透過簡寫轉換。 (例如 :) 是 😃)
markdown-it-sub: 下標，支援像是1_st、2_nd這樣的表示法。
markdown-it-sup: 上標，支援像是25^oc、20^th這樣的表示法。
markdown-it-ins: 底線文字
markdown-it-mark: 重點標記
markdown-it-footnote: 追加腳註^[1]
markdown-it-deflist: 支援定義列表
markdown-it-abbr: 簡寫備註
markdown-it-container: 特色區塊標記，例如本塊淡藍色的info區塊

RWD更新 🔗

針對行動裝置等寬度較小的螢幕調整版型，最主要的是手機版的上方網頁標題列調整的更加矮一些，避免佔了太大的畫面，
同時markdown的部分標題大小也隨著做調整。

Google Adsense廣告投放 🔗

其實本站在上架後就有申請Google Adsense的廣告審核，審核也在幾天內就完成，
但是由於此項目優先度不高，且在剛上架放廣告並不是很有意義，
在本次更新調整頁面版型時有順帶完成廣告位子，於是便在此次開始投放廣告。

其實最初是想投放在文章兩側，但是容易造成兩邊廣告大小不對稱，
而且有點影響文章閱讀，就先試行文章尾端的廣告投放了。

本次更新後，前面的文章應該會因為樣式表改變而造成部分樣式不太一樣的問題，可能後續會需要回去稍微調整，
調整期間如果有哪篇文章的排版有明顯問題的歡迎私訊我，我會盡快調整，也謝謝大家的見諒。

同時也會繼續慢慢產出各種不同的文章內容，歡迎各位繼續關注支持。

腳註內容 ↩︎