svelteで、無料ブログ公開の例

概要:

前のsvelteの関係で、ブログ等のCMS表示系機能の作成　vercelデプロイとなります。

• jsonファイル(public/cms.json) を読込表示する構成です

• jsonファイル編集機能は、前のReact版

• sapper/SSG版と比較して。コンテンツ編集時に git pushする手間が増えた点が。欠点になりそうでした

---

環境

• svelte: 3.17.3
• svelte-spa-router

---

参考のデモページ

https://cms-kuc-svelte1-3cms.vercel.app/

---

参考のコード

https://github.com/kuc-arc-f/svelte1_3cms

---

実装など

• index

posts/index.svelte

index.svelte

<script>
import {link} from 'svelte-spa-router'
import LibCommon from '../../lib/LibCommon';
export let posts = [];

async function get_items(){
  var dt = LibCommon.formatDate( new Date(), "YYYY-MM-DD_hhmmss");
  const res = await fetch(`/cms.json?` + dt  );
	const data = await res.json();
  var items =  LibCommon.get_reverse_items(data.items)
  posts =items
}
get_items() 
</script>

<!-- -->
<div class="container">
	<h3>Posts - index</h3>
  <hr />
  {#each posts as item}
  <h3><a href={`/posts/show/${item.save_id}`} use:link>{item.title}</a>
  </h3>
  <p>ID : {item.id}
  </p>  
  {/each}   
</div>

---

• show/詳細

posts/show.svelte

show.svelte

<script>
import {link} from 'svelte-spa-router'
import marked from 'marked'
import LibCommon from '../../lib/LibCommon';
import LibCms from '../../lib/LibCms'

export let post = {};
export let params = Params
console.log(post)
//
async function get_items(){
  var dt = LibCommon.formatDate( new Date(), "YYYY-MM-DD_hhmmss");
  const res = await fetch(`/cms.json?` + dt  );
	const data = await res.json();
  var item  = LibCms.get_show_item( data.items, String(params.id) )
  item.content = marked(item.content)
  console.log(item)
  post =item
}
get_items() 
</script>

<!-- -->
<div class="container">
	<h1>{post.title}</h1>
  ID : {params.id}<br />
  Date : {post.created_at}
  <hr />
  <div id="post_item" >{@html post.content}
  </div>

</div>

....